Heroku w/ Subdomains

The easiest way to deploy the frontend that uses the multi-tenant with subdomains strategy is probably on Heroku.

Requirements

• Tenant Mode set to Multi w/ Subdomain.

• Backend deployed

• Custom Domain

• Heroku Account with billing enabled

Update the frontend configuration

• frontend/src/config/production.tsx (For React and Vue)

• frontend/src/environments/environment.production.ts (For Angular)

Replace the backendUrl variable for the corresponding backend server URL.

Don't forget the/api suffix.

Replace the frontend.host for your custom domain.

// Place the URL here with the /api suffix.
// Ex.:`https://domain.com/api`;
const backendUrl = `https://your_production_backend_url/api`;

const frontendUrl = {
 host: 'scaffoldhub-demo.xyz',
 protocol: 'https',
};

Add the server files to your project

Heroku does not have a way of hosting static files, so we must set an ExpressJS server to serve our static files.

frontend/Procfile

web: node server $PORT

frontend/server.js

const express = require('express');
const app = express();
const fallback = require('express-history-api-fallback');

const root = `${__dirname}/build`;
app.use(express.static(root));

// history fallback
app.use(fallback('index.html', { root }));

app.listen(process.env.PORT, () =>
  console.log(
    `server is listening on port ${process.env.PORT}`,
  ),
);

Replace Line 5 with the one for the corresponding front-end framework you are using.

# React
const root = `${__dirname}/build`;
# Vue
const root = `${__dirname}/dist`;
# Angular
const root = `${__dirname}/dist/frontend`;

The server.js needs express and express-history-api-fallback.

npm install express express-history-api-fallback

Heroku starts the application by running npm start, so you must change the start script to run the ExpressJS server file.

frontend/package.json

{
  ...
  "scripts": {      
      "start": "node server.js",
      "start:frontend": "npm run start:localhost",
  },
  ...
}

Now if you want to start the frontend, you will have to run npm run start:frontend .

Initialize a GitHub repository

Go to the frontend repository and run:

git init
git add --all
git commit -m "Initial Commit"

Create a Heroku project

Install the Heroku CLI

The Heroku CLI | Heroku Dev Centerherokudevcenter

Sign in to Heroku

heroku login

Create a new application

Make sure you are at the frontend repository an run:

heroku create your-app-name

You will then receive the app URL. Save it for accessing later.

Deploy the app

Push the code to Heroku and deploy it.

git push heroku master

Great! The app is now online.

Adding a wildcard domain

To activate the subdomain capabilities, you'll have to add a wildcard Custom Domain.

heroku domains:add "*.your_custom_domain.com"

More information at https://devcenter.heroku.com/articles/custom-domains#add-a-wildcard-domain.

Configuring the DNS

Add the CNAME record on the custom domain provider DNS.

To discover the CNAME, run:

heroku domains

For more information, read https://devcenter.heroku.com/articles/custom-domains#configuring-dns-for-wildcard-domains.

You must also add a URL Redirect Record to point your root domain to www.

I use Namecheap as the domain provider, so my DNS configuration starts looking like this:

It might take a few minutes, but you will be ready to use your URL without SSL.

It will be accessible via http.

Configuring the SSL certificate

Because of the wildcard, Heroku does not automatically assign a certificate for us. We must create it using CertBot.

Install CertBot: https://certbot.eff.org/.

After installed, run the command below, changing the YOUR_CUSTOM_DOMAIN for your domain.

sudo certbot certonly \
--server https://acme-v02.api.letsencrypt.org/directory \
--manual --preferred-challenges dns \
-d \*.YOUR_CUSTOM_DOMAIN.com -d YOUR_CUSTOM_DOMAIN.com

Follow the instructions. You will have to create a DNS TXT record.

Before hitting next, make sure the TXT variables are configured correctly using a tool like https://mxtoolbox.com/SuperTool.aspx. Make sure you have TXT Lookup selected.

Ok, now you have your certificate saved at /etc/letsencrypt/live/your_custom_domain.

Upgrade your Heroku dynos to Hobby

This is required to upload SSL certificates.

Upload the certificate to Heroku

sudo heroku certs:add /etc/letsencrypt/live/your_custom_domain/fullchain.pem /etc/letsencrypt/live/your_custom_domain/privkey.pem

More information at https://devcenter.heroku.com/articles/ssl#manually-uploading-certificates-and-intermediaries.

Done! Now your application can be accessed via subdomains and with https.