How to deploy Angular app as a static site on the cloud?
By: Adrien Arcuri
Tags: Static Site, Continuous Delivery, Ibm Cloud, Angular, Cloud Foundry

Delivery pipeline we will do

In this article, you will learn how to deploy an Angular app as static site using Staticfile buildpack on Cloud Foundry in continuous deployment approach.

There are 2 main parts :

Deploy Angular App using CLI Deploy using delivery pipeline

I will use IBM Cloud DevOps Services for automated deployment.

Deploy Angular app using CLI

This tutorial demonstrates the processes to build and push your angular app using Cloud Foundry CLI.

Assume we have an Angular project myApp .

We don’t need to push the whole project folder to Cloud Foundry, we just need to push the compiled code/library. The compiled code will be generated in the dist folder with this command (use --prod option for the production environment) :

ng build --prod

Now, we will tell to Cloud Foundry how to deploy the app.

Create App Manifests

When Cloud Foundry deploys your app, it will look for a manifest file in the root of your app directory. We can specify the following configuration in a manifest.yml :

We indicate to Cloud Foundry to only take the dist/ folder (path) and that the app will use a Statifile buildpack (buildpacks).

See Cloud Foundry documentation for all App Manifest Attribute Reference.

Create Staticfile

I advise you to include a Staticfile in the dist folder of your project to apply a configuration changes to NGINX webserver, which the buildpack provides.

Here we indicate to keeps browser-visible URLs (pushstate) to directly access to some/path If not, you will get a 404 nginx error . Moreover, we force HTTPS in this example.

See Cloud Foundry documentation for the Staticfile configuration.

Copy Staticfile in /dist folder

To include the Staticfile inside the dist/myApp directory, add the following lines in the project asset configuration in angular.json file. Angular will copy these files in the dist/ folder when building your project (while ng build command).

Do again a ng build --prod to generate the Staticfile in the dist folder.

Here is how our Angular project should look like :

── myApp

├── Staticfile

├── angular.json

├── dist

├── manifest.yml

├── node_modules

├── [...]

├── src

Push to Cloud Foundry

Now the dist folder contains the Staticfile - because angular created it for us. Let’s push our app to Cloud Foundry :

cf push myApp

In a few moments, your app will be normally available in the cloud as a static file. Good job !

In the newt part, we will explain how to continuously deploy this app on IBM Cloud.

Delivery pipeline

In this part, we will focus on the build and deploy bash script, we will use to deploy an angular app on IBM Cloud DevOps Services.

The delivery pipeline is composed of 2 stages :

BUILD stage: compile our app and create the dist folder

DEPLOY stage : push our app to Cloud Foundry

Create a Toolchain

We will assume we already have a toolchain Devops.

To know how to create a toolchain refers to create a custom toolchain.

Add build stage

In the Input of the BUILD stage fill in your Git repository code and the branch you want to be based on, then Save.

Input of the BUILD stage

In the Jobs of Build stage, add a build job and write the following code in the build script section :

The script use nvm to install the node version of your choice and compiles the code in the dist directory.

Input build & build job

Notes: if you fill in Build archive directory section, dist/myApp will be the output of your stage and it can be provided as an input to the next stage (but it will not contain the manifest file in our case).

Add deploy stage

Let’s add a deploy stage.

Choose Build artifacts as an Input of the Deploy Stage and select Cloud Foundry as Deployer Type. Write the following code into Deploy script section :

Save the stage and run the toolchain to deploy your app in the cloud !

You should have a similar screen and can access your app on the route(s) you provide(s) on the manifest.yml file (myApp.domain.com) :

Summary

We demonstrate how to deploy Angular app as a static site using CLI and IBMCloud delivery pipeline by only pushing the dist folder into Cloud Foundry.