<commit_before># Ch 3. Starter pack for new comers (Install)
<style>
    img[alt*="borderline"] {
        border: 1px #000 solid;
    }
</style>

In this chapter, we will cover :

[[toc]]


## 0. Introduction
Now you are definitely interested in **Vue Storefront**. That's why you are here. You've come across the line. You made a choice. You will have something in return, which is great. Be it developers, entrepreneurs or even marketing managers that they may want to try something new for better products in hopes of enhancing their clients or customers' experience. You chose the right path. We will explore anything you need to get you started at all with [**Vue Storefront** infrastructure](https://github.com/DivanteLtd).

## 1. Install with Docker
Docker has been arguably the most sought-after, brought to the market which took the community by storm ever since its introduction. Although it's yet controversial whether it's the best choice among its peers, I have never seen such an unanimous enthusiasm over one tech product throughout the whole developers community.

Then, why so? In modern computer engineering, products are so complex with an endless list of dependencies intertwined with each other. Building such dependencies in place for every occasion where it's required is one hell of a job, not to mention glitches from all the version variation. That's where Docker steps in to make you achieve **infrastructure automation**. This concept was conceived to help you focus on your business logic rather than having you stuck with hassles of lower level tinkering.

Luckily, we already have been through all this for you, got our hands dirty. All you need is run a set of docker commands to get you up and running from scratch. Without further ado, let's get started!

:::tip UPDATE
From VSF `1.12` on, 
  1. `CLI` is the main method to install _Vue Storefront_ infrastructure. (which is easier, hassle-free, and intuitive)
  2. Bleeding-edge `vsf-capybara` is default theme while original `default` theme remains to be chosen at your discretion. 
:::

