How To Deploy a React Application on Dokku
Tags: docker, javascript, programming, softwaredevelopment
Published: 2024-01-19 21:27:16

[Dokku](https://dokku.com/) has become one of the most popular PaaS ([Platform as a Service](https://en.wikipedia.org/wiki/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](https://docs.docker.com/engine/reference/builder/) or by auto-detecting the language with [Buildpacks](https://buildpacks.io/). 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](https://en.wikipedia.org/wiki/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](http://dokku.viewdocs.io/dokku/getting-started/installation/). Then, follow [this](https://dokku.com/docs/deployment/application-deployment/) guide to learn how to deploy your application. After initializing your Dokku machine, launch the following command to create a new Dokku app:

```shell
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`:

```shell
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](https://git-scm.com/docs/git-remote). Enter your React project in the terminal, and add the Dokku git remote with the following command:

```shell
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:

```shell
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`](https://www.npmjs.com/package/express) to your project's dependencies with the following command:

```shell
npm i express
```

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

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)) or other HTTP headers with [`helmet`](https://www.npmjs.com/package/helmet).

#### 4\. Create a Procfile

The [`Procfile`](https://dokku.com/docs/deployment/builders/dockerfiles/#procfiles-and-multiple-processes) 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`](https://docs.docker.com/engine/reference/run/) command to start your application.

Create a `Procfile` file and place it in `/app` or the folder defined in your [`Dockerfile`](https://dokku.com/docs/deployment/builders/dockerfiles/) 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:

```shell
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](https://github.com/git-guides/git-commit) and launch the following command:

```shell
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:

```shell
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](https://writech.run/blog/deploying-and-hosting-a-react-app-on-an-apache-server-b7121dffb07a).

## 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](https://writech.run/blog/how-to-deploy-a-react-application-on-dokku-afd8ed8887fa/)" appeared first on [Writech](https://writech.run)._