Installing Vue-storefront

Vue-storefront is a headless and backend agnostic e-commerce PWA (Progressive Web App). The best part in this is Offline mode, as it managed to do this by making extensive use of the browser cache.

These are few prerequsites for installation of Vue-storefront on Linux.
1.Docker
2.Node.js > 10
3.Yarn > 1.0.0

Run the following command to install the current stable version of docker-compose.

sudo curl -L "https://github.com/docker/compose/releases/download/1.25.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Then run the following command to apply executable permissions to the binary.

sudo chmod +x /usr/local/bin/docker-compose

To test the installation run the command docker-compose –version

I already have node.js in my system, so I checked the version (>10) suitable for the storefront. Then I installed the yarn which is also >1.0.0.

We have two ways to install the storefront.

1. User-friendly installation
2. Manual installation

User-friendly installation

First, we need to clone the vue-storefront end in a separate directory.

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

Then go to cd vue-storefront and run the following commands:

yarn
yarn installer

It will take little time to complete the installation, and in the last step, a question will be asked –

If the selected answer is 

=> Yes – we will have a remote backend at https://demo.vuestorefront.io otherwise, we need to install vue-storefront-api manually. And the next question I am getting is

Question – ? Please provide path for images endpoint (https://demo.vuestorefront.io/img/)
Answer – https://demo.vuestorefront.io/img/

and here I got the success message 🙂

Now, you will have access to the vue-storefront folder inside your project. Also, the application is running on the port http://localhost:3000.

Now, if a selected answer is

=> No – Here is the list of questions we get

and after this I got the error Can’t install backend npm

To resolve this error go to the following path

vue-storefront/core/scripts/installer.js 

and fix the line 179 yarn install >> ${Abstract.infoLogStream} 2>&1).code !== 0 in place of npm i >> ${Abstract.infoLogStream} 2>&1).code !== 0
after solving the above error, I repeat the answer No.

Now, I got the error Can’t start Docker in background.

To resolve this error edit the line 196 in path

vue-storefront/core/scripts/installer.js

Inside if condition sudo docker-compose up -d and delete the vue-storefront-api folder. Again start from answer No. Now it’s running correctly, and it will take some time to install it successfully.

Now you can check inside your project folder there are two folders.  vue-storefront-api and vue-storefront

Manual Installation

This process installs vue-storefront and vue-storefront-api manually.

I made a folder store so that I can install everything inside it.

Install vue-storefront-api.
First, we need to clone the vue-storefront-api repo with the following command.

git clone https://github.com/DivanteLtd/vue-storefront-api.git vue-storefront-api

Then cd vue-storefront-api
and here we have two modes –

1.legacy mode – Starting with the elastic (private and secure container which makes easy to store and manage docker images) and Redis (key value, which allows data to be store in high speed) container.
It is not needed to install manually by this method. This is optional if you have an older version. For the installation of all dependencies via legacy mode, you can refer Link .
2. Standard mode – starting with Elastic, Redis and Vue Storefront API containers

I would prefer standard mode.

For Standard mode first, we need

1. run –

sudo docker-compose -f docker-compose.yml -f docker-compose.nodejs.yml up -d

As a result, all necessary services will be launched such as
1.Vue Storefront API runtime environment
2.ElasticSearch
3.Redis
4.Kibana (optional to use)

To import these products, we’ll use elasticdump,which is provided by default with package.json dependencies and yarn command. Then, we need to update the structures in the database to the latest version

2.

docker exec -it vue-storefront-api_app_1 yarn restore

Though, this permission error can be removed by running the same command with sudo and command works 🙂

sudo docker exec -it vue-storefront-api_app_1 yarn migrate<br><br>

3. To clone the product images for default product database.

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

and to check if everything is working fine, run command

curl -i http://localhost:8080/api/catalog/vue_storefront_catalog/product/_search?q=bag&size=50&from=0

then your app is already running on localhost:8080.

Now we need Installation of Vue-storefront for this, we need to go to the root folder, and run the following command.

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

cd vue-storefront

We need to prepare a config file (optional)
cp config/default.json config/local.json
nano config/local.json
Though default file will work fine for my default purpose. So, I am not using above command.
To install the dependencies:

sudo docker-compose up

Here, vue-storefront is setup successfully, and front-end is running, we can check it on localhost:3000.