minedun6 / vue-storefront

Vue.js Storefront - PWA for eCommerce. 100% offline, platform agnostic, Magento2 supported. Always Open Source, MIT license. Join us as contributor (contributors@divante.co).

Home Page:https://join.slack.com/t/vuestorefront/shared_invite/enQtMjUyMzA1NDM1ODg4LTYzZjljNjZlN2JmMmM4NzQzOWFkOTA5NTMyOTg0NzIwNjMxNTNjYTZhNzAzOWM5MjEyYzE2OWE3ZTJmOTU3OTY

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue Storefront - PWA for eCommerce

Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Prestashop or Shopware) through the API.

Vue Storefront is and always will be in the open source. Anyone can use and support the project, we want it to be a tool for the improvement of the shopping experience. The project is still in the prove of concept phase. We are looking for Contributors and Designer willing to help us in the solution development.

Join the community on Slack

If you have any questions or ideas feel free to join our slack: https://vuestorefront.slack.com
You can request joining the slack channel by clicking here

The business challenges

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

  • The ultrafast front-end for the store - with the PWA approach we can now render the catalog of products 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.).

The technology

Vue Storefront was build as a all-in-one front-end for eCommerce. For providing the best performance we decided to use Vue.js as a front-end library, Node.js + Express (and maybe GraphQL support) 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.

Besides a big improvement for the shopping experience, we also want to create a great code base for every developer who needs to work on a front-end application for the eCommerce.

The architecture

Architecture diagram

The design

The application is prepared to be fully customized in design through theming system. With the current version we work on raw, basic template of typical eCommerce for a fashion industry. In the project we used Material Icons.

To make the prototype more realistic we used H&M brand and products in our concept design. The graphics and photos from the H&M concept visualisation are not included, they are the exclusive property of the H&M fashion brand.

1

Here you can read more about the process of designing PWA for eCommerce.

The license

Vue Storefront source code is completely free and released under the MIT License.

Contributing

If you like the idea behind Vue Storefront and want to become a contributor - do not hesitate and check our list of the active issues or contact us directly via vuestorefront@divante.co.

Installation

To make vue-storefront up and runing 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

Let's go:

Install the vue-storefront-api

You need to use https://github.com/DivanteLtd/vue-storefront-api. It's the ultimate API backend 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. We're using for development purposes.

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 (we're using Magento2 example products dataset: https://github.com/magento/magento2-sample-data). 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

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

Install the vue-storefront

You need to use https://github.com/DivanteLtd/vue-storefront. Now, it's the time to install the frontend itself:

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 app and run dev server:

npm run build
npm run dev

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

The screenshots

2

3

4

Documentation

The documentation is always THE HARDEST PART of each open source project! But we're trying hard. Please find out what we've already managed to prepare under /doc folder: https://github.com/DivanteLtd/vue-storefront/tree/master/doc

About

Vue.js Storefront - PWA for eCommerce. 100% offline, platform agnostic, Magento2 supported. Always Open Source, MIT license. Join us as contributor (contributors@divante.co).

https://join.slack.com/t/vuestorefront/shared_invite/enQtMjUyMzA1NDM1ODg4LTYzZjljNjZlN2JmMmM4NzQzOWFkOTA5NTMyOTg0NzIwNjMxNTNjYTZhNzAzOWM5MjEyYzE2OWE3ZTJmOTU3OTY

License:MIT License


Languages

Language:JavaScript 49.1%Language:Vue 44.3%Language:CSS 5.6%Language:HTML 1.0%