Merge pull request 'Merge development into master' (#28) from development into master

Reviewed-on: SPT-AKI/Website#28

.drone-docker.yml

@@ -31,26 +31,29 @@ steps:
       - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory
       - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory
 
-  - 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
 
   - name: frontend
-    image: node:lts-alpine3.14
+    image: nginx:1.21.4-alpine
     commands:
-      - node -v
+      - cp -r ./items/frontend/build/* /usr/share/nginx/html
-      - npm -v
+      - cp ./items/frontend/src/cypress/nginx_config/default.conf /etc/nginx/conf.d/default.conf
-      - yarn --version
+      - nginx -g "daemon off;"
-      - yarn --cwd ./items/frontend start
     detach: true
     depends_on:
-      - install frontend dependencies
+      - install dependencies and build frontend
 
   - name: test frontend
     image: cypress/browsers:node16.5.0-chrome94-ff93
@@ -58,27 +61,9 @@ steps:
       - 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
-
-  - 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
-    depends_on:
-      - test frontend
-    when:
-      branch:
-        - main
-        - master
-        - development
 
   - name: check ansible syntax
     image: plugins/ansible:3
@@ -111,8 +96,7 @@ steps:
       SPT_ITEMS_PATH:
         from_secret: deploy_path
     depends_on:
-      - check ansible syntax
+      - test frontend
-      - build frontend
     when:
       branch:
         - master

.drone-kubernetes.yml

@@ -31,26 +31,29 @@ steps:
       - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory
       - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory
 
-  - 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
 
   - name: frontend
-    image: node:lts-alpine3.14
+    image: nginx:1.21.4-alpine
     commands:
-      - node -v
+      - cp -r ./items/frontend/build/* /usr/share/nginx/html
-      - npm -v
+      - cp ./items/frontend/src/cypress/nginx_config/default.conf /etc/nginx/conf.d/default.conf
-      - yarn --version
+      - nginx -g "daemon off;"
-      - yarn --cwd ./items/frontend start
     detach: true
     depends_on:
-      - install frontend dependencies
+      - install dependencies and build frontend
 
   - name: test frontend
     image: cypress/browsers:node16.5.0-chrome94-ff93
@@ -58,27 +61,9 @@ steps:
       - 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
-
-  - 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
-    depends_on:
-      - test frontend
-    when:
-      branch:
-        - main
-        - master
-        - development
 
   - name: check ansible syntax
     image: plugins/ansible:3
@@ -111,8 +96,7 @@ steps:
       SPT_ITEMS_PATH:
         from_secret: deploy_path
     depends_on:
-      - check ansible syntax
+      - test frontend
-      - build frontend
     when:
       branch:
         - master

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
+    - cp -r ./items/frontend/build/* /usr/share/nginx/html
-    - npm -v
+    - cp ./items/frontend/src/cypress/nginx_config/default.conf /etc/nginx/conf.d/default.conf
-    - yarn --version
+    - nginx -g "daemon off;"
-    - yarn --cwd ./items/frontend start
   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

items/frontend/package.json

@@ -41,9 +41,9 @@
         "cy:start:wait": "start-server-and-test cy:start:app http://localhost:3000",
         "cy:install": "cypress install",
         "cy:verify": "cypress verify",
-        "cy:run:ci": "cross-env CYPRESS_BASE_URL=http://frontend:3000 cypress run --browser chrome",
+        "cy:run:ci": "cross-env CYPRESS_BASE_URL=http://frontend cypress run --browser chrome",
         "cy:open": "yarn run cy:start:wait -- \"cypress open\"",
-        "cy:run": "yarn run wait-on http-get://frontend:3000 && yarn run cy:install && yarn run cy:verify && yarn run cy:run:ci",
+        "cy:ci": "yarn run wait-on http-get://frontend && yarn run cy:install && yarn run cy:verify && yarn run cy:run:ci",
         "eject": "react-scripts eject"
     },
     "eslintConfig": {

items/frontend/src/cypress/nginx_config/default.conf

@@ -0,0 +1,15 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}