GitLab Pipeline and React

GitLab for React

Make sure you are using same node image in the pipeline and Dockerfiles

optimised .gitlab-ci.yml using artifacts

stages:
  - build
  - test
  - push

image:
  name: node:16-alpine
  entrypoint: [""]

build_r:
  stage: build
  artifacts:
    paths:
      - node_modules/
      - package.json
      - package-lock.json
    expire_in: 1 day
  before_script:
    - apk -U upgrade
  script:
    - node -v
    - ls -lA
    - npm install
    - ls -lA
  only:
    - main

test_r:
  stage: test
  before_script:
    - apk -U upgrade
  script:
    - ls -lA
    - CI=true npm test
  only:
    - main

push_r:
  stage: push
  image:
    name: gcr.io/kaniko-project/executor:debug
    entrypoint: [""]
  script:
    - echo "{\"auths\":{\"$CI_REGISTRY\":{\"username\":\"$CI_REGISTRY_USER\",\"password\":\"$CI_REGISTRY_PASSWORD\"}}}" > /kaniko/.docker/config.json
    - /kaniko/executor --cache=false --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile-prod --destination $CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA 
  only:
    - main
 

.gitlab-ci.yml using cache

stages:
  - build
  - test
  - push

cache:
  key: "$CI_COMMIT_REF_SLUG"
  paths:
    - node_modules/

image:
  name: node:16-alpine

build_r:
  stage: build
  before_script:
    - export ENV_VAR="value"
  script:
    - node -v
    - echo "$ENV_VAR"
    - echo "$CI_COMMIT_REF_SLUG"
    - npm install
  only:
    - main

test_r:
  stage: test
  script:
    - echo "$CI_COMMIT_REF_SLUG"
    - CI=true npm test
  only:
    - main

push_r:
  stage: push
  image:
    name: gcr.io/kaniko-project/executor:debug
    entrypoint: [""]
  script:
    - echo "{\"auths\":{\"$CI_REGISTRY\":{\"username\":\"$CI_REGISTRY_USER\",\"password\":\"$CI_REGISTRY_PASSWORD\"}}}" > /kaniko/.docker/config.json
    - /kaniko/executor --cache=false --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile-prod --destination $CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA 
  only:
    - main
 

Dockerfile

FROM node:16-alpine

RUN apk -U upgrade

WORKDIR /app

COPY package.json ./

RUN npm install

COPY ./ ./

CMD ["npm", "start"]

Dockerfile-prod

FROM node:16-alpine as build

WORKDIR /usr/app

COPY package.json .

RUN npm install

COPY  . .

RUN REACT_APP_BASE_URL=example.com yarn build

FROM nginx:1.19.0

WORKDIR /usr/share/nginx/html

RUN rm -rf ./*

COPY --from=build /usr/app/build /usr/share/nginx/html

ENTRYPOINT ["nginx", "-g", "daemon off;"]

This will work for any react app that has tests.

On target machine:

docker login registry.gitlab.com
docker run -it --name react registry.gitlab.com/USER-NAME/IMAGE-NAME:TAG