Forem: Franco Chan

Deploy React Vite PWA to GitHub Pages

Franco Chan — Sat, 02 Dec 2023 21:33:17 +0000

GitHub repo: https://github.com/iamfranco/example-react-vite-pwa

Demo: https://francochan.co/example-react-vite-pwa/

Step 0: Initialise vite React app

Create a new GitHub repo, clone it locally, and initialise a new vite React app, with command:

npm init vite .

or similar.

Step 1: Deploy to GitHub Pages

Install the gh-pages npm package:

npm i gh-pages --save-dev

Open vite.config.ts and add in this line:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: 'example-react-vite-pwa', // <--- 👀
  plugins: [react()],
})

where example-react-vite-pwa is the repo's name.

Open package.json and add in the following lines:

{
  "name": "example-react-vite-pwa",
  "homepage": "https://iamfranco.github.io/example-react-vite-pwa/", // <--- 👀
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "predeploy": "npm run build", // <--- 👀
    "deploy": "gh-pages -d dist" // <--- 👀
  },
  ...
}

where the https://iamfranco.github.io/example-react-vite-pwa/ is in the format of https://<username>.github.io/<repo-name>/.

But if your GitHub pages is on a custom domain, for example: https://francochan.co, then that becomes https://francochan.co/example-react-vite-pwa/

So now you can run npm run deploy to deploy the site to GitHub Pages. For example:

Step 2: Configure PWA

Install vite-plugin-pwa npm package:

npm i vite-plugin-pwa

Install @vite-pwa/assets-generator as dev-dependency:

npm i @vite-pwa/assets-generator --save-dev

Open package.json and add in the line:

{
  "name": "example-react-vite-pwa",
  "homepage": "https://francochan.co/example-react-vite-pwa/",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "generate-pwa-assets": "pwa-assets-generator" // <--- 👀
  },
  ...
}

Open vite.config.ts and replace its content with:

import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'

// https://vitejs.dev/config/
export default defineConfig({
  base: 'example-react-vite-pwa', // <--- 👀 
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
      manifest: {
        name: 'Example React Vite PWA', // <--- 👀
        short_name: 'React Vite PWA', // <--- 👀
        description: 'Description', // <--- 👀
        theme_color: '#ffffff',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ],
})

Create a new file pwa-assets.config.ts at the base folder (next to package.json), with the content:

import { defineConfig, minimalPreset as preset } from '@vite-pwa/assets-generator/config'

export default defineConfig({
  preset,
  images: [
    'public/vite.svg'
  ]
})

so this configures the generate-pwa-assets command to generate new pwa asset logos based on public/vite.svg.

So now run the command:

npm run generate-pwa-assets

and you should see some new assets in the /public/ folder:

Lastly open the index.html and add the following lines:

<meta name="description" content="description"> 
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
<meta name="theme-color" content="#ffffff">

in the <head> ... </head>.

If you run locally:

npm run build
npm run preview

or deploy to GitHub Pages:

npm run deploy

then you should be able to see the install app icon:

https://francochan.co/example-react-vite-pwa/

My 1st SocialCoder project | What I learned

Franco Chan — Wed, 27 Sep 2023 16:27:55 +0000

Recently, I volunteered on SocialCoder to code a one page website for ONCRA.

The requirement of the website is to

read some KML file (like Google Earth 🌍),
then fetch and crunch some data,
then show results in a table.

Outcome

The Website and its GitHub Repo

What I learned

One Page Website != Let's use Plain HTML JavaScript
How to check if point is inside polygon
How to calculate polygons intersection
The Earth is not flat 🤯

#1: One Page Website != Let's use Plain HTML JavaScript

When I first spoke with the client, the requirement sounded like a very simple one page website, so I thought I can just code it in plain HTML.

But as I coded the key components of the website, I realise I have components that needs to be update visually as data were fetched, like this table:

Yeah that was doable in plain JavaScript HTML, but it meant I was updating those table values manually:

... // fetching data
yearElement.innerHTML = `${year} <div class="spinner"></div>`

... // data fetched
yearElement.innerHTML = `${year} ✅`
valueElement.innerText = getAGBValue(data, polygon);

But I doubt future me will remember this kind of side effect on the data fetching script 🧠

So eventually I took the plunge and rewrote the website in React. The table rows are now

<td>{year} {statusIcon}</td>

where the statusIcon depends on a state rowsStatus.

So as data were fetched, the rowsStatus state would be updated and React would just update those table values. The whole thing is much easier to follow 😄

#2: To check if a point is inside a polygon, use Ray Casting algorithm

The "data crunching" part of this project involves determining if a lat-lon grid is inside the kml file polygon. I discovered this gem of a video, which shows me how to determine if a point is inside a polygon

#3: To calculate polygons intersection, use Weiler-Atherton algorithm

As part of the "data crunching", I need to compute "how many percent" of a lat-lon grid is inside the kml polygon, and apply that percentage to the AGB data value of the grid.

To calculate the intersectional polygon(s)
we can use the Weiler–Atherton clipping algorithm to achieve
https://www.geeksforgeeks.org/weiler-atherton-polygon-clipping-algorithm/

To calculate the area of the intersectional polygon(s), we can use the Shoelace formula
https://en.wikipedia.org/wiki/Shoelace_formula

#4: The Earth is Not Flat🌍

Because the dataset has a longitude range of -180 to 180 deg, so if a user were to upload a polygon from longitude 179.99 to -179.99 by going through 180 (or -180 because the Earth is not flat), the dataset would fail to retrieve.

So I had to take that special case into account and make 2 separate calls to the dataset:

request for longitude range 179.99 to 180
another request for longitude range -180 to -179.99

then combine the retrieved data together, add 360 degrees to the longitude value and proceed as usual 👍

Conclusion

Here's the website link and its GitHub Repo

This has been a great opportunity for me to practice using React 😄

The website is simple enough that it didn't have many nested components 🪆, so I've only been using useState. Although now thinking about it, I probably should've used useContext to avoid having to pass around some frequently used states 🤔

I'm still in the process of learning React, so any feedback appreciated 🙏🙏