Vue.js Storefront: PWA for eCommerce

Vue Storefront - PWA for eCommerce

Vue.js Storefront is a project for built for the needs of eCommerce, designed for 100% offline, platform agnostic, with support for Magento2. It is an Open Source project, and anyone can use and support the project, as the developers aim for it to be a tool for the improvement of the shopping experience.

It is a standalone PWA storefront designed to improve the shopping experience, with the ability to connect with any eCommerce backend (eg. Magento, Prestashop or Shopware) through the API. Also, it is purposed to be a great code base for every developer who needs to work on a front-end application for the eCommerce. So the developers have already created an API for Vue.js storefront with Magento2 (and not only) for backend data.

Important note from the developers: We are looking for Contributors and Designer willing to help us in the solution development. To become a contributor check the list of the active issues or contact the team directly via vuestorefront@divante.co.

Documentation

The docs about this project are not yet completed but the team is making great progress. You can see the parts which are done under the /doc folder here.

The business challenges

Vue Storefront was created to solve a set of key business challenges from the world of shopping experience. The goal of the team for the application is to provide the solution with:

  • The ultrafast front-end for the store - with the PWA approach the catalog of products can be rendered within milliseconds
  • The endurance for traffic overloads on the store
  • The off-line shopping capabilities
  • The smooth shopping experience close to the user experience from the native mobile applications
  • The all-in-one front-end for desktop and mobile screens with no necessity for maintaining 3 or more applications for different touchpoints (web browser, Android, iOS etc.).

Technologies

Vue Storefront was built as an all-in-one front-end for eCommerce. Vue.js was used as a front-end library based on its performance, Node.js & Express used as a server-API, Elastic Search as a database of products and full PWA/off-line support. Here you can read more about the proof of concept for Vue Storefront connected with Magento2.

Architecture

The team followed the architecture best described in the image below: Architecture diagram

Design

The application is prepared to be fully customized in design through theming system. In this project Material Icons are used, as well as H&M brand and products to make the product more realistic. The graphics and photos from the H&M concept visualization are not included, they are the exclusive property of the H&M fashion brand. Here you can read more about the process of designing PWA for eCommerce.

Install & Use

To make vue-storefront up and running you need to have the latest version of node (v8.3.0 used for development). You'll also need docker - or ElasticSearch + Redis installed on localhost instead. The steps below are tested on MacOS and Linux environments.

If you're on Windows please check Windows Installation Tutorial.

Install the vue-storefront-api

You need to use the vue-storefront-api, the API backend designed for this application.

git clone https://github.com/DivanteLtd/vue-storefront-api.git vue-storefront-api
cd vue-storefront-api
npm install
docker-compose up

To test out the application you'll need some test data. In vue-storefront-api/var/catalog.json you have data dump for ElasticSearch with default Magento2 products database. To import these products we'll use 'elasticdump' - which is provided by default with package.json dependencies and npm command:

npm run restore

Clone the image files for default product database (Magento2 example products dataset). Please execute the following command in the root folder of vue-storefront-api project:

git clone https://github.com/magento/magento2-sample-data.git var/magento2-sample-data

The last step is to configure the application:

mv src/config.example.json src/config.json
nano config.json

The config file is quite simple, but here you have some comments: Config file for vue-storefront.

After all these steps you should be able to run the application using following command (development mode with dynamic file reloads when changed):

npm run dev

You can check if everything works just fine by executing the following command:

curl -i http://vue-storefront.divante.pl/api/catalog/vue_storefront_catalog/product/_search?q=bag&size=50&from=0

Installing the vue-storefront

Now you can install the frontend:

git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront
cd vue-storefront
npm install

You have to prepare the config:

mv src/config.example.js src/config.js
nano config.js

And then you can build the app and run dev server:

npm run build
npm run dev

The default config file should work perfectly fine for default purposes.

Below are some screenshots of the storefront using fashion products.

storefront screenshots

storefront screenshots

storefront screenshots

The PWA Vue Storefront is open-source & hosted on GitHub under an MIT license.