Posts Tagged → angular

Deploy your Angular 7 app with Cloud Foundry on SAP Cloud Platform

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 build

Frontend 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 api

In 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 👍

Useful links