Deploy React

This guide will help you deploy a React application to Deployxa.

Overview

React is a JavaScript library for building user interfaces. Deployxa provides optimized deployments for React applications with automatic configuration.

Features:

• Automatic framework detection
• Vite and Create React App support
• Static site generation
• Automatic HTTPS
• Global CDN
• Zero configuration

Prerequisites

• A React application (Vite or Create React App)
• A GitHub repository with your code
• A Deployxa account

Quick Start

1. Create Your React App

Using Vite (Recommended):

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

Using Create React App:

npx create-react-app my-react-app
cd my-react-app

2. Push to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/my-react-app.git
git push -u origin main

3. Deploy to Deployxa

1. Go to Deployxa Dashboard
2. Click "New Project"
3. Select your GitHub repository
4. Deployxa will automatically detect React
5. Click "Deploy"

Your app will be live in under 30 seconds!

Configuration

Detected Settings

Deployxa automatically detects these settings:

Setting	Value
Framework	React
Build Command	npm run build
Output Directory	dist (Vite) or build (CRA)
Start Command	Static site (no server needed)
Port	80

Custom Configuration

If you need to customize settings:

1. Go to Project → Settings → Build
2. Modify settings as needed
3. Save changes

Example Custom Settings:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "installCommand": "npm ci"
}

Environment Variables

Adding Environment Variables

1. Go to Project → Environment
2. Click "Add Variable"
3. Enter key and value
4. Click "Save"

Common React Environment Variables:

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My React App
REACT_APP_API_URL=https://api.example.com
REACT_APP_TITLE=My React App

Note:

• Vite uses VITE_ prefix
• Create React App uses REACT_APP_ prefix
• Variables are embedded at build time

Using Environment Variables

In Vite:

const apiUrl = import.meta.env.VITE_API_URL;
const appTitle = import.meta.env.VITE_APP_TITLE;

In Create React App:

const apiUrl = process.env.REACT_APP_API_URL;
const appTitle = process.env.REACT_APP_TITLE;

Build Process

What Happens During Build

1. Install Dependencies: npm install or npm ci
2. Run Build: npm run build
3. Optimize Assets: Minify JS, CSS, images
4. Generate Static Files: Create optimized HTML, JS, CSS
5. Deploy to CDN: Distribute to global edge network

Build Output

React generates:

• dist/ or build/ - Build output directory
• index.html - Main HTML file
• assets/ - JavaScript and CSS bundles
• Static assets (images, fonts)

Routing

Client-Side Routing

For single-page applications with routing:

React Router:

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Handling 404s

Configure your deployment to handle client-side routing:

Option 1: Redirect to index.html

Deployxa automatically handles this for React apps.

Option 2: Custom 404 page

Create a 404.html file in your public directory.

Custom Domains

Adding a Custom Domain

1. Go to Project → Domains
2. Click "Add Domain"
3. Enter your domain (e.g., example.com)
4. Configure DNS records
5. Wait for verification

DNS Configuration

For Apex Domain (example.com):

Type: A
Name: @
Value: 76.76.21.21

For Subdomain (www.example.com):

Type: CNAME
Name: www
Value: cname.deployxa.com

SSL Certificate

Deployxa automatically provisions SSL certificates:

• Free Let's Encrypt certificates
• Automatic renewal
• HTTPS enforced
• Wildcard support

Performance Optimization

Code Splitting

Split your code for faster initial loads:

import { lazy, Suspense } from 'react';

const About = lazy(() => import('./About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <About />
    </Suspense>
  );
}

Image Optimization

Use optimized images:

import optimizedImage from './image.jpg?w=500&h=500&format=webp';

Bundle Analysis

Analyze your bundle size:

npm install --save-dev rollup-plugin-visualizer

Add to vite.config.js:

import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [
    visualizer({ open: true })
  ]
};

Enable Compression

Deployxa automatically enables gzip and brotli compression.

Monitoring

Viewing Logs

1. Go to Project → Logs
2. Select log type:
   • Build Logs: Deployment process
   • Runtime Logs: Client-side errors (if configured)

Monitoring Metrics

1. Go to Project → Analytics
2. View metrics:
   • Page views
   • Unique visitors
   • Bandwidth usage
   • Response times

Error Tracking

Implement error tracking:

Using Sentry:

npm install @sentry/react

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
});

Troubleshooting

Build Failed: Module Not Found

Problem: Module not found: Can't resolve 'package-name'

Solution:

1. Check package.json has the dependency
2. Run npm install package-name locally
3. Commit and push changes
4. Redeploy

Blank Page After Deployment

Problem: Application shows blank page

Solution:

1. Check browser console for errors
2. Verify build output directory is correct
3. Ensure index.html is in the root of output directory
4. Check environment variables are set correctly

Routing Not Working

Problem: Direct URL access returns 404

Solution:

• Deployxa automatically handles client-side routing
• If issue persists, check routing configuration
• Ensure you're using BrowserRouter (not HashRouter)

Environment Variables Not Working

Problem: Environment variables are undefined

Solution:

1. Use correct prefix (VITE_ or REACT_APP_)
2. Redeploy after adding variables
3. Check variable names match exactly
4. Verify variables are set in correct environment

Slow Initial Load

Problem: Application takes too long to load

Solution:

1. Enable code splitting
2. Optimize images
3. Remove unused dependencies
4. Enable lazy loading
5. Use React.memo for expensive components

Best Practices

Project Structure

my-react-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   ├── pages/
│   ├── hooks/
│   ├── utils/
│   ├── App.jsx
│   └── main.jsx
├── .env
├── .env.example
├── vite.config.js
├── package.json
└── README.md

Environment Variables

• Use .env.local for local development
• Never commit .env files
• Use correct prefix for your build tool
• Document required variables in README

Performance

• Enable code splitting
• Use React.lazy for route-based splitting
• Optimize images
• Minimize bundle size
• Use React.memo appropriately
• Implement virtualization for long lists

Security

• Never expose secrets in client code
• Validate all inputs
• Use HTTPS only
• Keep dependencies updated
• Use Content Security Policy

Advanced Configuration

Vite Configuration

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
  server: {
    port: 3000,
  },
});

Create React App Configuration

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // Custom webpack configuration
      return webpackConfig;
    },
  },
};

Custom Build Script

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "analyze": "vite-bundle-visualizer"
  }
}

Examples

Basic React App

// src/App.jsx
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>React on Deployxa</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;

With API Integration

// src/App.jsx
import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(import.meta.env.VITE_API_URL + '/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

With Routing

// src/App.jsx
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Related Topics

• Deploy Next.js
• Deploy Vue
• Environment Variables
• Custom Domains
• Monitoring

Resources

• React Documentation
• Vite Documentation
• Create React App
• Deployxa CLI
• API Reference
• Community Discord

---

Need Help? Contact support@deployxa.com or join our community Discord.