Deployment

You can use react-admin with Vite.js, Next.js, Remix, or any other React platform. Each of these platforms has its own way to deploy your application:

The general principles are the same. This tutorial explains how to deploy your React-admin application with create-react-admin (powered by Vite.js).

Building The Single Page Application

React-admin uses the Single Page Applications architecture. It means that your app can be bundled as a single JavaScript file and served by a simple static web server.

In an application initialized with create-react-admin, you can run the build command to compile your application:

npm run build
# or
yarn build

This creates a few files in the dist directory. Let’s have a look to what’s in there:

dist/
  ├ assets/
  │  └ index-F74jyUxd.js
  ├ favicon.ico
  ├ index.html
  └ manifest.json

The entry point is index.html. It contains a <script> tag that loads the app from the assets directory.

To deploy your application, you just need to serve this dist directory with all URLs handled by index.html.

There are multiple ways to do so, let’s see a few of them.

Deploying To GitHub Pages

GitHub Pages can serve static assets from a GitHub repository. You can automate the build step by setting up a GitHub Actions workflow.

First, configure the source of your GitHub Pages to GitHub Actions.

Then, initialize a new workflow in .github/workflows/deploy.yml with the following content:

name: Build and deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build the single-page application
    runs-on: ubuntu-latest
    environment: github-pages
    steps:
      # Pull the latest version of the application.
      - uses: actions/checkout@v4

      # Setup NodeJS tools.
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: Enable corepack to use latest stable yarn
        run: corepack enable

      # Build the React-admin application.
      - name: Build
        run: yarn build
        
      # Upload the built application as a GitHub Pages artifact.
      - name: Upload static files as artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: dist/

  deploy:
    name: Deploy to GitHub Pages
    runs-on: ubuntu-latest
    needs: build
      
    environment:
      name: github-pages
      url: $

    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write      # to deploy to Pages
      id-token: write   # to verify the deployment originates from an appropriate source

    steps:
      # Deploy the GitHub Pages artifact.
      - name: Deploy artifact to GitHub Pages
        uses: actions/deploy-pages@v4

This workflow will run every time you push or merge something in the main branch of your repository. You can find the URL of the deployed website in Settings > Pages in your GitHub repository.

Deploying to Cloudflare

To deploy to Cloudflare Pages, you need to have a Cloudflare account. First, retrieve your account ID from Cloudflare, the documentation on how to retrieve it is available on the Cloudflare documentation

Then, create a new API token from your Cloudflare Profile page:

  • First click on Create Token
  • Then on the Edit Cloudflare Workers template
  • Select your organization inside the Account Resources
  • Select All Zones for Zone Resources
  • Then Continue to Summary
  • Then Create Token.

More information on how to create an API token is available on the Cloudflare documentation.

To create a new Cloudflare Page App, go to your Cloudflare dashboard, then on Compute (workers) > Workers & Pages > Create > Pages tab. Create a new pages from direct upload, enter your project name and then click on Create Project, then go back to the Compute page.

Create a New Cloudflare Pages App

Once you have configured your API token and retrieved your Account ID, you can setup the following secrets in your repository by going to Settings > Secrets and variables > Actions on your GitHub repository:

# Your Cloudflare API token
CLOUDFLARE_API_TOKEN=

# Your Cloudflare Account ID
CLOUDFLARE_ACCOUNT_ID=

# The Cloudflare Pages project name
CLOUDFLARE_PROJECT_NAME=

Once your project has been configured, initialize a new workflow in your repository .github/workflows/deploy.yml with the following content:

name: Build and deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build the single-page application
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: lts/*

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Upload dist folder as an artifact
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist

  deploy:
    name: Deploy to Cloudflare
    runs-on: ubuntu-latest
    needs: build

    permissions:
      contents: read
      deployments: write

    steps:
      - name: Download prebuilt admin
        uses: actions/download-artifact@v4
        with:
          name: dist
          path: dist

      - name: Display structure of downloaded files
        run: ls -R

      - name: Deploy artifact to Cloudflare
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: $
          accountId: $
          command: pages deploy dist --project-name=$
          gitHubToken: $

Now, each time your code is pushed to the main branch, GitHub will automatically deploy your app to your Cloudflare Pages.