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 tell me if you find any errors or omissions in the document —Upsorn Praphamontripong, 26-July-2020)

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 --prod
      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
       es2015-polyfills.1e04665e16f944715fd2.js
       favicon.ico
       index.html
       main.39049915a67858ea8ac0.js
       polyfills.8bbb231b43165d65d357.js
       runtime.26209474bfa8dc87a77c.js
       styles.3ff695c00d717f2d2a11.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: python27
      api_version: 1
      threadsafe: true
      
      handlers:
      - url: /
        static_files: dist/your-angular-app/index.html
        upload: dist/your-angular-app/index.html
      
      - url: /
        static_dir: dist/your-angular-app
      
      (note: currently, GCP App Engine has one version of the python27 runtime environment 1)

  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


    • 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



    • 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.appspot.com/