CI/CD for React JS with Gitlab

gitlab | runner | ci/cd laravel | ci/cd react | sast

Introduction

note we could build on the runner but we are here building on the server for the time being. in that case you would omit --exclude /build/ for those to be pushed to the server.

here assuming master as development branch.

Setup

on the target server, prepare and maintain permissions for React JS altogether.

on the gitlab server, you need to have a runner available that can talk to the destination server.

on the repository, you need to have a ci/cd script with the following content (sample).

#
# react js
#
# no --filter=':- .gitignore hence need to exclude here manually
# show only errors with npm ci and build
#

Deploy to machine-name:
  stage: deploy
  variables:
    host_path: "/data/www/validate-react"
  script:
    - current_pwd=`pwd`
    - echo host_path is $host_path
    - echo "$ENV_FILE_DEV" > .env # contains passwords
    - ls -lhF .env && wc -l .env && md5sum .env
    - rsync -a --omit-dir-times --delete --exclude '.git*' --exclude /node_modules/ --exclude /build/ $current_pwd/ runner@machine-name:$host_path/
    - ssh runner@machine-name "cd $host_path/ && ls -lhF .env && wc -l .env && md5sum .env"
    - ssh runner@machine-name ls -alhF $host_path/
    - ssh runner@machine-name "which node && node --version"
    - ssh runner@machine-name "which npm && npm --version"
    - ssh runner@machine-name "cd $host_path/ && time nice npm ci >/dev/null && time nice npm run build >/dev/null && echo OK"
    - ssh runner@machine-name ls -alhF $host_path/
  only:
    - master
  tags:
    - runner1

Resources

https://www.geeksforgeeks.org/difference-between-package-json-and-package-lock-json-files/

rsync options

https://stackoverflow.com/questions/57340112/what-are-the-best-gitlab-ci-yml-ci-cd-practices-and-runners-configs

https://briangreunke.com/blog/gitlab-continuous-delivery-tutorial/

https://gist.github.com/mcarpenterjr/9d927cb66562466180f37e1b27feb4cf

.cache

https://jongleberry.medium.com/speed-up-your-ci-and-dx-with-node-modules-cache-ac8df82b7bb0

https://stackoverflow.com/questions/60773154/is-safe-to-delete-cache-folder-in-node-modules


HOME | GUIDES | LECTURES | LAB | SMTP HEALTH | HTML5 | CONTACT
Copyright © 2024 Pierre-Philipp Braun