Angular App Deployment

This is a short introduction to help you set up and deploy Angular apps. For more information, please refer to Angular.io.
(Please let me know if you find any errors or omissions in the document —Upsorn Praphamontripong, 5-June-2022)

Deploy locally (using  Node.js)

  1. Build your Angular project
    • Assume your Angular app is named your-angular-app
      Therefore, the folder is named your-angular-app. This is your project root directory.

  2. Go to your Angular app directory, using a terminal
        cd your-angular-app

  3. Start the server, using the following command
        ng serve
    This command will compiles and builds all files, and then starts the server.

  4. To access the app, open a web browser, enter a URL
        http://localhost:4200
    Note: Node.js server runs on port 4200, by default.

  5. To shutdown the server, use a terminal, press keyboard Ctrl+c

Deploy on Google Cloud Platform (GCP)

  1. Build your Angular project
    • Assume your Angular app is named your-angular-app
      Therefore, the folder is named your-angular-app. This is your project root directory.

  2. Build your app production
    • Go to your Angular app directory, using a terminal
          cd your-angular-app
    • Run the following command to make your app production ready
          ng build
      This will create a dist folder in your project root directory. The dist folder contains a your-angular-app folder; the your-angular-app folder should basically contain the following files

       3rdpartylicenses.txt 
       favicon.ico
       index.html
       main.9e187e65c1681375.js
       polyfills.c96eac4dbe535b22.js
       runtime.c60b955f0b7642f8.js
       styles.ef46db3751d8e999.css

  3. Create Config file that will be used by GCP App Engine to deploy the project
    • In your project root directory, create a blank file named app.yaml
    • Paste the following contents in the file

      runtime: nodejs16
      
      instance_class: F2
      
      env_variables: 
        BUCKET_NAME: "your-ng-app-bucket"
      
      handlers:
      - url: /
        static_files: dist/your-angular-app/index.html
        upload: dist/your-angular-app/index.html
      
      - url: /
        static_dir: dist/your-angular-app 

  4. Setting up GCP
    • Assume that you already have a Google account and you already created a project (named angular-app-gcp) and a bucket (named ng-app-bucket).
    • If you have not set up your project and bucket on GCP, please refer to GCP set up and deployment.

  5. Deploying the Application using Google Cloud Shell
    • Open Google Cloud Console
    • Go to your bucket (ng-app-bucket)
    • Select the  Upload Files option to upload your app.yaml file and the  Upload folder option to upload your dist folder.


      The folder structure inside your bucket should be as follows

      Note: You may create a folder for your Angular application, and then upload your app.yaml file and dist folder to it. You will later include this newly created folder's name when running gsutil to sync the data.

    • Open the Google Cloud Interactive Shell


      It may take a few seconds to activate the Cloud Shell.


    • Once you are connected to the Cloud Shell, create a directory for your app (for example, let's name it angular-app-gcp) using the command
          mkdir angular-app-gcp



    • Sync your data from your bucket into the directory you just created, using the following command.
          gsutil rsync -r gs://ng-app-bucket ./angular-app-gcp
      Note: you may be asked to authorize Cloud shell, please click the Authorize button.


      Note: If you put your app.yaml file and dist folder in a folder (previously created in your bucket), include the folder's name. For example, if your folder's name is ng-example, the command would be
          gsutil rsync -r gs://ng-app-bucket/ng-example ./angular-app-gcp

    • Go to angular-app-gcp folder, using the command
          cd angular-app-gcp

      Run the following command to deploy the app
          gcloud app deploy

      Note: for the first time deployment, you will need to configure your project. Choose  14 (for  us-east4) for the  region where you want your App Engine application located



      Answer  y to continue


      Once the deployment is completed, your Shell should look like


      To access your app, you may run the command
          gcloud app browse

      Or open a web browser and access the URL directly. In this example, the target URL is
          https://angular-app-gcp-243113.uk.r.appspot.com

Copyright © 2022 Upsorn Praphamontripong

Released under the Creative Commons License CC-BY-NC-SA 4.0 license.

Last updated 2022-06-05 11:48