Deploying to Cloudflare Workers in Remix - Mini Project: Build & Apply

Deploying a Remix App to Cloudflare Workers

📖 Scenario: You have built a simple Remix app and want to deploy it to Cloudflare Workers to make it available on the internet with fast global delivery.

🎯 Goal: Set up a Remix project for deployment on Cloudflare Workers by configuring the project, adding deployment settings, and creating the necessary files to publish the app.

📋 What You'll Learn

Create a Remix project configuration file for Cloudflare Workers

Add a Cloudflare account ID configuration variable

Write the deployment script using Wrangler CLI commands

Add the final deployment configuration file for Cloudflare Workers

💡 Why This Matters

🌍 Real World

Deploying web apps to Cloudflare Workers lets you serve your app globally with low latency and easy scaling.

💼 Career

Many companies use Cloudflare Workers to deploy fast, serverless web apps. Knowing this deployment process is valuable for frontend and full-stack developers.

1

Create Remix Cloudflare Workers Configuration

Create a file named remix.config.js with the exact content: module.exports = { serverBuildTarget: 'cloudflare-workers' } to configure Remix for Cloudflare Workers deployment.

Remix

# Create remix.config.js with serverBuildTarget set to 'cloudflare-workers'
# Your code here

Hint

This file tells Remix to build the app for Cloudflare Workers environment.

2

Add Cloudflare Account ID Configuration

In the wrangler.toml file, add a line setting account_id to the exact string "1234567890abcdef1234567890abcdef" to specify your Cloudflare account.

Remix

module.exports = { serverBuildTarget: 'cloudflare-workers' }

# Add account_id = "1234567890abcdef1234567890abcdef" in wrangler.toml
# Your code here

Hint

The account_id connects your deployment to your Cloudflare account.

3

Write Deployment Script Using Wrangler CLI

Add a deploy script in package.json with the exact command remix build && wrangler deploy to enable deploying your app with a simple command.

Remix

# wrangler.toml
name = "my-remix-app"
main = "worker.js"
account_id = "1234567890abcdef1234567890abcdef"
workers_dev = true
compatibility_date = "2024-06-01"

# Add "deploy": "remix build && wrangler deploy" script in package.json
# Your code here

Hint

This script lets you deploy your app by running npm run deploy.

4

Add Final Worker Entry Point

Create a file named worker.js with the exact content: import { createRequestHandler } from '@remix-run/cloudflare-workers'; import * as build from './build'; export default { fetch: createRequestHandler({ build }) }; to handle requests in Cloudflare Workers.

Remix

# wrangler.toml
name = "my-remix-app"
main = "worker.js"
account_id = "1234567890abcdef1234567890abcdef"
workers_dev = true
compatibility_date = "2024-06-01"

# package.json
{
  "name": "my-remix-app",
  "version": "1.0.0",
  "scripts": {
    "deploy": "remix build && wrangler deploy"
  }
}

# Create worker.js with Cloudflare Workers request handler
# Your code here

Hint

This file is the entry point for your app on Cloudflare Workers.