title: Deploying GitLab pages for different branches
body: <p>I am deploying my React app using GitLab Pages, and it works well.</p>
  <p>Here is my <code>gitlab-ci.yml</code>:</p>
  <pre class="lang-yaml prettyprint-override"><code># 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
  </code></pre>
  <p>Now, I just created a dev version, based on my branch <code>develop</code></p>
  <p>I would like to have 2 versions of my React app with 2 different URLs. How can I do that?</p>
  <p>For example right now, I have:</p>
  <p><code>my-react-app.com</code> linked to <code>master</code> branch</p>
  <p>How should I have</p>
  <p><code>dev.my-react-app.com</code> or even <code>my-react-app.gitlab.io</code> linked to <code>develop</code> branch?&lt;</p>