Deployment
Learn how to deploy your ShipTanStarter project to Cloudflare Workers
This guide will help you deploy your ShipTanStarter project to Cloudflare Workers.
Note on Worker Size Limits
Cloudflare Worker size limit is 3 MiB on the Workers Free plan, and 10 MiB on the Workers Paid plan. After building your Worker, wrangler shows both the original and compressed sizes, only the latter (compressed size) matters for the limit.
Total Upload: 10421.14 KiB / gzip: 2241.95 KiBShipTanStarter template is approximately 2.3 MB, so you can deploy even on the Free plan. However, if you need Cloudflare Email Service, you must upgrade to a paid plan. We recommend upgrading to the Worker Paid Plan for more features and free quotas.
Pre-deployment Preparation
Before deploying, make sure you have completed the following:
- Project Initialization: Follow the Getting Started guide to complete project initialization, install dependencies, and run locally
- Environment Variables: Follow the Environment Configuration guide to configure all necessary environment variables for your site's features
Deployment Steps
Configure Project Name
Update the wrangler.jsonc file with your project name:
{
"name": "your-project-name" // Change to your project name
}Configure Custom Domain
Update the wrangler.jsonc file with your website domain:
"routes": [
{
"pattern": "your-domain.com", // Change to your domain
"custom_domain": true
}
],About Custom Domains
The above configuration assumes your domain is already hosted on Cloudflare. If your domain is not yet hosted on Cloudflare, you can remove the routes configuration for now and manually bind a custom domain in the Cloudflare Dashboard after deployment.
Setup Environment Variables
Copy .env to .env.production and update values with production settings:
cp .env .env.production
# Edit .env.production with production values
# VITE_BASE_URL='https://your-domain.com'
# STRIPE_SECRET_KEY='your-stripe-live-secret-key'
# Other variables - carefully check and update as needed for productionSet Build-time Environment Variables
Run the following command to sync build-time environment variables to GitHub Secrets:
pnpm sync-github-secretsThis script performs two operations internally:
- Sync deploy.yml with .env.production: Ensures the GitHub Actions workflow's env block includes all build-time variables (
VITE_*,CLOUDFLARE_*) defined in.env.production. Missing environment variables are automatically added. - Push secrets to GitHub: Reads all non-empty variables from
.env.productionand sets them as GitHub Secrets viagh secret set.
Ensure .env.production exists and gh is installed and authenticated.
Prerequisites
- GitHub CLI must be logged in:
gh auth status .env.productionfile must contain build-time environment variables- Environment variables with
VITE_*andCLOUDFLARE_*prefixes are synced to GitHub by default
Set Runtime Environment Variables
Run the following command to set runtime environment variables for the Worker:
pnpm sync-worker-secretsThis command internally executes wrangler secret bulk .env.production, reading non-empty variables from .env.production and bulk-setting them as Worker runtime secrets via the Wrangler CLI.
Note on Runtime Secrets
- Runtime secrets are injected at Worker execution time via
process.env. - Environment variables with
VITE_*prefix are automatically excluded as they are build-time only. - To update runtime secrets, re-run
pnpm sync-worker-secrets.
Build & Deploy
If you prefer manual build and deploy:
pnpm run deployThe template supports automated build and deploy via GitHub Actions.
The workflow file is located at .github/workflows/deploy.yml and automatically builds and deploys on every push to the main branch.
Enable workflow: Go to your GitHub repository's Actions tab and enable "GitHub Actions" if prompted.
Workflow process: On every push to main, the workflow will:
- Checkout code
- Install dependencies
- Build with build-time environment variables from GitHub Secrets
- Deploy to Cloudflare Workers via
wrangler deploy
Monitor deployment progress in your repository's Actions tab.
Environment Variables Comparison
| Type | Command | When Used | Example |
|---|---|---|---|
| Build-time secrets | pnpm sync-github-secrets | pnpm build (baked into JS) | VITE_BASE_URL, VITE_STRIPE_PRICE_* |
| Runtime secrets | pnpm sync-worker-secrets | Worker execution time (process.env) | STRIPE_SECRET_KEY, BETTER_AUTH_SECRET |
Why both are needed
- Build-time secrets must be injected at build time because they are embedded in the client-side bundle. Changing them requires a rebuild.
- Runtime secrets cannot be set via GitHub Secrets because the Worker reads them from the runtime environment, not from the build context.
References
- Cloudflare Workers Documentation
- Cloudflare D1 Documentation
- Cloudflare R2 Documentation
- Wrangler CLI Reference
Video Tutorials
Coming soon.
Next Steps
Now that you understand how to deploy your website to Cloudflare Workers, explore these related topics: