Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-mode/llms.txt

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

Once dependencies are installed, you can have dev-mode running in your browser in seconds. Vite’s dev server provides instant startup, hot module replacement, and fast rebuilds — so every change you make to a component or stylesheet is reflected immediately without a full page reload.

​
Starting the Dev Server

1

Start the Vite dev server

From the project root, run:
npm run dev
Vite will print output similar to the following:
  VITE v5.x.x  ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
Open http://localhost:5173/ in your browser. The Home page loads immediately.
Vite’s hot module replacement (HMR) is active as soon as the server starts. Edit any component (such as components/ArcadeButton.js or components/ScanlineOverlay.js) or change a Tailwind class in a source file and the browser updates in place — no manual refresh needed, and component state is preserved across style changes.
2

Explore the seven pages

dev-mode uses React Router’s HashRouter, so all navigation happens via hash-based URLs. Every route is accessible directly in the address bar:
PageHash URL
Homehttp://localhost:5173/#/
Abouthttp://localhost:5173/#/about
Projectshttp://localhost:5173/#/projects
Skillshttp://localhost:5173/#/skills
Writinghttp://localhost:5173/#/writing
Case Studieshttp://localhost:5173/#/cases
Contacthttp://localhost:5173/#/contact
Because routing is hash-based, the server never needs to handle different paths — the # fragment is processed entirely by the React Router client. You can bookmark any of these URLs and they will work on both the dev server and the static pages/ build.

​
How Hash Routing and Static Pages Work Together

Each file in the pages/ directory (for example pages/About.html) contains a small inline <script> block that runs before React mounts: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";

  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/about"
      );
    }
  })();
</script>
This script does two things:
  1. Sets window.__STATIC_PAGE_ROUTE__ — the React app reads this value at startup so it knows which route to render without waiting for the hash to be parsed.
  2. Redirects bare requests — if a visitor lands on pages/About.html without a hash fragment, the script rewrites the URL to pages/About.html#/about before React initialises. This ensures the HashRouter routes to the correct view even when the page is opened directly from the filesystem or a static host.
The index.html entry point does the same for the root route (window.__STATIC_PAGE_ROUTE__ = "/"), ensuring the Home page loads correctly in all environments.

​
Building for Production

To generate the optimised static output: 
npm run build
Vite compiles and bundles all source files, then writes pre-rendered HTML for each route into the pages/ directory alongside the compiled assets/main.js and assets/main.css. The result is a fully self-contained static site that can be deployed to any CDN or static host with no server-side runtime required.

​
Previewing the Production Build

After building, you can serve the production output locally using Vite’s built-in preview server: 
npm run preview
Expected output: 
  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
Open http://localhost:4173/ to verify the production build behaves identically to the dev server before you deploy.
npm run preview serves the last output written to pages/ by npm run build. If you make source changes after building, re-run npm run build before previewing to pick up those changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us