1. Overview

In this article, we are going to learn how to deploy an Angular application in Cloud Foundry and the required tool set up for deployment.

1.1 Prerequisites to deploy Angular application in Cloud Foundry,

1.Cloud Foundry command-line interface (CF CLI)
2.Cloud Foundry account (Example: Pivotal or SAP cloud foundry…)

We will use the Pivotal cloud foundry trail account in this article.
You can skip section 2 (2.1,2.2) If you have read our article “deploying spring boot application with MySQL database connection in cloud foundry”.

2 Cloud Foundry CLI set up and Pivotal cloud foundry trail account creation

2.1 Cloud Foundry CLI installation steps

1. Download the CF CLI zip file from the link.
2. Unzip the downloaded file and click on the cf_installer file. It will guide our next steps to finish the installation.
3. To test, CF CLI installed or not. Just open the command prompt or terminal and run cf helpcommand. It will list down all Cloud Foundry related commands.

2.2 Pivotal cloud account creation steps

1. Go to the pivotal cloud foundry signup page.
2. After completing the pivotal account creation, just sign in, it will show different services. In that select pivotal web services.
3. Enter the organization name and click on the finish button. By default, it will create one space with name development.

3.Project Structure

We have created sample angular project like as in the following image,

Deploy Angular application in cloud foundry

4. Creating manifest.yml for Cloud Foundry

Cloud Foundry finds application properties like name, memory, route and more by using manifest.ymlfile.
Create manifest.ymlfile in the root directory of the project.

applications:
- name: AngularInCloudFoundry
  memory: 1G 
  path: dist/AngularInCloudFoundry
  random-route: false
  buildpacks:
  - staticfile_buildpack

Attributes in the manifest file and their use
name: it is used to specify the application name
path: it is used to specify a path for project build
Buildpacks: it is used to specify what type of application, we are deploying.

If you want more information about attributes, go through the link.

5.Deploy Angular application in Cloud Foundry

5.1 Build your angular project using the command,
ng build  (for production, use ng build –prod)
When we build the project, Angular CLI will generate the dist folder in our project root directory. The dist folder will have our project build which can deployable in the server.

5.2 open command prompt/terminal and change directory to project root directory
Example: D:\AngularInCloudFoundry
Command: cd D:\AngularInCloudFoundry

5.3 Every cloud foundry will have an API endpoint. for pivotal Cloud Foundry,
API endpoint: https://api.run.pivotal.io
Connect to API endpoint by entering following command,
cf login -a https://api.run.pivotal.io

5.4 By providing credentials, it will be logged into your pivotal Cloud Foundry.
5.5 Enter command cf push. It will read the manifest file and deploy our Angular application to Cloud Foundry.
5.6 Login into Cloud Foundry account and open development space and copy route URL which is our application URL.
Route URL: http://angularincloudfoundry.cfapps.io/
Commands execution in CLI will be like as in the following image,

6. Conclusion

We have explained the angular application deployment process in Cloud Foundry.
Hope 😊 you like it. if you want more information you can through the reference links.

7.References

https://docs.cloudfoundry.org/devguide/deploy-apps/deploy-app.html

https://docs.cloudfoundry.org/cf-cli/

https://docs.cloudfoundry.org/devguide/deploy-apps/manifest.html

https://docs.cloudfoundry.org/buildpacks/

Was this post helpful?

Leave a Reply

Your email address will not be published. Required fields are marked *