This tutorial is based on Your First Progressive Web App. The original tutorial is available as PDF (media/Your First Progressive Web App.pdf) in the repository. I made some modifications to the code to be able to deploy it as Cloud Foundry app on the IBM Cloud:
- Added manifest.yml: Required to automatically deploy
- package.json: removed express-http-to-https, added cfenv
- server.js:
- removed express-http-to-https, added cfenv as required
- removed https redirect (CF is terminating HTTPS at the Router)
- read port number, host, and URL from CF Environment
The tutorial makes use of "Lighthouse". a developer tool that is only available in the Google Chrome Browser.
This is actually optional. If you want live weather data instead of simulated data you need to get a Dark Sky API key, see instructions .
Instructions on how to add an API key to your Cloud Foundry app are at the ed of this README.
If you haven't done already, register for a free IBM Cloud account here (Button on the left side). After registration check your emails for a verification mail, you need to click a link in the mail to complete the registration. Then logon to the IBM Cloud using the same URL.
Follow these instructions to install the IBM Cloud-CLI for your OS.
Login to the IBM Cloud using the email address you registered with:
$ ibmcloud login -u <youruser@email>
You will see something like this:
Press 'Enter' to skip the selection of a region!
Cloud Foundry has a way to organize projects into regions, organizations, and spaces. We need to target the correct one. Display some account details with:
$ ibmcloud account orgs
This example account is active in Region 'eu-gb' (= London). Set the Cloud Foundry region to the region you just determined for your account and then set the other Cloud Foundry specifics to the defaults for that region:
$ ibmcloud target -r eu-gb
$ ibmcloud target --cf
The result should look similar to this:
Region, Org, and Space are now set.
Clone (if you have git installed) or download the code from https://github.com/Harald-U/PWA
For Git clone use:
$ git clone https://github.com/Harald-U/PWA.git
Or download as ZIP File and unzip.
Change into the projects directory:
$ cd PWA
Edit the file 'manifest.yml':
---
applications:
- instances: 1
name: <YourInitialsHere>-PWA
memory: 128MB
random-route: false
Change <YourInitialHere> to your own initials. This name must be unique hence the initials. Be careful: YAML (Yet Another Markup Language) is very specific with indents, dashes (-), and spaces. Do not change the overall structure of the file! Save it and then push the app to the IBM Cloud with:
$ ibmcloud app push
The end result hopefully looks something like this:
The state should be 'running' and the routes should show a value: this is the URL of the app, copy it into a browser, add 'https://' in front, and see what happens:
You have now "published" the unmodified Progressive Web App.
To change this responsive app into a progressive app continue with the original instructions at: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/#establish_a_baseline
IMPORTANT: Every time you want to test your changes you need to push the code to the IBM Cloud again!
$ ibmcloud app push
If you obtained a Dark Sky API key, you can add it to the Cloud Foundry app as an environment variable using these commands:
$ ibmcloud app env-set <Your-CF-App-Name> DARKSKY_API_KEY <apikey>
$ ibmcloud app restage <Your-CF-App-Name>