React (Vite / CRA) Integration
Add your AEO blog to a React single-page application.
React apps built with Vite or Create React App (CRA) compile to static files (HTML, JS, CSS). Static files cannot proxy requests, so you need to configure proxying at the server or hosting level. This guide covers dev-time proxying with Vite and production setup for different hosting platforms.
Why React SPAs Need Extra Setup
Unlike Next.js or Nuxt, a React SPA is just a bundle of static files served by a web server. The React app itself runs entirely in the browser and cannot intercept or proxy server requests. That means:
- In development: Vite's built-in dev server can proxy requests (great for testing).
- In production: you need to configure your actual web server (Nginx, Apache) or hosting platform (Vercel, Netlify) to handle the proxying.
Development: Configure Vite proxy
For local development, add a proxy to your vite.config.ts:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/blog": {
target: "https://aeo.how",
changeOrigin: true,
secure: true,
},
},
},
});Visit localhost:5173/blog to test. The Vite dev server proxies /blog requests to AEO.
This only works during development. You still need a production proxy setup.
Production: Choose your hosting method
Pick the method that matches where your React app is hosted:
- Vercel: see the Cloud Hosting guide (one line in vercel.json).
- Netlify: see the Cloud Hosting guide (one line in netlify.toml).
- Nginx: see the Apache/Nginx guide.
- Apache: see the Apache/Nginx guide.
If you're using Create React App (CRA), the setup is identical: CRA also builds to static files.
Test your production setup
After deploying, visit yourdomain.com/blog. You should see your AEO blog. Make sure to test article pages too (e.g., yourdomain.com/blog/your-article-slug).
Vite's proxy is dev-only. Always configure a production proxy on your server or hosting platform.
Create React App users: CRA's proxy field in package.json only works for API calls, not page proxying. Use the server/hosting level approach.