Deploying a (static) Vite React app

Mathias Nielsen — Thu, 14 Nov 2024 08:09:32 +0000

So there's probably already a ton of blog posts out there on this subject, even this is a follow up to my own previous post on the same topic.

Things have changed since CRA was the recommended way of scaffolding react projects, and full-stack frameworks like NextJS/Remix is the new way to do it.

But i still want to have an opportunity to keep things a bit more simple than a full NextJS project, so I have a Vite scaffolded React project, with TanStack Router, and here's how to get it deployed to GitHub Pages.

The steps are almost the same as the previous post, with a few changes

Step 1: npm package

To make it easy, we're using an npm package called "gh-pages".

Install it:

npm install gh-pages

Step 2: Homepage

Github Pages follows a pattern for your url (if you're using the default one given by Github): your-github-username.github.io/your-repo

Following this pattern, add a "Homepage" attribute to your package.json:

{
  "name": "business-card",
  "version": "0.1.0",
+  "homepage": "https://username.github.io/repo",
  "private": true,
  "dependencies": {...},

My link would look like this:

"homepage": "https://cph-mtnl.github.io/business-card",

Step 3: Routing

Since we're now adding a base route to our routing, (compared to working on localhost), we need to add this base route to our vite and routing config:

// File: vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";

// https://vite.dev/config/
export default defineConfig({
  base: "/business-card",
  plugins: [TanStackRouterVite(), react()],
});

And our TanStack Router: RouterProvider:

<RouterProvider
  router={router}
  basepath="/business-card"
/>

Step 4: Scripts

Also in your package.json, we need to add 2 scripts:

  "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist",
    ...
  }

Step 5: Deploy

Lastly we need to run the deploy command:

npm run deploy

Step 6: Done

Or at least, that should be it, if you're having problems, and cannot see it, make sure these two things are as it should be:

Visit your repo on GitHub, and go to Settings and then Pages. And then you should see:

If not, make sure you've chosen the gh-pages branch: