TutorialsDeploy to Cloudflare

Deploy to Cloudflare

Using the edge-runtime branch

When developing a new project with ShipAny, it’s recommended to pull the edge-runtime branch, which supports one-click deployment to Cloudflare without additional modifications.

Terminal
git clone -b edge-runtime [email protected]:shipanyai/shipany-template-one.git my-shipany-project

If you have previously pulled the project from the main branch, you can refer to the deployment process below for necessary modifications to deploy to Cloudflare.

Deployment Process

  1. Modify all page files (page.tsx) and API files (route.ts) in the app directory

Add this line:

app/[locale]/(default)/new-page/page.tsx
export const runtime = "edge";

add-runtime

  1. Create a .env.production file in the project root directory
Terminal
cp .env.example .env.production

Update all configurations in the .env.production file with production environment settings.

  1. Create a wrangler.toml file in the project root directory
Terminal
cp wrangler.toml.example wrangler.toml

Copy the production environment variables configured in .env.production to the [vars] section in wrangler.toml, and modify the project name in wrangler.toml

wrangler

  1. Deploy to Cloudflare

Run the following command in the project root directory:

Terminal
npm run cf:deploy

Follow the prompts to enter the project name and branch name (main), connect to your Cloudflare account, and wait for the deployment to complete.

cfdeploy

  1. Go to the Cloudflare console to see your successfully deployed project

cfconsole

  1. Access the project

You can access the project using the default generated domain. Bind a custom domain to officially launch.

cfpreview

References