Deploy a React App

React, also known as React.js or ReactJS, is a popular JavaScript library developed by Meta for building user interfaces, especially for web and native applications.

React simplifies the process of creating interactive and dynamic UIs by breaking them down into reusable components.

This guide covers how to deploy a React app to Railway in four ways:

One-click deploy from a template.
From a GitHub repository.
Using the CLI.
Using a Dockerfile.

Now, let's create a React app!

Create a React App

Note: If you already have a React app locally or on GitHub, you can skip this step and go straight to the Deploy React App on Railway.

To create a new React app, ensure that you have Node installed on your machine.

Run the following command in your terminal to create a new React app using Vite:

npm create vite@latest helloworld -- --template react

A new React app will be provisioned for you in the helloworld directory.

Run the React App locally

Next, cd into the directory and install the dependencies.

npm install

Start the Vite development server by running the following command:

npm run dev

Open your browser and go to http://localhost:5173 to see your app.

Deploy the React App to Railway

Railway offers multiple ways to deploy your React app, depending on your setup and preference.

One-Click Deploy from a Template

If you’re looking for the fastest way to get started, the one-click deploy option is ideal. It sets up a React app with Caddy to serve the dist folder.

Click the button below to begin:

We highly recommend that you eject from the template after deployment to create a copy of the repo on your GitHub account.

Note: You can also choose from a variety of React app templates created by the community.

Deploy from the CLI

Install the Railway CLI:
- Install the CLI and authenticate it using your Railway account.
Initialize a Railway Project:
- Run the command below in your React app directory.
```
railway init
```
- Follow the prompts to name your project.
- After the project is created, click the provided link to view it in your browser.

Set Up Config for a Production Ready Server:

To ensure we're not running a development server in production, we'll add two files to our app directory to configure Railway to serve our app using the fast, reliable, and production-ready Caddy server.
A Caddyfile and nixpacks.toml file.

Caddyfile

# global options
{
    admin off # theres no need for the admin api in railway's environment
    persist_config off # storage isn't persistent anyway
    auto_https off # railway handles https for us, this would cause issues if left enabled
    # runtime logs
    log {
        format json # set runtime log format to json mode 
    }
    # server options
    servers {
        trusted_proxies static private_ranges 100.0.0.0/8 # trust railway's proxy
    }
}

# site block, listens on the $PORT environment variable, automatically assigned by railway
:{$PORT:3000} {
    # access logs
    log {
        format json # set access log format to json mode
    }

    # health check for railway
    rewrite /health /*

    # serve from the 'dist' folder (Vite builds into the 'dist' folder)
    root * dist

    # enable gzipping responses
    encode gzip

    # serve files from 'dist'
    file_server

    # if path doesn't exist, redirect it to 'index.html' for client side routing
    try_files {path} /index.html
}

nixpacks.toml

# https://nixpacks.com/docs/configuration/file
# set up some variables to minimize annoyance
[variables]
    NPM_CONFIG_UPDATE_NOTIFIER = 'false' # the update notification is relatively useless in a production environment
    NPM_CONFIG_FUND = 'false' # the fund notification is also pretty useless in a production environment

# download caddy from nix
[phases.caddy]
    dependsOn = ['setup'] # make sure this phase runs after the default 'setup' phase
    nixpkgsArchive = 'ba913eda2df8eb72147259189d55932012df6301' # Caddy v2.8.4 - https://github.com/NixOS/nixpkgs/commit/ba913eda2df8eb72147259189d55932012df6301
    nixPkgs = ['caddy'] # install caddy as a nix package

# format the Caddyfile with fmt
[phases.fmt]
    dependsOn = ['caddy'] # make sure this phase runs after the 'caddy' phase so that we know we have caddy downloaded
    cmds = ['caddy fmt --overwrite Caddyfile'] # format the Caddyfile to fix any formatting inconsistencies

# start the caddy web server
[start]
    cmd = 'exec caddy run --config Caddyfile --adapter caddyfile 2>&1' # start caddy using the Caddyfile config and caddyfile adapter

Note: Railway uses Nixpacks to build and deploy your code with zero configuration. You can customize your deployment configuration by adding a nixpacks.toml or nixpacks.json file to your app.

Deploy the Application:
- Use the command below to deploy your app:
```
railway up
```
- This command will scan, compress and upload your app's files to Railway. You’ll see real-time deployment logs in your terminal.
- Once the deployment completes, go to View logs to check if the service is running successfully.
Set Up a Public URL:
- Navigate to the Networking section under the Settings tab of your new service.
- Click Generate Domain to create a public URL for your app.

screenshot of the deployed React service

Deploy from a GitHub Repo

To deploy a React app to Railway directly from GitHub, follow the steps below:

Create a New Project on Railway:
- Go to Railway to create a new project.
Deploy from GitHub:
- Select Deploy from GitHub repo and choose your repository.
  - If your Railway account isn’t linked to GitHub yet, you’ll be prompted to do so.
Deploy the App:
- Click Deploy to start the deployment process.
- Once the deployed, a Railway service will be created for your app, but it won’t be publicly accessible by default. Note: Your app will be running via a development server, which is not ideal. We'll fix that in the next step.
Set Up Config for a Production Ready Server:
- Follow step 3 mentioned in the CLI guide.
Redeploy the Service:
- Click Deploy on the Railway dashboard to apply your changes.
Verify the Deployment:
- Once the deployment completes, go to View logs to check if the server is running successfully.
Set Up a Public URL:
- Navigate to the Networking section under the Settings tab of your new service.
- Click Generate Domain to create a public URL for your app.

Use a Dockerfile

Create a Dockerfile in the helloworld or React app's root directory.

Add the content below to the Dockerfile:

# Use the Node alpine official image
# https://hub.docker.com/_/node
FROM node:lts-alpine AS build

# Set config
ENV NPM_CONFIG_UPDATE_NOTIFIER=false
ENV NPM_CONFIG_FUND=false

# Create and change to the app directory.
WORKDIR /app

# Copy the files to the container image
COPY package*.json ./

# Install packages
RUN npm ci

# Copy local code to the container image.
COPY . ./

# Build the app.
RUN npm run build

# Use the Caddy image
FROM caddy

# Create and change to the app directory.
WORKDIR /app

# Copy Caddyfile to the container image.
COPY Caddyfile ./

# Copy local code to the container image.
RUN caddy fmt Caddyfile --overwrite

# Copy files to the container image.
COPY --from=build /app/dist ./dist

# Use Caddy to run/serve the app
CMD ["caddy", "run", "--config", "Caddyfile", "--adapter", "caddyfile"]

The Dockerfile will use Caddy to serve the React app.

Add a Caddyfile to the app's root directory:

# global options
{
    admin off # theres no need for the admin api in railway's environment
    persist_config off # storage isn't persistent anyway
    auto_https off # railway handles https for us, this would cause issues if left enabled
    # runtime logs
    log {
        format json # set runtime log format to json mode 
    }
    # server options
    servers {
        trusted_proxies static private_ranges 100.0.0.0/8 # trust railway's proxy
    }
}

# site block, listens on the $PORT environment variable, automatically assigned by railway
:{$PORT:3000} {
    # access logs
    log {
        format json # set access log format to json mode
    }

    # health check for railway
    rewrite /health /*

    # serve from the 'dist' folder (Vite builds into the 'dist' folder)
    root * dist

    # enable gzipping responses
    encode gzip

    # serve files from 'dist'
    file_server

    # if path doesn't exist, redirect it to 'index.html' for client side routing
    try_files {path} /index.html
}