Cloudflare Pages Deployment

Note: This guide is for developers and administrators setting up the FG API platform. End users don't need to deploy anything - they can use the platform directly.

This guide covers deploying your FG API frontend to Cloudflare Pages.

What is Cloudflare Pages?

Cloudflare Pages is a JAMstack platform for frontend projects. It provides:

• Global CDN for fast loading

• Automatic deployments from Git

• Built-in security features

• Custom domain support

Deployment Steps

1. Connect Your Repository

1. Go to Cloudflare Pages
2. Sign up or log in
3. Click "Create a project"
4. Select "Connect to Git"
5. Choose your FG API repository
6. Select the client folder as the root directory

2. Configure Build Settings

Build Command: npm run buildBuild Output Directory: distRoot Directory: client

3. Set Environment Variables

In Cloudflare Pages dashboard:

1. Go to "Settings" → "Environment variables"
2. Add the following variables:

VITE_BASE_URL=https://your-railway-backend.railway.app

4. Deploy

1. Cloudflare will automatically deploy when you push to your repository
2. Check the "Deployments" tab for deployment status
3. Your frontend will be available at the provided Cloudflare Pages URL

Environment Variables

Required Variables

Variable	Description	Example
VITE_BASE_URL	Backend API URL	https://your-api.railway.app

Optional Variables

Variable	Description	Example
VITE_LOGIN_URL	Custom login endpoint	https://your-api.railway.app/app/login
VITE_REGISTER_URL	Custom register endpoint	https://your-api.railway.app/app/register
VITE_REFRESH_URL	Custom refresh endpoint	https://your-api.railway.app/app/refresh

Custom Domain

Setting Up Custom Domain

1. In Cloudflare Pages dashboard, go to "Custom domains"
2. Click "Set up a custom domain"
3. Enter your domain name
4. Cloudflare will automatically configure DNS and SSL

DNS Configuration

Cloudflare will automatically:

• Create necessary DNS records

• Provision SSL certificate

• Configure CDN settings

Build Configuration

Build Watch Paths

Configure Cloudflare Pages to only build when client code changes:

1. Go to "Settings" → "Builds"

2. Set "Build watch paths":

   • Include paths: client/*

   • Exclude paths: server/*

This prevents unnecessary builds when you change server code.

Performance Optimization

Automatic Optimizations

Cloudflare Pages automatically provides:

• Global CDN distribution

• Image optimization

• Minification and compression

• HTTP/2 and HTTP/3 support

Additional Optimizations

Your Vite build already includes:

• Code splitting

• Tree shaking

• Asset optimization

• Modern JavaScript features

Security Features

Built-in Security

Cloudflare Pages provides:

• DDoS protection

• WAF (Web Application Firewall)

• Bot protection

• SSL/TLS encryption

CORS Configuration

Ensure your backend allows requests from your Cloudflare Pages domain:

• Add your Cloudflare Pages URL to CORS configuration

• Use environment variables for dynamic configuration

Monitoring and Analytics

Cloudflare Analytics

1. Go to "Analytics" tab
2. View traffic statistics
3. Monitor performance metrics
4. Check for errors and issues

Custom Analytics

You can integrate additional analytics:

• Google Analytics

• Custom tracking solutions

• Performance monitoring tools

Troubleshooting

Common Issues

Build Failures

• Check build logs in "Deployments" tab

• Verify build command and output directory

• Check for TypeScript or linting errors

Environment Variable Issues

• Verify environment variables are set correctly

• Check variable names and values

• Ensure variables are available at build time

CORS Errors

• Verify backend CORS configuration

• Check frontend URL in backend environment variables

• Ensure proper credentials configuration

Getting Help

• Check Cloudflare Pages documentation

• Review build logs for specific errors

• Contact Cloudflare support

• Check FG API documentation