Deploy with Cloudflare

In this chapter you will learn how to deploy the frontend source code to Cloudflare Pages.

Prerequisites

• Register a Cloudflare account.
• Clone the frontend source code and push to your GitHub repository.

Setup Redis with Upstash

Cloudflare Pages/Workers do not include a built-in Redis service. Upstash is the recommended serverless Redis provider that integrates natively with Cloudflare.

Create an Upstash Redis database

1. Sign up at Upstash Console.
2. Click "Create Database" and select a region close to your users.
3. Once created, navigate to the database details page.
4. Copy the connection details:
   • REDIS_HOST: The endpoint URL (e.g., xxx.upstash.io)
   • REDIS_PORT: Usually 6379 or the TLS port 6380
   • REDIS_PASSWORD: The password from the database details
   • REDIS_TLS: Set to true for secure connections

Configure environment variables

Add these Redis environment variables to your .env file:

REDIS_CACHE=true
REDIS_HOST=your-database.upstash.io
REDIS_PORT=6379
REDIS_PASSWORD=your_upstash_password
REDIS_TLS=true

Cloudflare integration (optional)

You can also set up the Upstash integration directly in Cloudflare:

1. Go to Cloudflare Dashboard → Workers & Pages → Your project.
2. Navigate to Settings → Integrations.
3. Find and add the Upstash integration.
4. Follow the prompts to connect your Upstash account.

Deploy from a local machine

• Due to this issue, just make sure your .npmrc file has the following content:

shamefully-hoist=true
strict-peer-dependencies=false

• Install Wrangler

pnpm install wrangler --save-dev

• Make sure the Frontend app has already generated an .env file
• Build your project for Cloudflare Pages:

npx nuxi build --preset=cloudflare_pages

• Then deploy. However, for the first time, it will ask you to create a project:

wrangler pages deploy dist/

Automation with GitHub Actions

Setup GitHub Secrets & variables

• In GitHub Secrets, add CLOUDFLARE_API_TOKEN with API token value.
  • Create an API token in the Cloudflare dashboard with the "Cloudflare Pages — Edit" permission.
• In GitHub environment variables, create new environment named production and fill it with all environment variables in .env.template.
  • Besides production, we can add new values for the same variable names in multiple environments such as development, staging.

Setup pipeline

To trigger the deployment automatically, we can attach the GitHub Actions.

• Create a .github/workflows/publish.yml file in your repository with the below sample content.

WARNING

Please note that this pipeline is just a sample. There are some points need to update for a specific purpose

on:
  push:
    # Specify the pipeline trigger
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Cloudflare Pages Deployment
    # Specify the environment name
    environment: production
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          version: 8
          run_install: false

      - name: Install dependencies
        run: |
          pnpm install

      - name: Build env file
        run: |
          touch .env
          echo COMPANY_NAME=${{ vars.COMPANY_NAME }} >> .env
          echo ORIGIN=${{ vars.ORIGIN }} >> .env
          echo REDIS_CACHE=${{ vars.REDIS_CACHE }} >> .env
          echo REDIS_HOST=${{ vars.REDIS_HOST }} >> .env
          echo REDIS_PORT=${{ vars.REDIS_PORT }} >> .env
          echo REDIS_PASSWORD=${{ vars.REDIS_PASSWORD }} >> .env
          echo REDIS_TLS=${{ vars.REDIS_TLS }} >> .env
          echo APP_NAME=${{ vars.APP_NAME }} >> .env
          echo APP_SECRET=${{ vars.APP_SECRET }} >> .env
          echo DATABASE_URL=${{ vars.DATABASE_URL }} >> .env

      - name: Build code
        run: |
          npx nuxi build --preset=cloudflare_pages

      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@v1.5.0
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: YOUR_ACCOUNT_ID
          projectName: YOUR_PROJECT_NAME
          directory: dist
          wranglerVersion: "3"

• Replace YOUR_ACCOUNT_ID with your account ID. Get it from the dashboard URL. E.g: https://dash.cloudflare.com/<ACCOUNT_ID>/pages.
• Replace YOUR_PROJECT_NAME with the appropriate value.

Custom domain

When deploying your Pages project, you may wish to point custom domains (or subdomains) to your site. Cloudflare has an instruction.