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
- Install dependencies with
npm install
npm run start
- The server will be running on http://localhost:4200
- Run
npm run build
to build the project. The build artifacts will be stored in thedist/
directory.
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
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
- Deploy a docker container with the following command
cf-push-docker.sh
- 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.
- 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 thedocker-run.sh
,cf-push-buildpack.sh
andcf-push-docker.sh
scripts. - Complete keycloak configuration is located in env.template.js. This environment variables are replaced at runtime.
- Run
ng generate component component-name
to generate a new component. You can also useng 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 asnpx ng generate component component-name
-
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