Skip to content

Commit 9c689db

Browse files
authored
Update README.md
1 parent d6b1733 commit 9c689db

File tree

1 file changed

+93
-0
lines changed

1 file changed

+93
-0
lines changed

README.md

+93
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ This is a Magento module that connects the Magento CMS with the VueFront Web App
3232

3333
[VueFront on Magento](https://magento.vuefront.com/)
3434

35+
![Magento VueFront CMS Connect App](http://joxi.net/LmGewYZiw5VeDA.jpg)
36+
3537
### Magento Blog (Megafan Blog Module)
3638
Since Magento does not have a built-in Blog, we use [Megafan Blog Module](https://marketplace.magento.com/magefan-module-blog.html) to add blog support automatically. If the Megafan Blog Module is not avalible, VueFront will ignore it.
3739

@@ -80,7 +82,98 @@ php bin/magento setup:upgrade
8082
php bin/magento setup:static-content:deploy
8183
```
8284

85+
## Deploy VueFront Web App to Apache hosting (static website)
86+
### via VueFront Deploy service (recommended)
87+
1. Install the VueFront CMS Connect App from this repo.
88+
2. Log in or register an account with VueFront.com
89+
3. Build your first Web App
90+
4. Activate the new Frontend Web App (only avalible for Apache servers)
91+
92+
93+
### via ftp manually
94+
1. Install the VueFront CMS Connect App from this repo.
95+
2. Log in or register an account with VueFront.com
96+
3. Copy the CMS Connect URL
97+
4. Via Ftp create a new folder `vuefront` in the root of your OpenCart site on your hosting.
98+
5. Via command line build your VueFront Web App ([read more](https://vuefront.com/guide/setup.html))
99+
```
100+
yarn create vuefront-app
101+
# When promote, provide the CMS Connect URL, which you coppied at step 3.
102+
yarn generate
103+
```
104+
6. Copy all files from folder `dist` to the newly created `vuefront` folder
105+
7. modify you `.htaccess` file by adding after `#RewriteBase /magento/` rule the following rules:
106+
```htaccess
107+
# VueFront scripts, styles and images
108+
RewriteCond %{REQUEST_URI} .*(_nuxt)
109+
RewriteCond %{REQUEST_URI} !.*/vuefront/_nuxt
110+
RewriteRule ^([^?]*) vuefront/$1
111+
# VueFront sw.js
112+
RewriteCond %{REQUEST_URI} .*(sw.js)
113+
RewriteCond %{REQUEST_URI} !.*/vuefront/sw.js
114+
RewriteRule ^([^?]*) vuefront/$1
115+
# VueFront favicon.ico
116+
RewriteCond %{REQUEST_URI} .*(favicon.ico)
117+
RewriteCond %{REQUEST_URI} !.*/vuefront/favicon.ico
118+
RewriteRule ^([^?]*) vuefront/$1
119+
# VueFront pages
120+
# VueFront home page
121+
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
122+
RewriteCond %{QUERY_STRING} !.*(rest_route)
123+
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/index.html -f
124+
RewriteRule ^$ vuefront/index.html [L]
125+
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
126+
RewriteCond %{QUERY_STRING} !.*(rest_route)
127+
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/index.html !-f
128+
RewriteRule ^$ vuefront/200.html [L]
129+
# VueFront page if exists html file
130+
RewriteCond %{REQUEST_FILENAME} !-f
131+
RewriteCond %{REQUEST_FILENAME} !-d
132+
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
133+
RewriteCond %{QUERY_STRING} !.*(rest_route)
134+
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/$1.html -f
135+
RewriteRule ^([^?]*) vuefront/$1.html [L,QSA]
136+
# VueFront page if not exists html file
137+
RewriteCond %{REQUEST_FILENAME} !-f
138+
RewriteCond %{REQUEST_FILENAME} !-d
139+
RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)
140+
RewriteCond %{QUERY_STRING} !.*(rest_route)
141+
RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/$1.html !-f
142+
RewriteRule ^([^?]*) vuefront/200.html [L,QSA]
143+
```
83144

145+
## Deploy VueFront Web App to Nginx hosting (static website)
146+
Same as for apache only you are required to add the server configurations yourself:
147+
148+
### via VueFront Deploy service (recommended)
149+
1. Install the VueFront CMS Connect App from this repo.
150+
2. Log in or register an account with VueFront.com
151+
3. Build your first Web App
152+
4. Now you need to add this code to your `nginx.config` file right after the `index` directive
153+
```
154+
location ~ ^((?!image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/).)*$ {
155+
try_files /vuefront/$uri /vuefront/$uri "/vuefront${uri}index.html" /vuefront$uri.html /vuefront/200.html;
156+
}
157+
```
158+
159+
### via ftp manually
160+
1. Install the VueFront CMS Connect App from this repo.
161+
2. Log in or register an account with VueFront.com
162+
3. Copy the CMS Connect URL
163+
4. Via Ftp create a new folder `ROOT/pub/vuefront` of your Magento site on your hosting.
164+
5. Via the command line build your VueFront Web App ([read more](https://vuefront.com/guide/setup.html))
165+
```
166+
yarn create vuefront-app
167+
# When promote, provide the CMS Connect URL, which you coppied at step 3.
168+
yarn generate
169+
```
170+
6. Now you need to add this code to your `nginx.config` file right after the `index` directive
171+
```
172+
location ~ ^((?!image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/).)*$ {
173+
try_files /vuefront/$uri /vuefront/$uri "/vuefront${uri}index.html" /vuefront$uri.html /vuefront/200.html;
174+
}
175+
```
176+
84177
## Support
85178
For support please contact us at [Discord](https://discord.gg/C9vcTCQ)
86179

0 commit comments

Comments
 (0)