Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retro-cosmic-arcade/llms.txt

Use this file to discover all available pages before exploring further.

Retro Cosmic Arcade uses Vite as its build tool. A single npm run build command compiles the React app, processes Tailwind CSS, splits the JavaScript into cacheable chunks, and writes every HTML entry point with pre-configured <link rel="modulepreload"> tags into the dist/ directory. Because the project relies on hash routing, the resulting dist/ folder can be uploaded directly to any static file host with zero additional server configuration.

​
Running the Build

npm run build
Vite reads from the project root, resolves all entry points, and outputs the production bundle: 
dist/
├── index.html
├── pages/
│   ├── Home.html
│   ├── About.html
│   ├── Projects.html
│   ├── Skills.html
│   ├── Writing.html
│   ├── CaseStudies.html
│   └── Contact.html
├── assets/
│   ├── main.js          # Hashed filename in production (e.g. main.a1b2c3d4.js)
│   ├── main.css
│   ├── jsx-runtime.js
│   └── proxy.js
└── components/
    ├── ChromeButton.js
    ├── CursorTrail.js
    ├── Footer.js
    ├── HitCounter.js
    ├── MarqueeTicker.js
    ├── PixelHPBar.js
    ├── Polaroid.js
    └── WebringNav.js

​
Asset Bundling and Module Preloading

Vite splits the compiled JavaScript into four chunks to optimise caching:
AssetContentsCache strategy
main.jsReact app bundle — page components, routing, Framer Motion animationsBusted on every deploy (content-hashed filename)
jsx-runtime.jsReact JSX runtimeLong-lived cache — only changes when React version changes
proxy.jsFramer Motion bundleLong-lived cache — only changes when Framer Motion version changes
main.cssCompiled Tailwind CSS + custom tokens + Google Fonts importBusted on every deploy
Every HTML entry point in dist/ declares <link rel="modulepreload"> for each chunk: 
<link rel="modulepreload" crossorigin href="./assets/jsx-runtime.js">
<link rel="modulepreload" crossorigin href="./components/WebringNav.js">
<link rel="modulepreload" crossorigin href="./components/Footer.js">
<link rel="modulepreload" crossorigin href="./assets/proxy.js">
<!-- ... and so on for every component -->
modulepreload instructs the browser to fetch, parse, and compile each JavaScript module before it is needed. This eliminates the waterfall of sequential module fetches that would otherwise occur when the React app begins rendering and starts importing its dependencies.

​
Previewing the Production Build

Before deploying, verify the production build locally with Vite’s preview server: 
npm run preview
This serves dist/ at http://localhost:4173 as a static site — the same way a production host would serve it. Use this step to confirm that hash routing works, all assets load, and no paths are broken before pushing to your host.
Hash-based routing means that no server-side rewrite rules are needed on any static host. When a user visits example.com/about, the server returns pages/About.html. That page’s inline script then appends #/about to the hash and React Router handles the rest entirely in the browser. There is no risk of a 404 on a page refresh or a direct link.

​
Deployment Workflows

1

Build the project

Run the production build locally to generate the dist/ directory.
npm run build
2

Choose a static host

Select a deployment target. All of the following work out of the box with zero extra configuration:

GitHub Pages

Push dist/ to the gh-pages branch of your repository, or use the gh-pages npm package to automate it.

Netlify

Drag and drop the dist/ folder onto the Netlify dashboard, or connect your repository and set the build command to npm run build with the publish directory set to dist.

Vercel

Connect your repository on Vercel. It auto-detects the Vite framework, sets the build command to vite build, and deploys dist/ automatically on every push.

Cloudflare Pages

Create a new Cloudflare Pages project, set the build command to npm run build, and the output directory to dist. Cloudflare deploys on every push to your main branch.
3

Deploy to GitHub Pages (example)

If you are using GitHub Pages, the simplest automated workflow uses the gh-pages package:
# Install gh-pages as a dev dependency (one-time setup)
npm install --save-dev gh-pages
Add a deploy script to package.json:
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  }
}
Then deploy with:
npm run build && npm run deploy
The gh-pages package pushes the contents of dist/ to the gh-pages branch and GitHub Pages serves it at https://<username>.github.io/<repo>/.
4

Deploy to Netlify (drag-and-drop)

For a one-click deploy without any CLI tooling:
  1. Run npm run build locally.
  2. Open app.netlify.com and log in.
  3. Drag the dist/ folder from your file explorer onto the Netlify dashboard drop zone.
  4. Netlify assigns a random subdomain (e.g. cosmic-purple-123.netlify.app) and the site is live within seconds.
Netlify’s drag-and-drop deploy is stateless — each drag creates a new independent deploy that does not affect your existing Netlify sites or git integration.
5

Verify the deployment

After deploying, test the following scenarios to confirm everything works:
  • Home page loads — visit the root URL and confirm the React app mounts.
  • Direct navigation — visit a sub-page URL directly (e.g. /about or /contact) and confirm it loads without a 404.
  • Page refresh — refresh any page and confirm the content reloads correctly.
  • Back/forward navigation — click through several pages, then use the browser Back and Forward buttons.
  • Asset loading — open DevTools → Network and confirm all JS, CSS, and font files load with HTTP 200.

​
Environment and Build Configuration

Vite reads its build configuration from vite.config.js (or vite.config.ts) in the project root. The default configuration suffices for this project — no custom plugins, aliases, or environment variable handling are required. If you add pages or move the dist/ output directory, update vite.config.js accordingly.
Useful Vite build flags for CI and debugging: 
# Build with source maps for production debugging
vite build --sourcemap

# Override the output directory
vite build --outDir build

Build docs developers (and LLMs) love

Get started for freeTalk to us