diff --git a/.drone-docker.yml b/.drone-docker.yml index 728c7a1..130dc28 100644 --- a/.drone-docker.yml +++ b/.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 - - 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 - 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 - - - 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 + - install dependencies and build frontend - 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 - - build frontend + - test frontend when: branch: - master diff --git a/.drone-kubernetes.yml b/.drone-kubernetes.yml index a9239a1..f0c8d9d 100644 --- a/.drone-kubernetes.yml +++ b/.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 - - 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 - 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 - - - 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 + - install dependencies and build frontend - 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 - - build frontend + - test frontend when: branch: - master diff --git a/items/docs/Walkthrough.md b/items/docs/Walkthrough.md index 4ec88bc..b3e9094 100644 --- a/items/docs/Walkthrough.md +++ b/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 ` 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 ` 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 diff --git a/items/frontend/package.json b/items/frontend/package.json index 460cf14..ce25159 100644 --- a/items/frontend/package.json +++ b/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": { diff --git a/items/frontend/public/favicon.ico b/items/frontend/public/favicon.ico index 66862a5..3ff7990 100644 Binary files a/items/frontend/public/favicon.ico and b/items/frontend/public/favicon.ico differ diff --git a/items/frontend/public/favicon.svg b/items/frontend/public/favicon.svg index e7ee889..a7f33e5 100644 --- a/items/frontend/public/favicon.svg +++ b/items/frontend/public/favicon.svg @@ -1,109 +1,5 @@ - - - - - - - - - - - - - - - - - - + + + + diff --git a/items/frontend/src/cypress/nginx_config/default.conf b/items/frontend/src/cypress/nginx_config/default.conf new file mode 100644 index 0000000..40b9650 --- /dev/null +++ b/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; + } +}