Deploy Frontity on Heroku

To be able to deploy to Heroku you need to have a Heroku account. You can signup here.
You will also need to install the Heroku CLI​
The Heroku CLI requires Git, the popular version control system. If you don’t already have Git installed, complete the following before proceeding: Git installation & First-time Git setup​
Once you have an account and the Heroku CLI installed you have to login from the terminal
1
> heroku login
Copied!
These are the instructions to deploy a Frontity project on Heroku, once you are ready to deploy your project:
Create a heroku app​
Create an app on Heroku from the root of your project
1
> heroku create
Copied!
Heroku will generate a random name for your app (shielded-gorge-51896 in the example), or you can pass a parameter to specify your own app name.
1
⬢  my-frontity-project  master ⦾ heroku create
2
 ›   Warning: heroku update available from 7.25.0 to 7.38.2.
3
Creating app... done, ⬢ shielded-gorge-51896
4
https://shielded-gorge-51896.herokuapp.com/ | https://git.heroku.com/shielded-gorge-51896.git
Copied!
When you create an app, a remote git repository (called heroku) is also created on Heroku and associated with your local git repository.
1
⬢  my-frontity-project  master ⦾ git remote -v
2
heroku    https://git.heroku.com/shielded-gorge-51896.git (fetch)
3
heroku    https://git.heroku.com/shielded-gorge-51896.git (push)
4
origin    [email protected]:frontity-demos/my-frontity-project.git (fetch)
5
origin    [email protected]:frontity-demos/my-frontity-project.git (push)
Copied!
Add a start script
Heroku will automatically execute your start script so add the following to your scripts section in the package.json file at the root of your project.
1
"scripts": {
2
  "start": "frontity serve --port $PORT",
3
  "dev": "frontity dev",
4
  "build": "frontity build",
5
  "serve": "frontity serve"
6
},
Copied!
Heroku will automatically execute your build script before starting your app. You should have this one already defined in your project.
Notice how we're using $PORT to read this value from an environment variable. It is because Heroku will set a different port for each process and that port will be stored in a PORT environment variable
Deploy
The way to deploy to Heroku by is pushing to the heroku git remote, so we can do
1
git push heroku master
Copied!
You should get something like this
1
⬢  my-frontity-project  master ⦾ git push heroku master
2
Enumerating objects: 5, done.
3
Counting objects: 100% (5/5), done.
4
Delta compression using up to 4 threads
5
Compressing objects: 100% (3/3), done.
6
Writing objects: 100% (3/3), 290 bytes | 290.00 KiB/s, done.
7
Total 3 (delta 2), reused 0 (delta 0)
8
remote: Compressing source files... done.
9
remote: Building source:
10
remote:
11
remote: -----> Node.js app detected
12
remote:
13
remote: -----> Creating runtime environment
14
remote:
15
remote:        NPM_CONFIG_LOGLEVEL=error
16
remote:        NODE_ENV=production
17
remote:        NODE_MODULES_CACHE=true
18
remote:        NODE_VERBOSE=false
19
remote:
20
remote: -----> Installing binaries
21
remote:        engines.node (package.json):  unspecified
22
remote:        engines.npm (package.json):   unspecified (use default)
23
remote:
24
remote:        Resolving node version 12.x...
25
remote:        Downloading and installing node 12.16.2...
26
remote:        Using default npm version: 6.14.4
27
remote:
28
remote: -----> Restoring cache
29
remote:        - node_modules
30
remote:
31
remote: -----> Installing dependencies
32
remote:        Installing node modules (package.json + package-lock)
33
remote:        audited 10234 packages in 7.144s
34
remote:
35
remote:        15 packages are looking for funding
36
remote:          run `npm fund` for details
37
remote:
38
remote:        found 0 vulnerabilities
39
remote:
40
remote:
41
remote: -----> Build
42
remote:        Running build
43
remote:
44
remote:        > [email protected] build /tmp/build_00b81abd8c2a36d3f2525857753e0188
45
remote:        > frontity build
46
remote:
47
remote:        mode: production
48
remote:
49
remote:        Building es5 bundle
50
remote:        Building module bundle
51
remote:        Building server bundle
52
remote:
53
remote:
54
remote: -----> Caching build
55
remote:        - node_modules
56
remote:
57
remote: -----> Pruning devDependencies
58
remote:        audited 10234 packages in 6.44s
59
remote:
60
remote:        15 packages are looking for funding
61
remote:          run `npm fund` for details
62
remote:
63
remote:        found 0 vulnerabilities
64
remote:
65
remote:
66
remote: -----> Build succeeded!
67
remote: -----> Discovering process types
68
remote:        Procfile declares types     -> (none)
69
remote:        Default types for buildpack -> web
70
remote:
71
remote: -----> Compressing...
72
remote:        Done: 52.3M
73
remote: -----> Launching...
74
remote:        Released v14
75
remote:        https://shielded-gorge-51896.herokuapp.com/ deployed to Heroku
76
remote:
77
remote: Verifying deploy... done.
78
To https://git.heroku.com/shielded-gorge-51896.git
79
   ee9c4d2..ab9b152  master -> master
Copied!
Heroku will assign you a domain (something like your-project-name.herokuapp.com) that will allow you to check your site online
Deploy a production site
To deploy your site under a custom domain in Heroku you have to...
1.
Add your custom domain in your Heroku app
2.
Register a DNS record with your domain provider
...before deploying it
Add your custom domain in your Heroku app
With the command heroku domains:add you can add a specific custom domain in your Heroku app
for example by doing:
1
heroku domains:add heroku domains:add www.variables-demo.com
Copied!
you should get something like this
1
⬢  my-frontity-project  master ⦾ heroku domains:add www.variables-demo.com
2
 ›   Warning: heroku update available from 7.25.0 to 7.38.2.
3
Adding www.variables-demo.com to ⬢ shielded-gorge-51896... done
4
 ▸    Configure your app's DNS provider to point to the DNS Target damp-whale-rln632baq4jdhcj5aw495bst.herokudns.com.
5
 ▸    For help, see https://devcenter.heroku.com/articles/custom-domains
6
​
7
The domain www.variables-demo.com has been enqueued for addition
8
 ▸    Run heroku domains:wait 'www.variables-demo.com' to wait for completion
Copied!
Add a CNAME in your domain provider's DNS settings
Once you have added your domain to your Heroku app, you can use the command heroku domains to see the value for the CNAME record that you have to set in your domain settings.
1
⬢  my-frontity-project  master ⦾ heroku domains
2
 ›   Warning: heroku update available from 7.25.0 to 7.38.2.
3
=== shielded-gorge-51896 Heroku Domain
4
shielded-gorge-51896.herokuapp.com
5
​
6
=== shielded-gorge-51896 Custom Domains
7
Domain Name             DNS Record Type  DNS Target
8
──────────────────────  ───────────────  ─────────────────────────────────────────────────
9
www.variables-demo.com  CNAME            damp-whale-rln632baq4jdhcj5aw495bst.herokudns.com
Copied!
With this info you can add a CNAME in your domain provider's DNS settings.
If you don't know how to do this, contact your domain provider (GoDaddy, CloudFlare, etc)
Deploy
Then, deploy Frontity using this command (from the root of your project):
1
> git push heroku master
Copied!
If no changes are detected you may have to do: npx frontity build → to generate a new build git commit --allow-empty → to force a empty commit git push heroku master → to push this lateste build into heroku and launch its deploy process
Still have questions? Ask the community! We are here to help 😊