### 1. Preparation
- You need [`docker`](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-18-04) and [`docker-compose`](https://www.digitalocean.com/community/tutorials/how-to-install-docker-compose-on-ubuntu-18-04) installed.

- You need [`git`](https://www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-18-04) installed.

:::tip NOTE
We will walk you with docker on *Linux*. (Specifically *Ubuntu 18.04* if needed)

There is only one bias for Docker before using it; *Run it on Linux*. Docker is native Linux, was created using a Linux technology; LXC (linux container) in the first place. Even though there were many attempts made to make it available to other platforms as it does on Linux, and it has definitely been on a progress, however, using Docker on Linux is the solidest way to deal with the technology.

That being sad, there are tips for using other platforms for docker at [Chef's Secrets](#_4-chef-s-secret-protip) as well.
:::

### 2. Recipe
1. First, start with backend, download [**Vue Storefront API**](https://github.com/DivanteLtd/vue-storefront-api) from github.
```bash
git clone https://github.com/DivanteLtd/vue-storefront-api.git vue-storefront-api
cd vue-storefront-api
```

2. Copy `./config/default.json` to `./config/local.json`
```bash
cp config/default.json config/local.json
```
Then edit `local.json` to your need.
We will look into this in greater detail at [Chef's secret](#_4-chef-s-secret-protip)
:::tip TIP
This step can be skipped if you are OK with values of `default.json` since it follows the [files load order](https://github.com/lorenwest/node-config/wiki/Configuration-Files#file-load-order) of [node-config](https://github.com/lorenwest/node-config)

:::

3. Run the following Docker command :
```bash
docker-compose -f docker-compose.yml -f docker-compose.nodejs.yml up -d
```

Then the result would look something like this :
```bash
Building app
Step 1/8 : FROM node:10-alpine
 ---> 9dfa73010b19
Step 2/8 : ENV VS_ENV prod
 ---> Using cache
 ---> 4d0a83421665
Step 3/8 : WORKDIR /var/www
 ---> Using cache
 ---> e3871c8db7f3
Step 4/8 : RUN apk add --no-cache curl git
 ---> Using cache
 ---> 49e996f0f6cb
Step 5/8 : COPY package.json ./
 ---> 14ed18d76efc
Step 6/8 : RUN apk add --no-cache --virtual .build-deps ca-certificates wget &&     yarn install --no-cache &&     apk del .build-deps
 ---> Running in 3d6f91acc2fe
fetch http://dl-cdn.alpinelinux.org/alpine/v3.9/main/x86_64/APKINDEX.tar.gz
fetch http://dl-cdn.alpinelinux.org/alpine/v3.9/community/x86_64/APKINDEX.tar.gz
(1/2) Installing wget (1.20.3-r0)
(2/2) Installing .build-deps (0)
Executing busybox-1.29.3-r10.trigger
OK: 22 MiB in 26 packages
yarn install v1.16.0
info No lockfile found.
[1/4] Resolving packages...
warning @babel/node > @babel/polyfill@7.4.4: 🚨 As of Babel 7.4.0, this
package has been deprecated in favor of directly
including core-js/stable (to polyfill ECMAScript
features) and regenerator-runtime/runtime
(needed to use transpiled generator functions):

  > import "core-js/stable";
  > import "regenerator-runtime/runtime";
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
[2/4] Fetching packages...

# ... abridged


```
:vhs: You may also watch it in [bash playback :movie_camera:](https://asciinema.org/a/7XT5CWP4ynrPItattiP3on6wS)

:::tip TIP
`-f` flag allows you to use the following docker-compose file. Without this flag, it will use the default file that is `docker-compose.yml`

`-d` flag allows you to run the command in `detach mode` which means *running background*.
:::
3. In order to verify, run `docker ps` to show which containers are up
```bash
docker ps
```

Then,
```bash
CONTAINER ID        IMAGE                     COMMAND                  CREATED             STATUS              PORTS                                            NAMES
53a47d5a6440        vuestorefrontapi_kibana   "/bin/bash /usr/loca…"   31 seconds ago      Up 29 seconds       0.0.0.0:5601->5601/tcp                           vuestorefrontapi_kibana_1
7d8f6328601b        vuestorefrontapi_app      "docker-entrypoint.s…"   31 seconds ago      Up 27 seconds       0.0.0.0:8080->8080/tcp                           vuestorefrontapi_app_1
165ae945dbe5        vuestorefrontapi_es1      "/bin/bash bin/es-do…"   8 days ago          Up 30 seconds       0.0.0.0:9200->9200/tcp, 0.0.0.0:9300->9300/tcp   elasticsearch
8dd144746cef        redis:4-alpine            "docker-entrypoint.s…"   11 days ago         Up 31 seconds       0.0.0.0:6379->6379/tcp                           vuestorefrontapi_redis_1
```
The ports number will be used later in the frontend configuration. In fact, they are already set in as default values.

You will see 4 containers are running, which is :
| Container              |          Port       |
|------------------------|---------------------|
| Vue Storefront API app | :8080               |
| Elasticsearch          | :9200               |
| Kibana                 | :5601               |
| Redis                  | :6379               |


4. Now that backend part is done, let's work on frontend part, install `@vue-storefront/cli`
```bash
yarn add global @vue-storefront/cli 
```

5. Run the `init` command in a directory where you want to install _Vue Storefront_ as follows : 
```bash
vsf init vue-storefront # [vue-storefront] is the directory where the app is going to be installed. 
```

6. Choose your target version from below (Picked _Stable versions_ in this recipe) :

```bash
dex@ubuntu:~/code$ vsf init vue-storefront
  ✔ Check avalilable versions
? Which version of Vue Storefront you'd like to install? (Use arrow keys)
❯ Stable versions (recommended for production) 
  Release Candidates 
  In development branches (could be unstable!) 
```

7. Then pick `1.12` version for the install from below : 
```bash
  ✔ Check avalilable versions
? Which version of Vue Storefront you'd like to install? Stable versions (recommended for production)
? Select specific version (Use arrow keys)<commit_msg>Use yarn global instead of yarn add for installing CLI tool global<commit_after># Ch 3. Starter pack for new comers (Install)
<style>
    img[alt*="borderline"] {
        border: 1px #000 solid;
    }
</style>

In this chapter, we will cover :

[[toc]]


## 0. Introduction
Now you are definitely interested in **Vue Storefront**. That's why you are here. You've come across the line. You made a choice. You will have something in return, which is great. Be it developers, entrepreneurs or even marketing managers that they may want to try something new for better products in hopes of enhancing their clients or customers' experience. You chose the right path. We will explore anything you need to get you started at all with [**Vue Storefront** infrastructure](https://github.com/DivanteLtd).

## 1. Install with Docker
Docker has been arguably the most sought-after, brought to the market which took the community by storm ever since its introduction. Although it's yet controversial whether it's the best choice among its peers, I have never seen such an unanimous enthusiasm over one tech product throughout the whole developers community.

Then, why so? In modern computer engineering, products are so complex with an endless list of dependencies intertwined with each other. Building such dependencies in place for every occasion where it's required is one hell of a job, not to mention glitches from all the version variation. That's where Docker steps in to make you achieve **infrastructure automation**. This concept was conceived to help you focus on your business logic rather than having you stuck with hassles of lower level tinkering.

Luckily, we already have been through all this for you, got our hands dirty. All you need is run a set of docker commands to get you up and running from scratch. Without further ado, let's get started!

:::tip UPDATE
From VSF `1.12` on, 
  1. `CLI` is the main method to install _Vue Storefront_ infrastructure. (which is easier, hassle-free, and intuitive)
  2. Bleeding-edge `vsf-capybara` is default theme while original `default` theme remains to be chosen at your discretion. 
:::

### 1. Preparation
- You need [`docker`](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-18-04) and [`docker-compose`](https://www.digitalocean.com/community/tutorials/how-to-install-docker-compose-on-ubuntu-18-04) installed.

- You need [`git`](https://www.digitalocean.com/community/tutorials/how-to-install-git-on-ubuntu-18-04) installed.

:::tip NOTE
We will walk you with docker on *Linux*. (Specifically *Ubuntu 18.04* if needed)

There is only one bias for Docker before using it; *Run it on Linux*. Docker is native Linux, was created using a Linux technology; LXC (linux container) in the first place. Even though there were many attempts made to make it available to other platforms as it does on Linux, and it has definitely been on a progress, however, using Docker on Linux is the solidest way to deal with the technology.

That being sad, there are tips for using other platforms for docker at [Chef's Secrets](#_4-chef-s-secret-protip) as well.
:::

### 2. Recipe
1. First, start with backend, download [**Vue Storefront API**](https://github.com/DivanteLtd/vue-storefront-api) from github.
```bash
git clone https://github.com/DivanteLtd/vue-storefront-api.git vue-storefront-api
cd vue-storefront-api
```

2. Copy `./config/default.json` to `./config/local.json`
```bash
cp config/default.json config/local.json
```
Then edit `local.json` to your need.
We will look into this in greater detail at [Chef's secret](#_4-chef-s-secret-protip)
:::tip TIP
This step can be skipped if you are OK with values of `default.json` since it follows the [files load order](https://github.com/lorenwest/node-config/wiki/Configuration-Files#file-load-order) of [node-config](https://github.com/lorenwest/node-config)

:::

3. Run the following Docker command :
```bash
docker-compose -f docker-compose.yml -f docker-compose.nodejs.yml up -d
```

Then the result would look something like this :
```bash
Building app
Step 1/8 : FROM node:10-alpine
 ---> 9dfa73010b19
Step 2/8 : ENV VS_ENV prod
 ---> Using cache
 ---> 4d0a83421665
Step 3/8 : WORKDIR /var/www
 ---> Using cache
 ---> e3871c8db7f3
Step 4/8 : RUN apk add --no-cache curl git
 ---> Using cache
 ---> 49e996f0f6cb
Step 5/8 : COPY package.json ./
 ---> 14ed18d76efc
Step 6/8 : RUN apk add --no-cache --virtual .build-deps ca-certificates wget &&     yarn install --no-cache &&     apk del .build-deps
 ---> Running in 3d6f91acc2fe
fetch http://dl-cdn.alpinelinux.org/alpine/v3.9/main/x86_64/APKINDEX.tar.gz
fetch http://dl-cdn.alpinelinux.org/alpine/v3.9/community/x86_64/APKINDEX.tar.gz
(1/2) Installing wget (1.20.3-r0)
(2/2) Installing .build-deps (0)
Executing busybox-1.29.3-r10.trigger
OK: 22 MiB in 26 packages
yarn install v1.16.0
info No lockfile found.
[1/4] Resolving packages...
warning @babel/node > @babel/polyfill@7.4.4: 🚨 As of Babel 7.4.0, this
package has been deprecated in favor of directly
including core-js/stable (to polyfill ECMAScript
features) and regenerator-runtime/runtime
(needed to use transpiled generator functions):

  > import "core-js/stable";
  > import "regenerator-runtime/runtime";
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
[2/4] Fetching packages...

# ... abridged


```
:vhs: You may also watch it in [bash playback :movie_camera:](https://asciinema.org/a/7XT5CWP4ynrPItattiP3on6wS)

:::tip TIP
`-f` flag allows you to use the following docker-compose file. Without this flag, it will use the default file that is `docker-compose.yml`

`-d` flag allows you to run the command in `detach mode` which means *running background*.
:::
3. In order to verify, run `docker ps` to show which containers are up
```bash
docker ps
```

Then,
```bash
CONTAINER ID        IMAGE                     COMMAND                  CREATED             STATUS              PORTS                                            NAMES
53a47d5a6440        vuestorefrontapi_kibana   "/bin/bash /usr/loca…"   31 seconds ago      Up 29 seconds       0.0.0.0:5601->5601/tcp                           vuestorefrontapi_kibana_1
7d8f6328601b        vuestorefrontapi_app      "docker-entrypoint.s…"   31 seconds ago      Up 27 seconds       0.0.0.0:8080->8080/tcp                           vuestorefrontapi_app_1
165ae945dbe5        vuestorefrontapi_es1      "/bin/bash bin/es-do…"   8 days ago          Up 30 seconds       0.0.0.0:9200->9200/tcp, 0.0.0.0:9300->9300/tcp   elasticsearch
8dd144746cef        redis:4-alpine            "docker-entrypoint.s…"   11 days ago         Up 31 seconds       0.0.0.0:6379->6379/tcp                           vuestorefrontapi_redis_1
```
The ports number will be used later in the frontend configuration. In fact, they are already set in as default values.

You will see 4 containers are running, which is :
| Container              |          Port       |
|------------------------|---------------------|
| Vue Storefront API app | :8080               |
| Elasticsearch          | :9200               |
| Kibana                 | :5601               |
| Redis                  | :6379               |


4. Now that backend part is done, let's work on frontend part, install `@vue-storefront/cli`
```bash
yarn global add @vue-storefront/cli 
```

5. Run the `init` command in a directory where you want to install _Vue Storefront_ as follows : 
```bash
vsf init vue-storefront # [vue-storefront] is the directory where the app is going to be installed. 
```

6. Choose your target version from below (Picked _Stable versions_ in this recipe) :

```bash
dex@ubuntu:~/code$ vsf init vue-storefront
  ✔ Check avalilable versions
? Which version of Vue Storefront you'd like to install? (Use arrow keys)
❯ Stable versions (recommended for production) 
  Release Candidates 
  In development branches (could be unstable!) 
```

7. Then pick `1.12` version for the install from below : 
```bash
  ✔ Check avalilable versions
? Which version of Vue Storefront you'd like to install? Stable versions (recommended for production)
? Select specific version (Use arrow keys)
{'fraction_non_alphanumeric': 0.1015772486450277, 'fraction_numerical': 0.03446805919249741, 'mean_word_length': 3.170137125444388, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 47, 'https://': 18, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 10, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2985042', 'n_tokens_mistral': 5436, 'n_tokens_neox': 4880, 'n_words': 1946}