Notes on how to deploy React app on GitLab pages using CI/CD feature

Infrastructure as Code & Cloud Native
,
1

GitLab Pages Deployment

This is a documentation for deployment of a React app on GitLab Pages.
The following files are added/modified:

.gitlab-ci.yml

A file named ".gitlab-ci.yml" should be added to the repository root directory.
The file should note the environment and contain scripts to build and deploy the React app.
Specifically, after running, it should move the build folder contents into /public directory for page deployment.

Note that the React app is located at ./front/ui/.

Documented file contents for a project Iā€™m working on:

image: node:10
 
cache:
  paths:
    - ./front/ui/node_modules/
 
before_script:
  - cd ./front/ui    # enter the React app directory
  - rm -rf build     # remove the existing build
  - CI=false npm install     # install required packages
 
pages:
  stage: deploy
  environment: Production
  script:
    - CI=false npm run build     # build the React app, set CI=false because CI=true treats all warnings as errors
    - cp build/index.html build/404.html     # reroute to index
    - ls
    - cd ..
    - cd ..      # return to project root directory
    - mkdir public       # make public directory in root for deployment due to artifact path only allowing /public
    - ls
    - mv ./front/ui/build/* public       # move build contents to new /public directory
    - export
  artifacts:
    paths:
      - public       # only allow paths in project root directory for some reason
  only:
    refs:
      - master       # deploy contents in master branch

package.json

Additionally, the following line was added to package.json in the React app directory:

  "homepage": "https://<insert username>.gitlab.io/<insert project name>/"

Upon specification of the exact homepage URL hosted at GitLab.io, the React app was successfully deployed and displayed.
Link to the deployed Pages can be found under GitLab ā†’ Settings ā†’ Pages.

This is the end of this documentation.

1 Like