Deploy your React app on Heroku

井民全, Jing, mqjing@gmail.com

Here, I'll show you how to deploy a HelloWorld nodejs app on Heroku. A React app deployment also includes forming a useful guide. For a free dyno, the container running your app sleeps after 30 mins of inactivity [1]. However, it's enough to give a trial to test your idea.

Enjoy!

By Jing.

Table of contents

1. Setup the environment 6

2. Sample Project 6

2.1. Prepare the sample project 6

2.2. Deploy the project 6

2.3. Visit your app 9

2.4. Log 10

3. Hello word 11

3.1. Modify Code 11

3.2. Commit to the local repository 11

3.3. Deploy to heroku 11

3.4. Visit your app 12

4. React app 12

4.1. Create the client 12

4.2. Link to the express 12

4.3. Deploy to heroku 13

4.4. Visit your React app 13

4.5. Delpy Log 14

5. References 14

6. FAQ 14

Quick

Sample Code

# Setup CLI

sudo snap install heroku --classic

heroku login

# Prepare your project

git clone https://github.com/heroku/node-js-getting-started.git

cd node-js-getting-started

# Deploy

heroku create # Create a heroku project associate to your project

git push heroku main # Deploy the project

heroku open # Visit your app

# Log

heroku logs --tail

Deploy React app

mkdir client

cd client

npx create-react-app my-app --template typescript # create a React sample application

yarn build # bundle the react client

# Link to the Express

const express = require('express')

const path = require('path')

const PORT = process.env.PORT || 5000

const app = express();

// mount the static middleware to the client path

app.use(express.static(path.join(__dirname, 'client/my-app/build')));

// route the index.html to the client index.html

app.get('/', function (req, res) {

res.sendFile(path.join(__dirname, 'client/my-app/build/index.html'));

});

app.listen(PORT, () => console.log(`Listening on ${ PORT }`));

# Deploy

git add -f client/my-app/build # The React bundle client

git add client/my-app

git commit -m 'Add React client'

git push heroku main # Deploy

# Visit the React app

heroku open

# Log

heroku logs --tail

Detail

1. Setup the environment

Step 1: Install the CLI tool

sudo snap install heroku --classic

Step 2: Log in to the Heroku CLI

heroku login

2. Sample Project

2.1. Prepare the sample project

Step 1: Clone the sample project

git clone https://github.com/heroku/node-js-getting-started.git

2.2. Deploy the project

To deploy your project to the heroku server, you can use the command heroku create that will generates a random name for your app.

Step 1: Create a heroku project associate to your project

cd node-js-getting-started

heroku create

Fig. Create a heroku project associates to your project.

Verify

https://dashboard/heroku.com/apps

Fig. Check the created project.

Check out the branch status.

Command

git branch -a

Fig. The branch status.

Check out the git config status

Command

cat .git/config

[core]

repositoryformatversion = 0

filemode = true

bare = false

logallrefupdates = true

[remote "origin"]

url = https://github.com/heroku/node-js-getting-started.git

