Deploy angular project to Gitlab pages using gitlab.ci

You can support me

How to deploy your gitlab repo to gitlab pages, using gitlab.ci

First of all, I am assuming..

1. You already have your Angular project ready.
2. You have already setup your Gitlab account.
3. You have already Gitlab repository ready.

When you creates your Gitlab repository at that time CI/CD pipeline is automatically build for you and set up for you by default by Gitlab account.

What is benefit of CI/CD ?
Once, everything is ready and setup correctly, When you push your code to remote repository, at that time one script is running parallelly, That script is creating your project and building your project automatically, and if everything is passed correctly, then production build code is ready to deploy to Gitlab pages, and your new code is published and ready to serve. Here, We are creating Gitlab ci.yml file.

[ Step 1 ] : Create .gitlab-ci.yml

Open your angular project. Inside root of your project [ at your package.json file ] create new file called ".gitlab-ci.yml". Inside this file add below script code.

image: node:12.19.0
pages:
  cache:
    paths:
      - node_modules/
  script:
    - npm install -g @angular/cli@10.1.3
    - npm install
    - npm run buildProd
  artifacts:
    paths:
      - public
  only:
    - master
    - pages

First of all,

1. "image:" is docker image and that image pulls node.js version 12.19.0.
2. Then inside "pages:", we are setting path of node_modules.
3. Inside "script:" first of all we install angular-cli. version is based on your angular project so change it accordingly. All pages projects are served from "public" folder so we have to change path of it too. We only deploy master branch and pages branch, any other branch will not detect inside CI/CD pipeline.

[ STEP 2 ] Add new scripts inside "package.json"

"buildProd": "ng build --base-href=/your-repo-name/",

here, you need to change base-path and base-path is based on your gitlab repository. To check gitlab repository base path at gitlab.com... settings -> pages and inside this path see Your pages are served under: section like https://grdtech.gitlab.io/pizza-shop
above /pizza-shop/ is your-repo-name

[ STEP 3 ] update output path inside angular.json file

"outputPath": "public",

After following above steps, if everything is okay then after some time your project is deployed to your pages path url like https://grdtech.gitlab.io/pizza-shop