Framework Guides

Medium Implementation

React Implementation

Implement GEO in React SPAs using static files and build tools

React SPA Considerations

React SPAs require special handling for GEO endpoints since they don't have server-side routing

Challenges:

  • • No server-side routing for API endpoints
  • • Static file hosting limitations
  • • Need for build-time generation
  • • CDN configuration requirements

Solutions:

  • • Static JSON files in public folder
  • • Build-time content generation
  • • CDN rewrite rules
  • • Serverless functions (Vercel/Netlify)

Method 1: Static Files (Recommended)

Create static JSON files in your public folder

File Structure:

public/
├── .well-known/
│   ├── ai.txt
├── ai/
│   ├── summary.json
│   ├── faq.json
│   └── service.json
├── sitemap-llm.xml
└── robots.txt

Method 2: Build-Time Generation

Generate GEO files during the build process

build-script.js

const fs = require('fs');
const path = require('path');

// Create .well-known directory
const wellKnownDir = path.join(__dirname, 'public', '.well-known');
if (!fs.existsSync(wellKnownDir)) {
  fs.mkdirSync(wellKnownDir, { recursive: true });
}

// Create ai directory
const aiDir = path.join(__dirname, 'public', 'ai');
if (!fs.existsSync(aiDir)) {
  fs.mkdirSync(aiDir, { recursive: true });
}


// Generate summary.json
const summary = {
  version: "1.0",
  lastModified: new Date().toISOString(),
  summary: process.env.REACT_APP_AI_SUMMARY || "Your React app provides [services] to [audience] with [benefits].",
  keyFeatures: [
    "React-based SPA",
    "Modern UI/UX",
    "Fast performance"
  ],
  targetAudience: [
    "Web users",
    "Mobile users"
  ],
  primaryUseCases: [
    "Use case 1",
    "Use case 2"
  ]
};

fs.writeFileSync(
  path.join(aiDir, 'summary.json'),
  JSON.stringify(summary, null, 2)
);

console.log('GEO files generated successfully!');

package.json scripts

{
  "scripts": {
    "prebuild": "node build-script.js",
    "build": "react-scripts build",
    "predeploy": "node build-script.js"
  }
}

Method 3: Serverless Functions

Use Vercel or Netlify serverless functions for dynamic content

Vercel: api/geoconfig.js

export default function handler(req, res) {
  const config = {
    version: "1.0",
    lastModified: new Date().toISOString(),
    site: {
      name: "Your React App",
      description: "Your app description",
      url: "https://yourapp.com",
      language: "en"
    },
    ai: {
      summary: "/api/ai/summary",
      faq: "/api/ai/faq",
      service: "/api/ai/service"
    },
    discovery: {
      robots: "/robots.txt",
      sitemap: "/sitemap-llm.xml",
      aiTxt: "/.well-known/ai.txt"
    },
    features: ["spa", "react", "serverless"]
  };

  res.setHeader('Content-Type', 'application/json');
  res.setHeader('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
  res.status(200).json(config);
}

vercel.json configuration

{
  "rewrites": [
    {
      "source": "/ai/summary.json",
      "destination": "/api/ai/summary"
    },
    {
      "source": "/ai/faq.json",
      "destination": "/api/ai/faq"
    },
    {
      "source": "/ai/service.json",
      "destination": "/api/ai/service"
    }
  ]
}

Deployment Considerations

Important notes for deploying React apps with GEO

Static Hosting (Netlify/Vercel):

  • • Use _redirects or vercel.json for routing
  • • Ensure proper MIME types for JSON files
  • • Set cache headers in hosting config
  • • Test all endpoints after deployment

CDN Configuration:

  • • Configure proper Content-Type headers
  • • Set Cache-Control headers
  • • Enable CORS if needed
  • • Test from different locations

Next Steps

Complete your React GEO implementation

View Checklist
Complete implementation guide
Test Implementation
Validate your GEO setup
Try Next.js
Easier implementation