# Deploy React Router Supabase to a VPS

> This guide will help you deploy the React Router SaaS boilerplate to a VPS.

*Canonical: https://makerkit.dev/docs/react-router-supabase-turbo/going-to-production/vps*

---

If you want to self-host your application, you can deploy the React Router SaaS boilerplate to a VPS. In this specific guide, **we will use Digital Ocean**, a popular cloud provider in the VPS space.

Much of the setup in this guide is going to similarly apply to other platforms, such as Hetzner, Linode, Vultr, etc.

## Generate the Dockerfile image in your project

In your own project, run the following command to generate the Dockerfile.

```bash
pnpm run turbo gen docker
```

This will create a `Dockerfile` in the root of your project. In addition, it will install some dependencies that may be required to build the project.

## 0. Create a Digital Ocean Droplet (or other platform)

From Digital Ocean (or any other platform), create a new Droplet. Use the specifications and settings you prefer.

## 1. Install Docker

To Install Docker, please follow the [official Docker installation guide](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04) in the Digital Ocean Community.

## 2. Add Firewall Rules

Add a firewall rule to allow inbound traffic on port 3000.

Please refer to the [Digital Ocean documentation](https://docs.digitalocean.com/products/networking/firewalls/how-to/create/) for more information.

## 3. Building the Docker image

We can **build the Docker image on the Droplet** or **build the image locally** and push it to a container registry.

If you don't have a powerful VPS, **it's recommended to build the image locally and push it to a container registry** (such as DockerHub, Github Container Registry, etc.).

Ideally, you can set up a Github Actions workflow to build the image and push it to a container registry automatically when you push a new commit to the repository.

In the next steps, we will build the image on the Digital Ocean Droplet. Only follow this section if you have a powerful VPS, otherwise the build will fail due to lack of memory/CPU.

### 3.1. Connect with Github repository

#### 3.1.1. Create a Personal Access Token

First, you need to create a Personal Access Token in Github to allow access to the repository. We will reference this token below as `<PAT>`.

#### 3.1.2. Pull the repository

Next, you need to pull the repository to the Digital Ocean Droplet.

```bash
git clone https://<PAT>@github.com/username/repo.git
```

NB: Replace `<PAT>` with the Personal Access Token you created in step 3.1.

#### 3.1.3. Install Node.js and dependencies

Navigate to the repository and install the dependencies.

First, set up Node.js and pnpm.

Download and install `nvm`:

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
```

Then run:

```bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
```

You can now install Node.js:

```
nvm install 20
```

Next, install PNPM globally:

```bash
npm install -g pnpm
```

Now, we can install the dependencies:

```bash
cd repo # Replace repo with the name of the repository
pnpm install
```

## 4. Create the Dockerfile

```bash
pnpm run turbo gen docker
```

## 5. Build the Docker Image on the Digital Ocean Droplet

Navigate to the repository and build the Docker image.
```bash
docker build -t rr-supabase-turbo .
```

If the build fails, it's possible it's out of memory. You can try to add more memory to the Digital Ocean Droplet.

```bash
docker build -t --memory 2g -e rr-supabase-turbo .
```

If the Droplet size allows it, you can try to add more memory to the build.

## 6. Environment Variables

Using the Dev Tools, generate the environment variables for the production environment. Copy the environment variables and paste them in the `apps/web/.env` file within the repository. This file gets never committed to the repository since it's ignored by the `.gitignore` file.

## 7. Run the Docker Container

First, ensure that the `.env` file is present in the `apps/web` directory.

Then, run the following command to run the Docker container:

```bash
docker run -d -p 3000:3000 rr-supabase-turbo --env-file apps/web/.env
```

## 8. Access the Application

You can now access the application at `http://<your-docker-host>:3000`.

## 9. Next Steps

Now that your application is running, you can start to configure the production environment. You will want to do the following:

- Configure Nginx to reverse proxy requests to the Docker container
- Add a custom domain name to Digital Ocean
- Set up a Firewall in Digital Ocean to allow inbound traffic on port 3000
- Set up a SSL certificate for your custom domain name with Let's Encrypt

After doing this, you will have a production-ready application that is fully self-hosted!