# Deploy Frontity on Heroku To be able to deploy to Heroku you need to have a Heroku account. You can [signup here](https://signup.heroku.com/). You will also need to install the [Heroku CLI](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up) > 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](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) & [First-time Git setup](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup) Once you have an account and the Heroku CLI installed you have to login from the terminal ``` > heroku login ``` These are the instructions to deploy a Frontity project on Heroku, once you are ready to deploy your project: ### Create a [heroku app](https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app) Create an app on Heroku from the root of your project ``` > heroku create ``` 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. ``` ⬢ my-frontity-project  master ⦾ heroku create › Warning: heroku update available from 7.25.0 to 7.38.2. Creating app... done, ⬢ shielded-gorge-51896 https://shielded-gorge-51896.herokuapp.com/ | https://git.heroku.com/shielded-gorge-51896.git ``` When you create an app, a remote git repository (called `heroku`) is also created on Heroku and associated with your local git repository. ``` ⬢ my-frontity-project  master ⦾ git remote -v heroku https://git.heroku.com/shielded-gorge-51896.git (fetch) heroku https://git.heroku.com/shielded-gorge-51896.git (push) origin git@github.com:frontity-demos/my-frontity-project.git (fetch) origin git@github.com:frontity-demos/my-frontity-project.git (push) ``` ### 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. ```javascript "scripts": { "start": "frontity serve --port $PORT", "dev": "frontity dev", "build": "frontity build", "serve": "frontity serve" }, ``` 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 ``` git push heroku master ``` You should get something like this ```bash ⬢ my-frontity-project  master ⦾ git push heroku master Enumerating objects: 5, done. Counting objects: 100% (5/5), done. Delta compression using up to 4 threads Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 290 bytes | 290.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: Compressing source files... done. remote: Building source: remote: remote: -----> Node.js app detected remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: NODE_ENV=production remote: NODE_MODULES_CACHE=true remote: NODE_VERBOSE=false remote: remote: -----> Installing binaries remote: engines.node (package.json): unspecified remote: engines.npm (package.json): unspecified (use default) remote: remote: Resolving node version 12.x... remote: Downloading and installing node 12.16.2... remote: Using default npm version: 6.14.4 remote: remote: -----> Restoring cache remote: - node_modules remote: remote: -----> Installing dependencies remote: Installing node modules (package.json + package-lock) remote: audited 10234 packages in 7.144s remote: remote: 15 packages are looking for funding remote: run `npm fund` for details remote: remote: found 0 vulnerabilities remote: remote: remote: -----> Build remote: Running build remote: remote: > my-frontity-project@1.0.0 build /tmp/build_00b81abd8c2a36d3f2525857753e0188 remote: > frontity build remote: remote: mode: production remote: remote: Building es5 bundle remote: Building module bundle remote: Building server bundle remote: remote: remote: -----> Caching build remote: - node_modules remote: remote: -----> Pruning devDependencies remote: audited 10234 packages in 6.44s remote: remote: 15 packages are looking for funding remote: run `npm fund` for details remote: remote: found 0 vulnerabilities remote: remote: remote: -----> Build succeeded! remote: -----> Discovering process types remote: Procfile declares types -> (none) remote: Default types for buildpack -> web remote: remote: -----> Compressing... remote: Done: 52.3M remote: -----> Launching... remote: Released v14 remote: https://shielded-gorge-51896.herokuapp.com/ deployed to Heroku remote: remote: Verifying deploy... done. To https://git.heroku.com/shielded-gorge-51896.git ee9c4d2..ab9b152 master -> master ``` *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](https://devcenter.heroku.com/articles/custom-domains) 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: ``` heroku domains:add heroku domains:add www.variables-demo.com ``` you should get something like this ``` ⬢ my-frontity-project  master ⦾ heroku domains:add www.variables-demo.com › Warning: heroku update available from 7.25.0 to 7.38.2. Adding www.variables-demo.com to ⬢ shielded-gorge-51896... done ▸ Configure your app's DNS provider to point to the DNS Target damp-whale-rln632baq4jdhcj5aw495bst.herokudns.com. ▸ For help, see https://devcenter.heroku.com/articles/custom-domains The domain www.variables-demo.com has been enqueued for addition ▸ Run heroku domains:wait 'www.variables-demo.com' to wait for completion ``` ### Add a [`CNAME`](https://devcenter.heroku.com/articles/custom-domains) 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. ``` ⬢ my-frontity-project  master ⦾ heroku domains › Warning: heroku update available from 7.25.0 to 7.38.2. === shielded-gorge-51896 Heroku Domain shielded-gorge-51896.herokuapp.com === shielded-gorge-51896 Custom Domains Domain Name DNS Record Type DNS Target ────────────────────── ─────────────── ───────────────────────────────────────────────── www.variables-demo.com CNAME damp-whale-rln632baq4jdhcj5aw495bst.herokudns.com ``` With this info you can [add a CNAME](https://devcenter.heroku.com/articles/custom-domains) in your domain provider's DNS settings. {% hint style="info" %} If you don't know how to do this, contact your domain provider (GoDaddy, CloudFlare, etc) {% endhint %} ### Deploy Then, deploy Frontity using this command (from the root of your project): ``` > git push heroku master ``` > 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 {% hint style="info" %} Still have questions? Ask [the community](https://community.frontity.org/)! We are here to help 😊 {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://gitbook-docs.frontity.org/deployment/deploy-on-heroku.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.