Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vuefront/prestashop

Free PWA & SPA for PrestaShop
https://github.com/vuefront/prestashop

app graphql-api nuxt offline prestashop prestashop-cms prestashop-module ps-module pwa pwa-apps pwapp spa vue vuefront vuefront-web vuejs web-app webapp webpack

Last synced: 25 days ago
JSON representation

Free PWA & SPA for PrestaShop

Host: GitHub
URL: https://github.com/vuefront/prestashop
Owner: vuefront
License: mit
Created: 2019-06-14T13:40:12.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-03-04T12:38:14.000Z (over 1 year ago)
Last Synced: 2024-09-28T21:23:40.279Z (about 1 month ago)
Topics: app, graphql-api, nuxt, offline, prestashop, prestashop-cms, prestashop-module, ps-module, pwa, pwa-apps, pwapp, spa, vue, vuefront, vuefront-web, vuejs, web-app, webapp, webpack
Language: PHP
Homepage: https://vuefront.com/cms/prestashop.html
Size: 12.5 MB
Stars: 88
Watchers: 6
Forks: 13
Open Issues: 32
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


  


  

    

  



VueFront

CMS Connect App for PrestaShop





  

  





Show your :heart: - give us a :star: 
 

Help us grow this project to be the best it can be!

  


__VueFront__ is a VueJS powered CMS agnostic SPA & PWA frontend for your old-fashioned Blog and E-commerce site. 

__PrestaShop__ is an efficient and innovative e-commerce solution with all the features you need to create an online store and grow your business.

__CMS Connect App__ - adds the connection between the PrestaShop CMS and VueFront Web App via a GraphQL API.

## What does it do?

This is a PrestaShop module that connects the PrestaShop CMS with the VueFront Web App via a GraphQL API. When installed, you will be provided with a CMS Connect URL that you will add to your VueFront Web App during [setup](https://vuefront.com/guide/setup.html).

## DEMO

[VueFront on PrestaShop](https://prestashop.vuefront.com/)

![VueFront for PrestaShop admin panel](http://joxi.net/E2p1aYlS7JP05A.jpg)

### PrestaShop Blog (PrestaBlog) 

Since PrestaShop does not have a built-in Blog, we use [PrestaBlog](https://addons.prestashop.com/en/blog-forum-new/4731-professional-blog.html) to add blog support. If PrestaBlog is not avalible, VueFront will ignore it.

## How to install?

Php version required >= 5.5, <= 7.2 (this limitation will be removed in the future)

### Quick Install

1. The quickest way to install is via PrestaShop Module Manager or manually [Download](https://github.com/vuefront/prestashop/releases) the **compiled** module and upload it through the 'Modules > Module Manager > Upload a module' menu in PrestaShop

2. Activate the Module after installation is complete

3. Visit modules's configurations to get the CMS Connect URL

You will need the CMS Connect URL to complete the [VueFront Web App installation](https://vuefront.com/guide/setup.html)

## Deploy VueFront Web App to hosting (static website)

### via VueFront Deploy service (recommended)

1. Install the VueFront CMS Connect App from this repo.

2. Log in or register an account with VueFront.com

3. Build your first Web App

4. Activate the new Frontend Web App (only avalible for Apache servers)

 > For Nginx you need to add this code to your `nginx.config` file right after the `index` directive

 ```

location ~ ^((?!image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/).)*$ {

    try_files /vuefront/$uri /vuefront/$uri "/vuefront${uri}index.html" /vuefront$uri.html /vuefront/200.html;

}

 ```

 

### via ftp manually

1. Install the VueFront CMS Connect App from this repo.

2. Log in or register an account with VueFront.com

3. Copy the CMS Connect URL 

4. Via Ftp create a new folder `vuefront` in the root of your PrestaShop site on your hosting. 

5. Via command line build your VueFront Web App ([read more](https://vuefront.com/guide/setup.html)) 

```

yarn create vuefront-app

# When promote, provide the CMS Connect URL, which you coppied at step 3.

yarn generate

```

6. Copy all files from folder `dist` to the newly created `vuefront` folder

7. modify you `.htaccess` file by adding after `RewriteBase` rule the following rules:

```htaccess

# VueFront scripts, styles and images

RewriteCond %{REQUEST_URI} .*(_nuxt)

RewriteCond %{REQUEST_URI} !.*/vuefront/_nuxt

RewriteRule ^([^?]*) vuefront/$1

# VueFront sw.js

RewriteCond %{REQUEST_URI} .*(sw.js)

RewriteCond %{REQUEST_URI} !.*/vuefront/sw.js

RewriteRule ^([^?]*) vuefront/$1

# VueFront favicon.ico

RewriteCond %{REQUEST_URI} .*(favicon.ico)

RewriteCond %{REQUEST_URI} !.*/vuefront/favicon.ico

RewriteRule ^([^?]*) vuefront/$1

# VueFront pages

# VueFront home page

RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)

RewriteCond %{QUERY_STRING} !.*(rest_route)

RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/index.html -f

RewriteRule ^$ vuefront/index.html [L]

RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)

RewriteCond %{QUERY_STRING} !.*(rest_route)

RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/index.html !-f

RewriteRule ^$ vuefront/200.html [L]

# VueFront page if exists html file

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)

RewriteCond %{QUERY_STRING} !.*(rest_route)

RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/$1.html -f

RewriteRule ^([^?]*) vuefront/$1.html [L,QSA]

# VueFront page if not exists html file

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_URI} !.*(image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/)

RewriteCond %{QUERY_STRING} !.*(rest_route)

RewriteCond %{DOCUMENT_ROOT}".$document_path."vuefront/$1.html !-f

RewriteRule ^([^?]*) vuefront/200.html [L,QSA]

```

 > For Nginx you need to add this code to your nginx.config file right after the index rule

 ```

location ~ ^((?!image|.php|admin|catalog|\/img\/.*\/|wp-json|wp-admin|wp-content|checkout|rest|static|order|themes\/|modules\/|js\/|\/vuefront\/).)*$ {

    try_files /vuefront/$uri /vuefront/$uri "/vuefront${uri}index.html" /vuefront$uri.html /vuefront/200.html;

}

 ```

## Support

For support please contact us at [Discord](https://discord.gg/C9vcTCQ)

## Submit an issue

For submitting an issue, please create one in the [issues tab](https://github.com/vuefront/vuefront/issues). Remember to provide a detailed explanation of your case and a way to reproduce it. 

Enjoy!