Exercise 15 : Publish App

Introduction

You will learn to publish your applicatoin to https based servers with this exercerise.

a) student.labranet.jamk.fi

Publish one of your application to JAMK student.labranet.jamk.fi server OR you can use any other https based server.

Help

Watch course materials - Production Build video

b) gitlab.labranet.jamk.fi

Publish one of your application to JAMK gitlab.labranet.jamk.fi server. You should use GitLab CI Pipeline.

Create a new React project with CRA template

Give a following command

npx create-react-app gitlab-test-app

Make some modifications to your App.js

Modify your app UI to make it unique.

Modify your package.json

Modify your package.json to use homepage attribute (you don't have access JAMK/IT GitLab root).

{
  "name": "test",
  "homepage": "./",
  ...

The .gitlab-ci.yml file

You can use a following .gitlab-ci.yml file in your project. Basicly this will use JAMK/IT GitLab's CI/CD to build your React project and publish it in GitLab Pages.

Save the file to your project root folder.

Note

You might need to change a few things like a PUBLIC_PATH and your repository branch name

# GitLab .gitlab-ci.yml
# https://docs.gitlab.com/ee/ci/yaml/gitlab_ci_yaml.html
# https://docs.gitlab.com/ee/ci/yaml/index.html
# https://create-react-app.dev/docs/advanced-configuration/

image: node             # Use node image to build the React app
build:                  # Build CRA - Create React App
  stage: build          # Name the stages involved in the pipeline
  variables:            # CRA is hosted web server root
    PUBLIC_URL: /test   # Define subpath - MODIFY YOUR REPO NAME HERE
  script:               # Run npm's
    - npm install       # Install all dependencies
    - npm run build     # Build for production  
  tags:                 # List of tags that are used to select a runner
    - general
  artifacts:            # List of files and directories to attach to a job on success
    paths:              # The built files for Gitlab Pages to serve
      - build
pages:                  # Job name for gitlab to recognise this results in assets for Gitlab Pages
  stage: deploy         # Name the stages involved in the pipeline
  dependencies:         # Restrict which artifacts passed to a specific job 
    - build
  script:
    - rm -rf public     # CRA and gitlab pages both use the public folder
    - mv build public   # Move build files to public dir for Gitlab Pages  
  tags:                 # List of tags that are used to select a runner
    - general  
  artifacts:            # List of files and directories to attach to a job on success
    paths:              # The built files for Gitlab Pages to serve      
      - public   
  only:                 # SPECIFY YOUR BRACH HERE, usually master or main    
    - main

Repository

Create a new empty repository to JAMK/IT GitLab.

Push

Look your repository and find a commands to Push an existing folder. Give/copy-paste a those commands to push your local repository to your JAMK/IT GitLab repository.

CI/CD Jobs

Try to be fast and select CD/CD > Jobs page from your JAMK/IT GitLab repository (and click a blue running button). You should see that runners are working to build your project and publish it to JAMK/IT GitLab Pages.

Pages Settings

Select Settings > Pages from your JAMK/IT repository and you should see a link to your pages.

Show Pages

Copy and paste your pages link to your browser and you should see your React app running.

Update

Make some modifications to your App.js and push your files to JAMK/IT GitLab. Wait a while and refresh your React app in your web browser and you should see a new version of it.

YES - a new version of your app is deployed automatically now with CI/CD.

Push exercise 15 / Publish App

Test your applications in web browser, take screenshots and commit/push your project and screenshots back to JAMKIT/GitLab. Remember move your exercise/issue ticket from Doing to In Review in Issues Board and write your learning comments to issue comments.

Save screenshots to publish-student folder.