PokeAPI Deployment Sample

This repository shows a simple full-stack setup that can be deployed to both Vercel and Cloudflare Workers without monorepo tooling:

• frontend/: React + Vite single-page app
• backend/: stateless Hono API that fetches data from pokeapi.co

The frontend was bootstrapped with create-vite, and the backend was bootstrapped with create-hono.

Local development

Run the backend first:

cd backend
npm install
npm run dev

Then run the frontend in a second terminal:

cd frontend
npm install
cp .env.example .env
npm run dev

The frontend reads VITE_API_BASE_URL. For local development it should point to http://localhost:8787.

Deploy to Vercel

Deploy the apps as two separate Vercel projects.

Frontend

1. Import the repository into Vercel.
2. Set the project root directory to frontend.
3. Use the default Vite build settings:
   • Build command: npm run build
   • Output directory: dist
4. Set VITE_API_BASE_URL to your deployed backend URL.

frontend/vercel.json includes the SPA rewrite recommended by Vercel for Vite SPAs.

Backend

1. Import the same repository into a second Vercel project.
2. Set the project root directory to backend.
3. Deploy with the default Hono setup. Vercel detects the default export in src/index.ts.

For local Vercel emulation, use vercel dev inside backend/.

Deploy to Cloudflare Workers

Deploy the apps as two separate Workers projects.

Frontend

cd frontend
npm install
npm run deploy:cloudflare

This uses the Cloudflare Vite plugin and frontend/wrangler.jsonc. The SPA fallback is configured with assets.not_found_handling = "single-page-application", and the deploy script points Wrangler at the generated dist/wrangler.json output from vite build.

Backend

cd backend
npm install
npm run deploy

The backend uses the standard Cloudflare Workers Hono setup from create-hono.

Notes

• The backend is stateless and only proxies PokeAPI data.
• The frontend is provider-agnostic and talks to the backend through VITE_API_BASE_URL.
• No platform-specific runtime code is required in the React app.
• The current create-vite output uses Vite 8, which expects Node 20.19+ or 22.12+.

Documentation used

• Vite on Vercel
• Hono on Vercel
• React + Vite on Cloudflare Workers
• Hono on Cloudflare Workers
• Cloudflare Vite plugin static assets
• create-hono