items/docs/Walkthrough.md

@@ -7,10 +7,9 @@
 * [Triggers](#triggers)
 * [Steps](#steps)
     * [Replace hosts and user variables](#replace-hosts-and-user-variables)
-    * [Install frontend dependencies](#install-frontend-dependencies)
+    * [Install frontend dependencies and build it](#install-frontend-dependencies-and-build-it)
     * [Run the frontend](#run-the-frontend)
     * [Test frontend](#test-frontend)
-    * [Build frontend](#build-frontend)
     * [Check ansible syntax](#check-ansible-syntax)
     * [Apply ansible playbook](#apply-ansible-playbook)
         * [Playbook definition](#playbook-definition)
@@ -88,32 +87,42 @@ The following environment variables are injected using Drone secrets:
 Using `sed` makes temporary changes in the container/pod instead of commiting secrets in the repo in plain text. \
 The changes are never pushed and are discarded when the container/pod is terminated.
 
-### Install frontend dependencies
+### Install frontend dependencies and build it
 ```yml
-- name: install frontend dependencies
+- name: install dependencies and build frontend
   image: node:lts-alpine3.14
   commands:
     - node -v
     - npm -v
     - yarn --version
     - yarn --cwd ./items/frontend install
+    - yarn --cwd ./items/frontend build --pure-lockfile
+    - rm -rf ./items/api/public/static/*
+    - cp -r ./items/frontend/build/* ./items/api/public
+    - rm ./items/api/public/index.html
   depends_on:
     - replace hosts and user variables
 ```
+Executed on every push. \
+Since the PHP backend serves the ReactJS frontend, the former is built and moved in the latter.
+Notes:
+* `yarn --cwd <path> <command>` executes the command in the specified file
+* `rm -rf ./api/public/static/*` deletes the static files to make sure no old JavaScript files remain
+* `rm ./api/public/invdex.html` ReactJS is bundled with a `index.html`. It is discarded to use [](https://dev.sp-tarkov.com/Rev/spt-items-api/raw/branch/master/resources/views/app.blade.php) instead.
 
 ### Run the frontend
 ```yaml
 - name: frontend
-  image: node:lts-alpine3.14
+  image: nginx:1.21.4-alpine
   commands:
-    - node -v
-    - npm -v
-    - yarn --version
-    - yarn --cwd ./items/frontend start
+    - cp -r ./items/frontend/build/* /usr/share/nginx/html
+    - cp ./items/frontend/src/cypress/nginx_config/default.conf /etc/nginx/conf.d/default.conf
+    - nginx -g "daemon off;"
   detach: true
   depends_on:
-    - install frontend dependencies
+    - install dependencies and build frontend
 ```
+Copies the frontend and the nginx conf in the container to be able to test it.
 The frontend is run and `detach` is specified so the End-to-End tests (using cypress) can run on it
 
 ### Test frontend
@@ -124,32 +133,12 @@ The frontend is run and `detach` is specified so the End-to-End tests (using cyp
     - node -v
     - npm -v
     - yarn --version
-    - yarn --cwd ./items/frontend cy:run
+    - yarn --cwd ./items/frontend cy:ci
   depends_on:
-    - install frontend dependencies
+    - install dependencies and build frontend
 ```
 Run frontend tests using Cypress
 
-### Build frontend
-```yml
-- name: build frontend
-  image: node:lts-alpine3.14
-  commands:
-    - node -v
-    - npm -v
-    - yarn --version
-    - yarn --cwd ./items/frontend build --pure-lockfile
-    - rm -rf ./items/api/public/static/*
-    - mv ./items/frontend/build/* ./items/api/public
-    - rm ./items/api/public/index.html
-```
-Executed on every push. \
-Since the PHP backend serves the ReactJS frontend, the former is built and moved in the latter.
-Notes:
-    * `yarn --cwd <path> <command>` executes the command in the specified file
-    * `rm -rf ./api/public/static/*` deletes the static files to make sure no old JavaScript files remain
-    * `rm ./api/public/index.html` ReactJS is bundled with a `index.html`. It is discarded to use [](https://dev.sp-tarkov.com/Rev/spt-items-api/raw/branch/master/resources/views/app.blade.php) instead.
-
 ### Check ansible syntax
 ```yml
 - name: check ansible syntax
@@ -159,6 +148,9 @@ Notes:
     inventory: ./.ansible-items/inventory
     galaxy: ./.ansible-items/requirements.yml
     syntax_check: true
+  when:
+    branch:
+      - development
 ```
 Executed on every push. \
 Check the Ansible syntax in [playbook.yml](../../.ansible-items/playbook.yml), [inventory](../../.ansible-items/inventory) and [requirements.yml](../../.ansible-items/requirements.yml). The check is executed on every push since we want to detect any error before validating the build using the promotion.
@@ -184,6 +176,8 @@ Check the Ansible syntax in [playbook.yml](../../.ansible-items/playbook.yml), [
       from_secret: deploy_user_group
     SPT_ITEMS_PATH:
       from_secret: deploy_path
+  depends_on:
+    - test frontend
   when:
     branch:
       - master