Developing with HTTPS

Developing with HTTPS locally is necessary for certain features for the web-app to work.

At the time of writing this is:

• Stripe PaymentRequests (like Apple Pay or Google Pay).
• Install prompt for Progressive Web Apps.

Setting up the environment

To enable HTTPS you need to either set up a locally trusted certificate, or you can use something like Ngrok to proxy an HTTPS connection.

Using Ngrok:

Ngrok is a service that proxies your connection through external servers, and it lets us use an HTTPS connection.

To make all things, like login work, you will need to proxy 3 services:

• Onlineweb Frontend (port 8080)
• Onlineweb4 backend (port 8000)
• Onlineweb4 webpack dev server (port 3000)

First you can set up the Ngrok proxies in 3 separate shells:

# Proxy for OWF
ngrok http 8080

# proxy for Onlineweb4 backend
ngrok http 8000

# proxy for Onlineweb4 webpack dev server
ngrok http 3000

Ngrok will give you an address on the form https://<random-string>.ngrok.io where you can connect to OWF through the proxy. Remember that this is publicly accessible. For the purposes of this tutorial we'll say that gave us these addresses to work with:

> ow-frontend.ngrok.io
> ow-backend.ngrok.io
> ow-webpack.ngrok.io

Setting up OWF with proxies to the other services

Before starting OWF we need to set env variables so it connects to the right services:

# Address to OW4 server
export OW4_ADDRESS='ow-backend.ngrok.io'
# Client ID for OW4 OpenID app
export OW4_SSO_CLIENT_ID=<client-id>
# Callback to which address in the frontend to return to after login
export OW4_SSO_CALLBACK='https://ow-frontend.ngrok.io/auth/callback'

Start the OWF service.

yarn dev

# Or to run with SSR
yarn ssr:dev

Setting up Onlineweb4 through the proxies

To set up Onlineweb4 with a proxies we need to first set some env variables

# Tell django that the base url of the app is through the proxy
export OW4_DJANGO_BASE_URL='https://ow-backend.ngrok.io'
# Allow the proxy to set host headers to HTTPS in development.
export OW4_DJANGO_DEVELOPMENT_HTTPS=True
# Set the public url for the webpack dev server. NOTE: Do not add 'https://' at the start, and do not add quotes around the address!
export WEBPACK_DEV_PUBLIC_IP=ow-webpack.ngrok.io
# Set the displayed public port as the proxy port
export WEBPACK_DEV_PUBLIC_PORT=443
# Set webpack dev server to HTTPS mode
export WEBPACK_DEV_HTTPS=true

(Re)Start the backend service:

# Stop the running version if there is one
make down

# Start OW4
make start

Enabling login with OpenID:

Since we are running OWF through a proxy we need to allow the proxy addresses to log in though OpenID manually. These addresses have to be added to the OpenID client found here at your proxied OW4 server: https://ow-backend.ngrok.io/admin/oidc_provider/client/

Click on the client you have configured for OWF, and add the following addresses to the following fields (you can leave the existing values in place):

Redirect URIs:

https://ow-frontend.ngrok.io/auth/callback

Post Logout Redirect URIs:

https://ow-frontend.ngrok.io