GitLab CI to deploy CRA with react router

.gitlab-ci.yml

workflow:
  rules:
    - if: $CI_COMMIT_BRANCH == "main"

image: node

pages:
  variables:
    # Replace this variable with your own path. Just copy everything right behind the domain gitlab.io. Don't forget to add
    # the slash at the beginnig.
    PUBLIC_URL: "/url-segment/after-the-gitlabio-domain/"
  script:
    - npm install
    - npm run build
    # Delete public forlder in CI pipeline, otherwise `mv` command below will move the build folder into the public folder
    - rm -rf public
    # You need this to ensure you app works if the user visit some subpage directly, otherwise they will get 404
    - cp build/index.html build/404.html
    # Gitlab pages takes assets from public folder only, so we need to rename `build` to `public`. 
    - mv build public
  artifacts:
    paths:
      - public

Readme.md

How to use it

1. Copy paste the yaml file to your gitlab repo
2. Change the url in PUBLIC_URL
3. Go to your file where you use <BrowserRouter> (usually index.js or App.js) and add basename prop to the router:

<BrowserRouter basename={process.env.PUBLIC_URL}>

4. After deployment got to your pages url and enjoy working app.