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

Question

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

Answer 1

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

Answer 2

This is what my current file has. I needed the artifact in here otherwise ng would not work.

image: node:14.17.0 # This is the container for our Docker we will build in

cache:
  paths:
    - dist/
    - node_modules/

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: # Execute script commands just as you would on terminal command line
    - echo $CI_PROJECT_DIR
    - npm install
    - echo npm --version

  artifacts: # This is required for other stage to have access to what gets created
    paths:
      - node_modules/

install_ang:
  stage: install_angular
  image: node:14
  script:
    - npm install -D typescript @angular/cli@12.2.16 @angular/compiler@12.2.16
# Possible that the -D is optional could use -g or none

build:
  stage: build
  script:
    - npm run build_def_mybuild # this is defined in angular.json
    - ls dist/

This is as far as I"ve made it. I may need the following for doing tests.

  artifacts: # This is required for other stage to have access to what gets created
    paths:
      - dist/