Lets first install the angulat-cli globally with npm using the command below

npm install -g @angular/cli

Next we will generate a new project with angular-cli using the command below

ng new my-cf-app

Open the newly generated project in your IDE. Notice that angular-cli has generated all the necessary files to build a new application. You can run the app locally for development purposes using the following command

npm start -- --open

This will start your angular app in development mode. This mode will not allow you to deploy to cloud foundry. To build a deploy-able application we need to run the command below to generate a dist folder

yarn build

This should have generated a new folder called dist. In order to deploy this to cloud foundry we will need to create a manifest.yml file. The contents of the file should look like below

name: my-cf-app-123
instances: 1
memory: 30M
buildpack: staticfile_buildpack
path: ./dist/my-cf-app

This describes the following from top to bottom

• The name we wish to give the application
• The initial number of instances
• The maximum amount of memory our app will be able to consume
• The buildpack to use. For Angular apps we will use the staticfile_buildpack. This is an nginx server that will serve up the app assets
• The path to the folder that contains our deploy-able assets. When we run yarn build, it will generate a dist folder, so lets give it that path

Next we will need to login to cloud foundry so we can push the application. To login to the devlopment environment use the command below

cf login -a api.run.pivotal.io -u username -p password -s space

Now from the root of your project use the command

cf push

Finally, login to the cloud foundry console here https://console.run.pivotal.io. Go the the organization and space where the application was uploaded to and you should see that the application has started