How To Deploy a React Application on Dokku

Dokku has become one of the most popular PaaS (Platform as a Service) on the market. In particular, Dokku is an extensible, open-source PaaS that runs on a single server.

Dokku enables you to build apps on the fly through a simple git push command via either Dockerfile or by auto-detecting the language with Buildpacks. In detail, it creates a Docker container based on the built image of your app. Then, it starts the container, launching your application.

Let's now learn what you need to do to deploy a React app on Dokku!

Deploying a React Application on Dokku

You need five simple steps to deploy a React SPA (Single Page Application) on Dokku. Let's dig into them.

1. Set up Dokku

You can learn how to set up a Dokku server here. Then, follow this guide to learn how to deploy your application. After initializing your Dokku machine, launch the following command to create a new Dokku app:

dokku apps:create <YOUR_REACT_APP_NAME>

Replace <YOUR_REACT_APP_NAME> with the name you want to give to your React app on Dokku. For example, let's call it my-react-app:

dokku apps:create my-react-app

2. Add the Dokku Git Remote

To deploy your React app on Dokku, you have to launch a git push command involving a specific remote. Enter your React project in the terminal, and add the Dokku git remote with the following command:

git remote add <REMOTE_NAME> dokku@<YOUR_SERVER_IP>:<YOUR_REACT_APP_NAME>

Replace <REMOTE_NAME> with the name you want to give to your git remote. For example, it may be dokku, production, etc. Also, Replace <YOUR_SERVER_IP> with the domain or IP address of your server/VPS. Similarly, replace <YOUR_REACT_APP_NAME> with the name of the Dokku application you used in the first step.

In this example, the command will look as follows:

git remote add production dokku@app.my-domain.com:my-react-app

This way, you just added the Dokku git remote. You can now deploy your application via a git push command. But first, you need an application server!

3 Set Up a Node.js Server

Now, you should set up a server. This is because any React app needs to be served through an application server. You can configure a Node.js Express server with just a few lines of code.

First, make sure to add express to your project's dependencies with the following command:

npm i express

Then, create a server.js file in the root folder of your React project and initialize it as below:

const express = require("express")
const path = require("path")

const app = express()
const PORT = process.env.PORT || 3000

app.use(express.static(path.join(__dirname, "build")))

app.get("*", function (req, res) {
  res.sendFile(path.join(__dirname, "build", "index.html"))
})

app.listen(PORT)

As you can see, this file acts as a Node.js Express server. In particular, it initializes an Express server and uses it to serve the /build/index.html file. This is the index file produced by the React build process via the npm run build command.

The * qualifier specifies that the server will respond with the index.html file to any HTTP GET request received. This is exactly what you need to do to make the SPA front-end routing system work.

Keep in mind that you can customize this Express server to deal with CSP (Content Security Policy) or other HTTP headers with helmet.

4. Create a Procfile

The Procfile allows you to specify the run command executed by Dokku to launch your application. In detail, the Procfile will be extracted from the Docker image created by Dokku after a deploy. Then the commands contained in the Procfile will be passed to the docker run command to start your application.

Create a Procfile file and place it in /app or the folder defined in your Dockerfile as WORKDIR. By default, the root folder of your repository will be used as the document root. So, placing the Procfile in the root directory of your app should work.

Then, initialize it as follows:

web: node server.js

This command will be used at the end of each Dokku deploy to start the Node.js Express server and serve your React SPA.

5. Deploy to Dokku

You are now ready to deploy your React application on Dokku. All you have to do is commit the changes and launch the following command:

git push <REMOTE_NAME>

Replace <REMOTE_NAME> with the name you gave to the Dokku Git Remote in step 2. In this example, the command becomes:

git push production

Wait for the deployment process on Dokku to end. First, Dokku will build your React application by running npm run build. Then, it will launch the command contained in the Procfile and launch your application consequently.

You should now be able to visit your React app in the browser at the IP address/domain name of your server.

Congrats! You just learned how to deploy a React app on Dokku!

You may also be interested in learning how to deploy and host a React application on Apache server.

Conclusion

In this article, you learned everything you need to know to deploy a React app on Dokku. Dokku is one of the most popular PaaS available, and it allows you to deploy an application in minutes. Here, you saw how to configure it and what you need to do in your React app to make it deployable on Dokku.

Thanks for reading! I hope you found this article helpful.

The post "How To Deploy a React Application on Dokku" appeared first on Writech.