Technical Articles
How to prepare and deploy an Angular 8 application to SAP Cloud Platform in Neo environment
I was recently building a web application using Angular 8 and fundamental-ngx library. As stated here the @fundamental-ngx/core
library is a set of Angular components built using SAP Fundamental Styles.
SAP Fundamental Styles library is a design system and HTML/CSS component library used to build modern product user experiences with the SAP look and feel.
Working with modern javascript libraries since last 7 years,It was pretty easy to pick up fundamental-ngx with Angular 8 and create a SAP standard user experience. But then I faced the real challenge: How can I deploy my application to SAP Cloud Platform in Neo environment?
Let me share with you ,how I approached this problem and created an easy shell script to help with my regular deployments.
I broke the problem into three steps and it helped me achieve my goals:
- Adding SAP Cloud Platform Neo environment specific files in Angular 8 project.
- Preparing Angular 8 project for deployment on SAP Cloud Platform Neo environment.
- Deploy the final project to SAP Cloud Platform with SAP Web IDE.
Let’s go through each of the steps below in detail.
Adding SAP Cloud Platform Neo environment specific files in Angular 8 project.
I created a folder neo-settings in route directory of my project and added the following files.
neo-app.json
It is important to mention the destinations created on the SAP Cloud platform in Neo environment for consuming services required by your web application,The neo-app.json file contains all project settings for SAP Web IDE and is created in the root folder of your projects. One can find more about neo-app.json here
{
"welcomeFile": "/index.html",
"routes": [
{
"path": "<SCP DESTINATION>", //
"target": {
"type": "service",
"name": "<SERVICE NAME>"
}
}
],
"sendWelcomeFileRedirect": true,
"authenticationMethod": "<AUTH TYPE>" // I have used saml in my case
}
package.json
{
"name": "<APP NAME>",
"version": "0.0.1",
"description": "",
"private": true,
"devDependencies": {
},
"scripts": {
}
}
Preparing Angular 8 project for deployment on SAP Cloud Platform Neo environment.
This involves the following steps:
- Building the angular project for production
- Copying the files from neo-settings folder to route directory of project build
- Creating webapp folder in root directory of project build.
- Moving index.html from root directory to webapp folder in project build.
- Creating a zip of the build.
The steps seem fine but since I needed to prepare a simpler deployment scenario ,I created a shell script to perform this repetitive tasks and put the same in my route project folder.
neo-deploy.sh
#remove earlier build folder for neo
rm -r ./dist/<FOLDER_NAME_FOR_NEO>
#build for production
ng build --prod
#go to dist folder (angular-cli puts the build file in dist folder by default)
cd dist
#create build folder for neo(better to separate neo build from regular build
mkdir <FOLDER_NAME_FOR_NEO>
# create web app folder in
mkdir <FOLDER_NAME_FOR_NEO>/webapp
# copy neo specific files to your build folder for neo
cp ../neo-settings/neo-app.json ./<FOLDER_NAME_FOR_NEO>/
cp ../neo-settings/package.json ./<FOLDER_NAME_FOR_NEO>/
# copy angular build files to neo folder
cp -r ./<ANGULAR_BUILD_FOLDER>/* ./<FOLDER_NAME_FOR_NEO>/
# copy index.html from angular build to webapp directory
cp -r ./<ANGULAR_BUILD_FOLDER>/index.html ./<FOLDER_NAME_FOR_NEO>/webapp/
# remove index.html from neo build folder
rm ./FOLDER_NAME_FOR_NEO/index.html
#create the zip file for up[loading to neo]
zip -r -X <ZIPFILE_NAME> ./<FOLDER_NAME_FOR_NEO>/*
Now the zipped file is ready and next step was to deploy the same to SAP Cloud Platform in Neo Environment.
Deploy the project with SAP Web IDE
Being familiar with SAP Web IDE I went through the following steps to complete the deployment of the angular 8 application.
Creating a project folder on SAP IDE.
I went to SAP WEB IDE and created a new folder and entered the name of the project.
Importing zipped project to your folder
The next task was to import the zipped project file by right clicking on the newly created folder and selecting Import > File or Project.
Once the import was completed by SAP Web IDE,I can see my Angular 8 project build.
Moving the contents from extracted zip directory to root project folder.
Since the whole project folder was imported I had to move the contents from there to root project directory on SAP Web IDE.
Now the app contents are in root folder and ready to be deployed.
Deploying the project
Before deploying its always good to check once ,if the app is running perfectly or not.
Since all went well, I switched back to SAP Web IDE, right clicked on my project folder, selected Deploy and then Deploy to SAP Cloud Platform.
If needed one can enter the application name or keep the default name and click on Deploy.
And my angular 8 application was successfully deployed to SAP Cloud Platform in Neo environment.
One can click on Open the active version of application to access your app.
As I took you through the steps of preparing and deploying your angular 8 application to SAP cloud platform in Neo environment, you can also try to deploy other Javascript frameworks of your choice or also create a SAPUI5 application on SAP Web IDE.
You can find further information regarding the technologies used here:
Please do share your experience with deployment of Web application in other Javascript frameworks on SAP Cloud Platform below in comments.
.
I found myself doing this 2 years ago with Angular 6 as we don’t use UI5 and we had to deploy it on the cloud in nei environment. So I had to deploy it like a UI5 app like the above mentioned method. One thing I would like to add is to add useHash: true in the router config for angular routes. Otherwise deep linking such as visiting a direct url like https://domain/home/suburl will throw a 404 not found.
The server ignores anything after # segment and in angular routing is handled by the framework unlike UI5 so everything including 404 page will be sent to index.html#/home/suburl and angular will take care of it.
But with Cloud foundry adoption in SCP Angular with node.js is way more easier to deploy and to include it in CI/CD pipelines. Cloud Foundry has very nice nginx, node.js buildpacks too.
Hey Sai,
this is a very useful and helpful blog! I agree with Abhijith that with cf it is easier. I hope we can push neo further so deploying Angular/React/Vue projects to be easy task.
cheers,
deno