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

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

  1. bursa escort

    Interesting blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog stand out. Please let me know where you got your design. With thanks Nancey Allayne Dedric

    Reply
  2. escort bayan

    A motivating discussion is definitely worth comment. I do believe that you should write more about this topic, it might not be a taboo matter but typically people do not discuss such topics. To the next! All the best!!| Cal Wilmar Bobbe

    Reply
  3. Scary pictures

    After looking into a few of the articles on your web page, I truly like your way of writing a blog. I saved as a favorite it to my bookmark website list and will be checking back soon. Take a look at my website too and tell me how you feel. Natalina Vaclav Idalia

    Reply
  4. ApptelJex

    Одновременно с этим существует и другая сторона формирования и организации высказывания.

    Reply
  5. ApptelJex

    Одновременно с этим существует и другая сторона формирования и организации высказывания.

    Reply

Leave a Reply

Your email address will not be published.