This repo explains how to build and run serverless web applications on the IBM Cloud. Business logic is implemented with IBM Cloud Functions, static web resources are stored in IBM Object Storage, authentication is handled via IBM App ID and data is stored in the managed NoSQL database IBM Cloudant.
The project contains a sample web application built with Angular which requires user authentication to access data in Cloudant. Watch the 10 seconds video for a short demo.
While the Angular application and the protected API are samples, the other components in this repo are generic and can be reused for other web applications, for example the login functionality and the setup of App ID, Cloudant and Object Storage.
This diagram describes the architecture with the main components:
Find out more about the main components:
- IBM Cloud Functions powered by Apache OpenWhisk
- IBM Cloud Functions API Management
- IBM Cloud Object Storage
- IBM App ID
- IBM Cloudant
Create an IBM Cloud lite account (free, no credit card required):
- You will require an Academic Initiative account from your institution.
Make sure you have the following tools installed:
- Install the helper scripts available from IBM Cloud Scripts
- git
- ibmcloud CLI
- node
- curl
- ng (only needed for the Angular sample application)
This assumes you are running a version of Linux or similar.
sudo npm install -g @angular/cli
Invoke the following commands:
$ git clone git@github.com:tommccallum/ibmcloud-basic-serverless-project.git
$ cd serverless-basic-serverless-project
$ ibm_login.sh
$ ./build_all.sh
The final URL will be presented to you. Copy and paste this into your browser. For example:
Done! Open your app: https://service.eu.apiconnect.ibmcloud.com/gws/apigateway/api/f480843e14eb28dfb6c273dd4638dbbf5cef56da97581b5a76fff44bfa5f9c50/serverlessweb/web
The credentials user@demo.email, verysecret will let you in or you can try using your Google or Facebook credentials.
./delete-resources.sh
Check out the logs in the scripts directory when something goes wrong. The build_all.sh script will warn you if the world "FAILED" appears in any of the logs and stop at the stage that had the error.
You can search for errors with the following:
grep -nH "FAILED" scripts/*.log
The -n adds line numbers and the -H shows the file the pattern appeared in.
cd angular
ng serve
Open http://localhost:4200 in your browser.
- the angular directory contains our app assets including HTML, CSS and all the javascript.
- the documentation directory is the additional documentation that came with this repository
- the function-html directory as the javascript code for the serverless function 'html'. It also contains the swagger file that defines the API to reach the serverless function.
- the function-login directory as the javascript code for the serverless functions 'login', 'redirect' and 'login-and-redirect'. It also contains the swagger file that defines the API to reach these serverless functions.
- the function-protected directory as the javascript code for the serverless function 'function-protected'. It also contains the swagger file that defines the API to reach the serverless function.
- the node_modules directory is where npm caches its files and will be created upon build.
- the scripts contains all the build scripts for the various services this project uses.
- the local.env file is created for each new build and contains the environment variables for the bash scripts in scripts directory.
This repository is based on a repository https://github.com/nheidloff/serverless-web-application-ibm-cloud. It has been heavily modified for our educational use case.
Check out Neil's blogs and screenshots for more details: