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:
Top comments (0)