GitLab Pages Deployment
This is a documentation for deployment of a React app on GitLab Pages.
The following files are added/modified:
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
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
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.