In this tutorial, I will show how to deploy an Angular 7 app to Cloud Foundry on SAP Cloud Platform.
Prerequisite
The first thing is to install the Angular CLI globally
sudo npm install -g @angular/cli
Note that you must have installed node (v8.9 or higher) and npm (v6.0 or higher)
Frontend
To start quickly and for the demonstration, we will download the CLI starter kit from angular.io website (https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip). Once you get the zip file, just unzip and follow the next steps with your terminal below.
cd cli-quickstart
npm install
ng serve
Open your browser on http://localhost:4200/ to test the result, you might get something like this:
Great. The project is working locally. Now if you open the package.json file, you will see different scripts to lint, test, build, e2e, etc. The command which is interesting for us is to build the project for production. In order to push this to Cloud Foundry later.
Launch the build script with the following command:
npm run-script buildFrontend is ready.
Backend
For the demo, I wanted to add an API. The steps are easy, the first step is to create a folder api at root of your project.
mkdir apiIn this new folder, create two files: server.js and package.json
server.js
var express = require("express");
var app = express();
app.listen(process.env.PORT || 3000, () => {
console.log("Server running.");
});
app.get("/demo", (req, res, next) => {
res.json(["Hello","World"]);
});
package.json
{
"name": "angualar-7-backend",
"version": "0.0.1",
"scripts": {
"start": "node server"
},
"dependencies": {
"express": "^4.16.4"
}
}
Backend is ready.
Prepare for production
Now we have to create new files specifically for Cloud Foundry deployment. The first file is manifest.yml and it allows you to declare the url of the app/service, the memory, disk_quota, etc. You have to create this file at the root folder of your project:
manifest.yml
---
applications:
- name: angular-7-frontend
host: angular-7-frontend
path: dist
buildpack: staticfile_buildpack
memory: 512M
disk_quota: 512M
instances: 1
random-route: true
- name: angular-7-backend
host: angular-7-backend
path: api
buildpack: nodejs_buildpack
memory: 512M
disk_quota: 512M
instances: 1
random-route: true
The second file is .cfignore
node_modules
api/node_modules
Deployment is ready.
Push to production
Before to push, make sure you are connected (and linked to the right spaces in case you have several). To connect to CF account, execute the following command and follow the steps from the CLI:
cf login
# enter email address
# choose your space
Time to push!
cf push
Done 👍
