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.