IBM Cloud

IBM Cloud platform Apache 2

Angular UI Patterns with Node.js

Angular is a popular framework for creating user interfaces in modular components. In this sample application, you will create a web application using Express and Angular to serve web pages in Node.js, complete with standard best practices, including a health check.

This application contains 12 popular UI patterns that make it very easy to construct a dashboard application.

This app contains an opinionated set of components for modern web development, including:

Steps

You can deploy this application to IBM Cloud or build it locally by cloning this repo first. Once your app is live, you can access the /health endpoint to build out your cloud native application.

Deploying

Make sure you are logged into the IBM Cloud using the IBM Cloud CLI and have access to you development cluster. If you are using OpenShift make sure you have logged into OpenShift CLI on the command line.

npm i -g @garage-catalyst/ibm-garage-cloud-cli

Use the IBM Garage for Cloud CLI to register the GIT Repo with Jenkins

igc pipeline

Building Locally

To get started building this application locally, you can either run the application natively or use the IBM Cloud Developer Tools for containerization and easy deployment to IBM Cloud.

Native Application Development

Install the latest Node.js 6+ LTS version.

Once the Node toolchain has been installed, you can download the project dependencies with:

npm install
cd client; npm install; cd ..
npm run build
npm run start

Modern web applications require a compilation step to prepare your ES2015 JavaScript or Sass stylesheets into compressed Javascript ready for a browser. Webpack is used for bundling your JavaScript sources and styles into a bundle.js file that your index.html file can import.

Webpack

For development mode, use webpack -d to leave the sources uncompress and with the symbols intact.

For production mode, use webpack -p to compress and obfuscate your sources for development usage.

Gulp

Gulp is a task runner for JavaScript. You can run the above Webpack commands in by running:

gulp

To run your application locally:

npm run start

Your application will be running at http://localhost:3000. You can access the /health and /appmetrics-dash endpoints at the host.

Session Store

You may see this warning when running ibmcloud dev run:

Warning: connect.session() MemoryStore is not
designed for a production environment, as it will leak
memory, and will not scale past a single process.

When deploying to production, it is best practice to configure sessions to be stored in an external persistence service.

Next Steps

License

This sample application is licensed under the Apache License, Version 2. Separate third-party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 and the Apache License, Version 2.

Apache License FAQ