{"id":18930181,"url":"https://github.com/nheidloff/serverless-web-application-ibm-cloud","last_synced_at":"2025-07-05T20:12:10.954Z","repository":{"id":38809044,"uuid":"159477520","full_name":"nheidloff/serverless-web-application-ibm-cloud","owner":"nheidloff","description":"Serverless Web Applications on the IBM Cloud with Apache OpenWhisk","archived":false,"fork":false,"pushed_at":"2023-03-02T14:08:39.000Z","size":14427,"stargazers_count":10,"open_issues_count":19,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T22:51:11.053Z","etag":null,"topics":["api","authentication","cloudant","ibm","ibm-cloud","identity","nodejs","nosql","openwhisk","serverless"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nheidloff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-28T09:36:10.000Z","updated_at":"2022-01-19T10:48:42.000Z","dependencies_parsed_at":"2024-11-08T11:41:53.877Z","dependency_job_id":"fc192a97-7565-42de-995b-8be1e2d1e738","html_url":"https://github.com/nheidloff/serverless-web-application-ibm-cloud","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nheidloff%2Fserverless-web-application-ibm-cloud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nheidloff%2Fserverless-web-application-ibm-cloud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nheidloff%2Fserverless-web-application-ibm-cloud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nheidloff%2Fserverless-web-application-ibm-cloud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nheidloff","download_url":"https://codeload.github.com/nheidloff/serverless-web-application-ibm-cloud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249097914,"owners_count":21212377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","authentication","cloudant","ibm","ibm-cloud","identity","nodejs","nosql","openwhisk","serverless"],"created_at":"2024-11-08T11:36:51.170Z","updated_at":"2025-04-15T15:31:17.760Z","avatar_url":"https://github.com/nheidloff.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Serverless Web Applications on the IBM Cloud\n\nThis 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.\n\nThe project contains a sample web application built with Angular which requires user authentication to access data in Cloudant. Watch the 10 seconds [video](documentation/serverless-web-app.mp4) for a short demo.\n\nWhile 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.\n\nThis diagram describes the architecture with the main components:\n\n![alt text](documentation/serverless-web-app.png \"architecture diagram\")\n\nCheck out my blogs and screenshots for more details:\n\n* [Developing Serverless Web Applications on the IBM Cloud](http://heidloff.net/article/serverless-web-applications-ibm)\n* [Hosting Resources for Web Applications on the IBM Cloud](http://heidloff.net/article/hosting-static-web-resources-ibm-cloud)\n* [Authentication of Users in Serverless Applications](http://heidloff.net/article/user-authentication-serverless-openwhisk)\n* [User Authorization in Serverless Web Applications](http://heidloff.net/article/user-authorization-serverless-web-applications-openwhisk)\n* [Screenshots](documentation/serverless-web-apps.pdf)\n* Short [video](documentation/serverless-web-app.mp4) of the Angular application\n\nFind out more about the main components:\n\n* [IBM Cloud Functions](https://cloud.ibm.com/openwhisk) powered by Apache OpenWhisk\n* [IBM Cloud Functions API Management](https://cloud.ibm.com/openwhisk/apimanagement)\n* [IBM Cloud Object Storage](https://cloud.ibm.com/catalog/services/cloud-object-storage)\n* [IBM App ID](https://cloud.ibm.com/catalog/services/app-id)\n* [IBM Cloudant](https://cloud.ibm.com/catalog/services/cloudant)\n\n## Outline\n\n* [Prerequisites](#prerequisites)\n* [Local Environment Setup](#local-environment-setup)\n* [App ID Setup](#app-id-setup)\n* [Cloudant Setup](#cloudant-setup)\n* [Cloud Functions Setup for Login](#cloud-functions-setup-for-login)\n* [Cloud Functions Setup for protected API](#cloud-functions-setup-for-protected-api)\n* [Setup of local Web Application](#setup-of-local-web-application)\n* [Cloud Object Storage Setup](#cloud-object-storage-setup)\n* [Cloud Functions Setup for HTML Function](#cloud-functions-setup-for-html-function)\n* [Custom Domain Setup](#custom-domain-setup) (optional)\n\n## Prerequisites\n\nCreate an IBM Cloud lite account (free, no credit card required):\n\n* [IBM Cloud account](https://ibm.biz/nheidloff)\n\nMake sure you have the following tools installed:\n\n* [git](https://git-scm.com/downloads)\n* [ibmcloud CLI](https://console.bluemix.net/docs/cli/index.html)\n* [node](https://nodejs.org/en/download/)\n* [curl](https://curl.haxx.se/download.html)\n* [ng](https://github.com/angular/angular-cli/wiki) (only needed for the Angular sample application)\n\n## Local Environment Setup\n\nInvoke the following commands:\n\n```\n$ git clone https://github.com/nheidloff/serverless-web-application-ibm-cloud.git\n$ cd serverless-web-application-ibm-cloud\n$ ibmcloud login\n$ ibmcloud target --cf\n$ ibmcloud iam api-key-create serverless-web-application \\\n  -d \"serverless-web-application\" \\\n  --file serverless-web-application.json\n$ cat serverless-web-application.json\n$ cp template.local.env local.env\n```\n\nIn [local.env](local.env) define 'IBMCLOUD_API_KEY', 'IBMCLOUD_ORG', 'IBMCLOUD_SPACE' and 'BLUEMIX_REGION' to match the apikey in [serverless-web-application.json](serverless-web-application.json) and the org, space and region name that you're using (see the outputs in your terminal when following the steps above).\n\n## App ID Setup\n\n[App ID](https://console.bluemix.net/catalog/services/appid) is used to authenticate users. \n\n**Create new App ID service instance:**\n\nRun the following command to create these artifacts:\n\n* App ID service instance 'app-id-serverless'\n* App ID Cloud Foundry alias 'app-id-serverless'\n* App ID credentials\n* App ID test user 'user@demo.email, verysecret'\n\n```\n$ scripts/setup-app-id.sh\n```\n\n**Reuse an existing App ID service instance:**\n\nThe IBM Cloud lite plan only allows one App ID instance in your organization. If you have an App ID instance, you can use it rather than creating a new one. \n\nIn this case copy 'APPID_TENANTID', 'APPID_OAUTHURL', 'APPID_CLIENTID' and 'APPID_SECRET' from your service credentials and paste them in [local.env](local.env).\n\n## Cloudant Setup\n\n[IBM Cloudant](https://console.ng.bluemix.net/catalog/services/cloudant-nosql-db) is used to store data used by the web application.\n\n**Create new Cloudant service instance:**\n\nRun the following command to create these artifacts:\n\n* Cloudant service instance 'cloudant-serverless'\n* Cloudant database 'serverless'\n* Cloudant documents and an index\n\n```\n$ scripts/setup-cloudant.sh\n```\n\n**Reuse an existing Cloudant service instance:**\n\nThe IBM Cloud lite plan only allows one Cloudant instance in your organization. If you have a Cloudant instance, you can use it rather than creating a new one. \n\nIn this case copy 'CLOUDANT_USERNAME' and 'CLOUDANT_PASSWORD' from your service credentials and paste them in [local.env](local.env).\n\nAdditionally run this command to create the sample database and documents:\n\n```\n$ scripts/create-cloudant-db.sh\n```\n\n## Cloud Functions Setup for Login\n\nRun the following command to create these artifacts:\n\n* Cloud Functions sequence 'serverless-web-app-generic/login-and-redirect'\n* Cloud Functions function 'serverless-web-app-generic/login'\n* Cloud Functions function 'serverless-web-app-generic/redirect'\n* Cloud Function API 'login'\n* Redirect URL in App ID\n\n```\n$ scripts/setup-login-function.sh\n```\n\n## Cloud Functions Setup for protected API\n\nRun the following command to create these artifacts:\n\n* Cloud Functions function 'serverless-web-app-sample/function-protected'\n* Cloud Function API 'function-protected'\n\n```\n$ scripts/setup-protected-function.sh\n```\n\n## Setup of local Web Application\n\nTo run the Angular web application locally, run these commands:\n\n```\n$ scripts/setup-local-webapp.sh\n$ ng serve\n```\n\nOpen http://localhost:4200 in your browser.\n\n## Cloud Object Storage Setup\n\n[IBM Cloud Object Storage](https://console.bluemix.net/catalog/services/cloud-object-storage) is used to store the static resources of the web application.\n\n**Create new Object Storage service instance:**\n\nRun the following command to create these artifacts:\n\n* Object Storage instance 'object-storage-serverless'\n* Bucket 'serverless-web-[your-app-id-tenant-id]'\n* Built Angular application\n* Angular files stored in Object Storage\n\n```\n$ scripts/setup-object-storage.sh\n```\n\nTo try the web application, open the URL that you get in the terminal.\n\n**Reuse an existing Object Storage service instance:**\n\nThe IBM Cloud lite plan only allows one Object Storage instance in your organization. If you have an Object Storage instance, you can use it rather than creating a new one. \n\nDefine your service instance name in [scripts/upload-files-to-object-storage.sh](scripts/upload-files-to-object-storage.sh) (line 74) and run this command to create the bucket and to upload the files:\n\n```\n$ scripts/upload-files-to-object-storage.sh\n```\n\n## Cloud Functions Setup for HTML Function\n\nSince Object Storage doesn't allow to pass in parameters to requested files (e.g. https://.../index.html?param=value) another function is deployed to host the index.html file of the single page web application. All other resources are stored in Object Storage.\n\nTo deploy the OpenWhisk function and the API, invoke the following command:\n\n```\n$ scripts/setup-html-function.sh\n```\n\nOpen the web application with the URL that is printed in the output of the command.\n\n\n## Custom Domain Setup\n\nWhen following the steps above, the sample application can be invoked via URLs like https://s3.us-south.objectstorage.softlayer.net/serverless-web-65819d17-0d02-4219-af3a-9468870673cc/serverless/web. If you want to use your own domain, you need to do some additional setup.\n\nFollow the instruction in the [documentation](https://console.bluemix.net/docs/api-management/manage_apis.html#custom_domains) or in this [blog](http://jamesthom.as/blog/2018/12/03/custom-domains-with-ibm-cloud-functions/) to set up custom domains for OpenWhisk functions.\n\nCheck out the [screenshots](documentation/) in the documentation folder for more details. Make sure to set the TXT and CNAME records in your DNS settings correctly, see this [example](documentation/dns-settings.png).\n\nTo deploy update the redirect URL, invoke the following command:\n\n```\n$ scripts/setup-domain.sh https://[yourdomain.com]\n```\n\nOpen the web application via https://[yourdomain.com]/serverless/web.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnheidloff%2Fserverless-web-application-ibm-cloud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnheidloff%2Fserverless-web-application-ibm-cloud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnheidloff%2Fserverless-web-application-ibm-cloud/lists"}