Heroku w/ Subdomains
The easiest way to deploy the frontend that uses the multi-tenant with subdomains strategy is probably on Heroku.
- Tenant Mode set to Multi w/ Subdomain.
- Custom Domain
- Heroku Account with billing enabled
- frontend/src/config/production.tsx (For React and Vue)
- frontend/src/environments/environment.production.ts (For Angular)
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',
};
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 .Go to the frontend repository and run:
git init
git add --all
git commit -m "Initial Commit"
Install the Heroku CLI
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.
Push the code to Heroku and deploy it.
git push heroku master
Great! The app is now online.
To activate the subdomain capabilities, you'll have to add a wildcard Custom Domain.
heroku domains:add "*.your_custom_domain.com"
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.
Because of the wildcard, Heroku does not automatically assign a certificate for us. We must create it using CertBot.
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.
This is required to upload SSL certificates.
sudo heroku certs:add /etc/letsencrypt/live/your_custom_domain/fullchain.pem /etc/letsencrypt/live/your_custom_domain/privkey.pem
Done! Now your application can be accessed via subdomains and with https.
Last modified 1yr ago