Nginx Angular Demo

Responsive Angular and Bootstrap web application. This project was generated with Angular CLI and is fully compatible. Keycloak Angular for Single Sign-On, CoreUI and Leaflet are already integrated as well as API integration with JSONPlaceholder. The project can be deployed as a docker container or pushed directly with a buildpack to SAP Cloud Platform

Local Setup

• Install dependencies with

npm install

Development Server

npm run start

• The server will be running on http://localhost:4200

Production Build

• Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

Run as docker container

You can create a public registry with security scanning for free at Quay.io

• Build and push the image with this script. You will have to edit the quay.io registry endpoint for the push command to work

docker-build.sh

• Run the continer with this script

docker-run.sh

Deploy to SAP Cloud Platform

You can create an account for free at SAP Cloud Platform

• Make sure you have the Cloud Foundry Command Line Interface (cf CLI) installed

• Update the cf-login.sh script with the values found in the SAP Cloud Foundry Cockpit. Then run the script to login.

cf-login.sh

Docker

• Deploy a docker container with the following command

cf-push-docker.sh

Buildpack

• Push your code directly without the need of a container registry with the following commands (make sure you have done a build ahead of time)

cf-push-buildpack.sh

• You will find a url to your deployed application in the SAP Cloud Foundry Cockpit.

Keycloak configuration

• Default configuration has keycloak integration disabled. To enable, set the runtime environment variable KEYCLOAK to true
• The KEYCLOAK_URL variable is externalized to allow deployment to different environments and passed via the docker-run.sh, cf-push-buildpack.sh and cf-push-docker.sh scripts.
• Complete keycloak configuration is located in env.template.js. This environment variables are replaced at runtime.

Code scaffolding

• Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

If you do not have the Angular CLI installed globally, the CLI is provided by the development dependencies. Use npx ng to call commands such as npx ng generate component component-name

Further help

• Learn more about development on SAP Cloud Platform with this tutorial

• Keycloak for Open Source application Single Sign-On

• To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

• To get started with Angular, this is an excellent official tutorial

• Leaflet component provided by ngx-leaflet

• Bootstrap components were created using ngx-bootstrap

• Chart library by ng2-charts

• Toast notification done with ngx-toastr