How to make a simple GitLab Ci/CD gitlab-ci.yml file to build an Angular project?

Issue

This is for an Angular project I have.

The project itself builds and runs just fine. I have just been struggling with trying to figure out how to make my 1st CI/CD pipeline process gitlab-ci.yml file. This has been going on for months.

How the heck is this to be setup because I cannot find a basic example that just works.

image: node:14.17.0

stages:            # List of stages for jobs, and their order of execution
  - setup
  - build
  - cleanup

.pre:
  stage: setup,
  script:
    - mkdir -p dist
    - npm install -g @angular/cli@12.2.16
    - npm install  # or `npm install` or whatever you use to install deps
    - npm start
    - npm --version
  cache:
    paths:
      - node_modules
    policy: pull

build-job:
  stage: build
  script:          # ... your other build steps here
    - npm run build_def_mysetup
    - ls /builds
  cache:
    paths:
      - node_modules
    policy: pull
  artifacts:
    paths:
      - dist/

.post:
  stage: cleanup
  script:
    - echo "cleanup called"

The goal right now for this is to

1. Install needed node_modules for the build
2. Build the Angular application
3. Eventually if build fails, notify via email the developer who last pushed the build
4. Eventually if build pass - do nothing
5. Eventually if build pass - Run unit tests
6. Eventually if build pass and branch has release in name - tag the branch

I say eventually because I cannot get #1 to work

Solution

Alright, i had a quick glance at your pipeline and tried it on an angular project. First, by following the gitlab-ci documentation, you should not mix stages, with .pre and .post. please take a look at Gitlab CI stages, in this matter.

Next, for the matter of artifacts, you do not need to specifically set path to artifacts, as they are kept between subsequent stages.

Now for the pipeline

-

1. Install dependencies - node_modules

   • simply install npm packages

   stage: install_dependencies
   image: node:14
   script:
   - npm install
   

2. Install angular

   • the script may be varying, but the base idea is kept

   stage: install_angular
   image: node:14
   script:
   - npm install -D typescript @angular/cli @angular/compiler
   

3. Build angular app

   stage: build
   image: node:14
   script:
   - npm run build
   

4. Notify if the build fails

   • This is a default behaviour of gitlab, when you run a pipeline and it fails, then you receive an email with the status, see image

5. Run unit tests + release

   • the same steps as previous steps

The full pipeline would look something like this (its a trivial example, it can be merged into one stage)

image: node:14.17.0

stages:            # List of stages for jobs, and their order of execution
 - install_dependencies
 - install_angular
 - build
 

install_dep:
  stage: install_dependencies
  image: node:14
  script:
  - npm install

install_ang:
  stage: install_angular
  image: node:14
  script:
 - npm install -D typescript @angular/cli @angular/compiler

build_ang:
  stage: build
  image: node:14
  script:
  - npm run build

Answered By - Pavol Krajkovič