Cloud-builders: angular 5 autodeploy

[pashaseliverstov]

Could you please share a cloudbuild.yaml example where Angular 5 app is built with "ng build" and "dist" folder is copied over to google cloud storage bucket shared publicly?

[pashaseliverstov]

it looks like Firebase Hosting is designed for Single Page applications like Angular. How to set "ng build" and "firebase deploy" in cloudbuild.yaml?

[lazharichir]

Yup, same issue with a reactjs app that i want to push to git's dev branch, automatically test, and then deploy to my firebase hosting

[imjasonh]

For these cases, you'll want to build an ng builder and a firebase builder, which wrap those tools. If you would like to contribute those to the community builder repo, that would be helpful for other users.

For the ng builder, you can base the image on the npm builder and RUN npm install -g @angular/cli (based on these instructions).

For the firebase builder, you can base the image on the npm builder and RUN npm install -g firebase-tools (based on these instructions).

With those images built and hosted in a registry, your build can do something like:

steps:
- name: 'gcr.io/$PROJECT_ID/ng'
  args: ['build']
- name: 'gcr.io/$PROJECT_ID/firebase'
  args: ['deploy']

(I have never used either of these tools so I don't know if those invocations are correct).

[pashaseliverstov]

https://stackoverflow.com/questions/49946231/google-cloud-builder-angular-cli-firebase-cli

[imjasonh]

Thanks for that write-up. If you feel like contributing the ng and firebase builder images to https://github.com/GoogleCloudPlatform/cloud-builders-community that would be great! 👍

[manekinekko]

Hi @ImJasonH I've sent a PR adding support for the angular cli: https://github.com/GoogleCloudPlatform/cloud-builders-community/pull/106

[rafarngt]

hello, this works for me. in cloudbuild.yaml:

steps:
# Install Angular
- name: 'gcr.io/cloud-builders/npm'
  args: ['install','-g','@angular/cli' ]
# Install Dependencies
- name: 'gcr.io/cloud-builders/npm'
  args: ['install']
# build Project in mode Prod.
- name: 'gcr.io/cloud-builders/npm'
  args: ['run','ng','build','--prod','--aot']
# deploy in App Engine
- name: "gcr.io/cloud-builders/gcloud"
  args: ["app", "deploy"]
timeout: "3000s"

and my app.yaml:

runtime: nodejs8
#api_version: 1

# used by gloud tools
#service: default

handlers:
- url: /
  static_files: dist/myFolderOutput/index.html
  upload: dist/myFolderOutput/index.html
- url: /
  static_dir: dist/myFolderOutput

finally remember to delete the cache in App Engine -> memCache, for my case since I use AppEngine

[winster]

Thanks @rafarngt

• name: 'gcr.io/cloud-builders/npm'
  args: ['run','ng','build','--prod','--aot']

This command does not take the flags. Even if you directly try in terminal, prod flag is skipped. Any idea how to solve this?

[winster]

filipesilva has answered that in https://github.com/angular/angular-cli/issues/5768

following works with flags.

• name: 'gcr.io/cloud-builders/npm'
  args: ['run','ng','--','build','--prod','--aot']

[mehmetific]

Hi,
I would appreciate if someone with the same experience can comment on what is wrong in my case here. Below is the cloudbuild file, when it is triggered, it always times out in the ng build part. We could wait until 32 minutes. When I build it locally, it is doing well, can be built in seconds but in Cloud Trigger, it has stopped working.

steps:
- name: 'gcr.io/cloud-builders/npm'
  args: ['install','-g','@angular/cli']
# run npm install for Angular
- name: 'gcr.io/cloud-builders/npm'
  args: ['install']
  dir: 'PPlus.Web/ClientApp'
# build Angular for production
- name: 'gcr.io/cloud-builders/npm'
  args: ['run','ng','--','build','--prod','--aot']
  dir: 'PPlus.Web/ClientApp'
# publish asp.net core solution  
- name: microsoft/dotnet:2.2-sdk
  args: ['dotnet', 'publish','-c','Release']
# deploy the webapi to the AppEngine
- name: gcr.io/cloud-builders/gcloud
  args: ['app', 'deploy', './PPlus.Web/bin/Release/netcoreapp2.2/publish/app.yaml','--version','staging']
timeout: 660s

The error after timeout:
Finished Step #2
TIMEOUT
ERROR: context deadline exceeded