CODEWITHSUNDEEP
herokuangular-cligitlab-ci
louis amoros
louis amoros

Reputation: 2546

How do I deploy Angular application on Heroku using ng cli?

I have the following package.json :

{
  "name": "app",
  "version": "1.0.0",
  "engines": {
    "node": "11.13.0",
    "npm": "6.9.0"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build:prod": "npm run build -- --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
  },
  "devDependencies": {
    "@angular/cli": "^8.0.2",
    "typescript": "3.4.5",
    ...
  }
  ...
}

and the following .gitlab-ci.yml:

before_script:
  - echo "Execute scripts which are required to bootstrap the application. !"

after_script:
  - echo "Clean up activity can be done here !."

# Cache modules in between jobs
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
  - node_modules/

stages:
  - deploy

deploy_staging:
  stage: deploy
  image: ruby:2.3
  script:
    - apt-get update -qy
    - apt-get install -y ruby-dev
    - gem install dpl
    - dpl --provider=heroku --app=$HEROKU_APP_STAGING --api-key=$HEROKU_API_KEY
  environment:
    name: staging
    url: https://$HEROKU_APP_STAGING.herokuapp.com
  only:
    - master

When I try to deploy my app on Heroku I got a success deployment but it fails when it launches the app : sh: 1: ng: not found.

Is it possible/good to use ng on heroku ? What am i missing ?

Upvotes: 0

Views: 1016

Answers (1)

Amir Dadkhah
Amir Dadkhah

Reputation: 1154

In deploy_staging part of the .gitlab-ci.yml file, the image ruby:2.3 will be pulled which does not contain installed npm or angular-cli (So it can cause ng: not found error).
It seems, you need to add a build stage to the .gitlab-ci.yml which is assigned for building Angular app and produce bundle files (The dist folder in home directory of the Angular app).

For example, .gitlab-ci.yml file might look like this:

⋮

stages:
    - build
    - deploy

# New stage for building your Angular app
build_staging:
    stage: build
    image: trion/ng-cli
    allow_failure: false
    script:
        - npm install
        - ng build --prod

deploy_staging:
    stage: deploy
    image: ruby:2.3
    when: on_success
    dependencies: 
        - build
    script:
        - apt-get update -qy
        - apt-get install -y ruby-dev
        - gem install dpl
        - dpl --provider=heroku --app=$HEROKU_APP_STAGING --api-key=$HEROKU_API_KEY
    environment:
        name: staging
        url: https://$HEROKU_APP_STAGING.herokuapp.com
    only:
        - master

⋮

Upvotes: 2

Related Questions