DEV Community: Mathias Nielsen

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:

Deploying a (static) create-react-app

Mathias Nielsen — Fri, 25 Feb 2022 10:35:35 +0000

So there's probably already a ton of blog posts out there on this subject.
But I've been trying to get a nice and easy way to deploy my create-react-app (CRA) to Github Pages, and I finally found out how to! I found a guide, but it seemed overly complicated, so now I wanted to make a simple guide/blog post about it.

Step 1: npm package

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

I won't go into detail about this package, but its mentioned by CRAs own documentation, so I trust it.

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": {...},

Step 3: Scripts

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

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

Step 4: Deploy

npm run deploy

Step 5: 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:

Caveats:

There's 2 caveats I am currently aware of.

You need to do some slight changes if you want to deploy a user page
If you are using routing in your react app, you need to use hash routes instead.

Minimal create-react-app

Mathias Nielsen — Fri, 25 Feb 2022 08:48:06 +0000

The problem:

When I start a new create-react-app (CRA), it has a lot of files and stuff I don't need. This includes:

reportWebVitals(Analytics and performance, etc.)
logo.svg and some other stuff to create the React "Hello World" app.
setupTests.js, and other test related defaults. Although I might be yelled at for saying: "I don't need testing", I just don't need it for smaller prototype setups.

The solution

When I tried to research for a solution for this problem (fancy way of saying, I googled it), I encountered a post on Stackoverflow, and I am obviously not the only one with this problem, so a guy from CRA (if I remember correctly), commented and mentioned they have developed templates to satisfy users which had a different workflow than the default one.
And that I could find all the templates available on npm, simply by searching for cra-template-*.

Here I found the template I was looking for and can now create my simple and basic CRA Apps, simply by typing:

npx create-react-app my-app --template minimal

TIL about specific Array combination types

Mathias Nielsen — Thu, 25 Nov 2021 21:43:22 +0000

Okay, so its not actually called "specific Array combination types", but that was the best description I had for it, before I looked it up.
Its actually called "Tuple Types" and the documentation can be found here: https://www.tutorialsteacher.com/typescript/typescript-tuple

I'll come back to why this blew my mind today, but first, lets scroll back a bit, to some of my first steps into JS/TS programming. I started my programming career in Java, and one of the things that annoyed the hell out of me, was the fact that I could only have 1 object returned from a function (This was before the Pair class was introduced).

But in JS we can easily just return an array with 2 values:

const someFunction = () => {
    return ['Mathias', 28];
}

And combined with some destructuring on the recieving, it was all nice and easy:

const [myName, myAge] = someFunction();

Adding types

Until today I never had to add types onto a scenario like this, usually when I work with arrays, I either just do a basic string[], or when its required in complex object scenarios: Array<{name: string, age: number}>.
But with the tuples we can actually avoid naming them and just say the return type for our function is [string, number]:

const someFunction = (): [string, number] => {
    return ['Mathias', 28];
}

Vue relation

I came across this when I working with Vue2 combined with TS, and was trying to create a v-for loop over a Map, but Vue2 did not support this, so I had to come up with a different approach that supported the same end goal.

So this is where the new tuples came in handy! Given an example with some data in a Map:

const map = new Map<string, object>();
map.set('key1', {data: 'lots of data'});
map.set('key2', {data: 'more data'});

I could then destructure it into an array like so:

const asArray = ...map.entries();
// Yielding:
[
    ['key1', {data: 'lots of data'}],
    ['key2', {data: 'more data'}],
]

And in order to Type this we now have:

const asArray: Array<[string, object]> = ...map.entries();

Thank you for reading this far, hope you gained something from this post.