Deploying GitLab pages for different branches

Question

I am deploying my React app using GitLab Pages, and it works well.

Here is my gitlab-ci.yml:

# Using the node alpine image to build the React app image: node:alpine  # Announce the URL as per CRA docs # https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration variables:   PUBLIC_URL: / # Cache node modules - speeds up future builds cache:   paths:   - client/node_modules  # Name the stages involved in the pipeline stages: - deploy  # Job name for gitlab to recognise this results in assets for Gitlab Pages # https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-requirements pages:   stage: deploy   script:     - cd client     - npm install # Install all dependencies     - npm run build --prod # Build for prod     - cp public/index.html public/404.html # Not necessary, but helps with https://medium.com/@pshrmn/demystifying-single-page-applications-3068d0555d46     - mv public _public # CRA and gitlab pages both use the public folder. Only do this in a build pipeline.     - mv build ../public # Move build files to public dir for Gitlab Pages   artifacts:     paths:     - public # The built files for Gitlab Pages to serve   only:     - master # Only run on master branch 

Now, I just created a dev version, based on my branch develop

I would like to have 2 versions of my React app with 2 different URLs. How can I do that?

For example right now, I have:

my-react-app.com linked to master branch

How should I have

dev.my-react-app.com or even my-react-app.gitlab.io linked to develop branch?

Answer 1

I've had success using the browsable artifacts for this purpose. In your example, you would create a job for your develop branch and set the PUBLIC_URL to the path on gitlab.io where the job's artifacts are published:

develop:     artifacts:         paths:           - public      environment:         name: Develop         url: "https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public/index.html"      script: |         # whatever      stage: deploy      variables:         PUBLIC_URL: "/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/public" 

Setting the environment as indicated produces a »Review app« link in relevant merge requests, allowing you to get to the artifacts with a single click.

Note: if your repository is in a subgroup, you need to insert the subgroup name in two places above above between /-/ and $CI_PROJECT_NAME for the resulting URLs to work.