fetch = +refs/heads/*:refs/remotes/origin/*

[branch "main"]

remote = origin

merge = refs/heads/main

[remote "heroku"]

url = https://git.heroku.com/desolate-brook-83056.git

fetch = +refs/heads/*:refs/remotes/heroku/*

Step 2: Deploy to heroku

Just push your code to the remote repository heroku with main branch. The heroku server will do the rest tasks.

git push heroku main # push the code to the main branch in repository remotes/heroku

Fig. Depoy your project by git push.

2.3. Visit your app

heroku open

Fig. The sample project.

2.4. Log

heroku logs --tail

3. Hello word

3.1. Modify Code

File: views/pages/index.ejs

<!DOCTYPE html>

<html>

<head>

<%- include ("../partials/header.ejs") %>

</head>

<body>

<%- include ("../partials/nav.ejs") %>

Hello World.

</body>

</html>

3.2. Commit to the local repository

git add views/pages/index.ejs

git commit -m "Hello world"

3.3. Deploy to heroku

git push heroku main

3.4. Visit your app

heroku open

Fig. Hello World on heroku server.

4. React app

4.1. Create the client

# create a React sample application

mkdir client

cd client

npx create-react-app my-app --template typescript

# test the react

cd my-app

npm start

# bundle the react client

yarn build # it will generate a folder named ./build

4.2. Link to the express

File: index.js

const express = require('express')

const path = require('path')

const PORT = process.env.PORT || 5000

const app = express();

// mount the static middleware to the client path

app.use(express.static(path.join(__dirname, 'client/my-app/build')));

// route the index.html to the client index.html

app.get('/', function (req, res) {

res.sendFile(path.join(__dirname, 'client/my-app/build/index.html'));

});

app.listen(PORT, () => console.log(`Listening on ${ PORT }`));

4.3. Deploy to heroku

# The React bundle client

git add -f client/my-app/build

# [Option] whole React source (nevermind the node_modules, it will be skipped)

git add client/my-app

git commit -m 'Add React client'

# Deploy

git push heroku main

4.4. Visit your React app

heroku open

Fig. The React app.

4.5. Delpy Log

heroku logs --tail

5. References

6. FAQ

cate	l1	l2	item	note	status	misc
dyno	management		Q: CLI commands		1	https://devcenter.heroku.com/articles/dynos#cli-commands-for-dyno-management
	log		heroku logs		1	https://devcenter.heroku.com/articles/dynos#graceful-shutdown-with-sigterm
	restart		heroku restart worker.1		1	https://devcenter.heroku.com/articles/dynos#graceful-shutdown-with-sigterm
dyno	lifecycle	recycle	Q: 系統 docker 何時 recycle? => create a new release by deploying new code change your config vars change your add-ons run heroku restart Dynos are also restarted (cycled) at least once per day		1	https://devcenter.heroku.com/articles/dynos#restarting
dyno	recycle	manual	Q: 手動 recycle => heroku ps:restart		1	https://devcenter.heroku.com/articles/dynos#restarting
dyno	recycle	effect	Q: recyclce 會怎樣? => local filesystem will be deleted.		1	https://devcenter.heroku.com/articles/dynos#restarting
dyno	network	subnet	Q: subnet range for a dyno? => each dyno will be part of a /30 private subnet in the range 172.16.0.0/12, such as 172.16.83.252/30 or 172.30.239.96/30.		1	https://devcenter.heroku.com/articles/dynos#common-runtime-networking
project	deploy		Q: 一定要用 git 嗎? => Yes, the heroku deploy system requires gitt.		1	https://devcenter.heroku.com/articles/preparing-a-codebase-for-heroku-deployment#1-track-your-codebase-in-a-git-repository
project	deploy		Q: heroku 利用 git 的 deploy 機制為何? => use a remote branch named heroku		1	https://devcenter.heroku.com/articles/git#creating-a-heroku-remote
project	deploy		Q: How to create a remote branch for heroku deploy? => heroku git:remote -a your-app-name		1	https://devcenter.heroku.com/articles/git#for-an-existing-heroku-app
project	deploy		Q: 如何 deploy 你的 project 到 heroku? => push 到 heroku 的 main branch Command git push heroku main or Command git push heroku current-branch:main ex: git push heroku testbranch:main		1	https://devcenter.heroku.com/articles/git#deploying-code
project	limit	size	Q: repository size limination? => 600MB		1	https://devcenter.heroku.com/articles/git#repository-size
app	Remove		Q: How to remove a project
app	Start	start command	Q: How to start your program on heroku server? => Procfile		1	1. https://devcenter.heroku.com/articles/preparing-a-codebase-for-heroku-deployment#3-add-a-procfile 2. https://devcenter.heroku.com/articles/procfile
app	Start	port	Q: Which port can used to listen ? => app.listen(process.env.PORT); ex: let port = process.env.PORT; if (port == null \|\| port == "") { port = 8000; } app.listen(port);		1	https://devcenter.heroku.com/articles/preparing-a-codebase-for-heroku-deployment#4-listen-on-the-correct-port
app	runing	storage	Q: heroku 沒有 local filesystem 讓你放資料, how to do? => use other service such as Heroku Postgres or Amazon S3. Heroku Postgres, https://devcenter.heroku.com/articles/heroku-postgresql		1	https://devcenter.heroku.com/articles/preparing-a-codebase-for-heroku-deployment#5-use-a-database-or-object-storage-instead-of-writing-to-your-local-filesystem

井民全觀點 (Jing's Perspective)

2021年7月16日星期五

[cloud, heroku, react] Deploy your React app on Heroku

1. Setup the environment

2. Sample Project

2.1. Prepare the sample project

2.2. Deploy the project

2.3. Visit your app

2.4. Log

3. Hello word

3.1. Modify Code

3.2. Commit to the local repository

3.3. Deploy to heroku

3.4. Visit your app

4. React app

4.1. Create the client

4.2. Link to the express

4.3. Deploy to heroku

4.4. Visit your React app

4.5. Delpy Log

5. References

6. FAQ

2021年7月16日 星期五

[cloud, heroku, react] Deploy your React app on Heroku

1. Setup the environment

2. Sample Project

2.1. Prepare the sample project

2.2. Deploy the project

2.3. Visit your app

2.4. Log

3. Hello word

3.1. Modify Code

3.2. Commit to the local repository

3.3. Deploy to heroku

3.4. Visit your app

4. React app

4.1. Create the client

4.2. Link to the express

4.3. Deploy to heroku

4.4. Visit your React app

4.5. Delpy Log

5. References

6. FAQ

2021年7月16日星期五