DEV Community

Franco Chan
Franco Chan

Posted on

Deploy React Vite PWA to GitHub Pages

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

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

Image description


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 .
Enter fullscreen mode Exit fullscreen mode

or similar.

Step 1: Deploy to GitHub Pages

Install the gh-pages npm package:

npm i gh-pages --save-dev
Enter fullscreen mode Exit fullscreen mode

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()],
})
Enter fullscreen mode Exit fullscreen mode

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" // <--- 👀
  },
  ...
}
Enter fullscreen mode Exit fullscreen mode

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:
Image description

Step 2: Configure PWA

Install vite-plugin-pwa npm package:

npm i vite-plugin-pwa
Enter fullscreen mode Exit fullscreen mode

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

npm i @vite-pwa/assets-generator --save-dev
Enter fullscreen mode Exit fullscreen mode

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" // <--- 👀
  },
  ...
}
Enter fullscreen mode Exit fullscreen mode

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'
          }
        ]
      }
    })
  ],
})
Enter fullscreen mode Exit fullscreen mode

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'
  ]
})
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Image description

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">
Enter fullscreen mode Exit fullscreen mode

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

If you run locally:

npm run build
npm run preview
Enter fullscreen mode Exit fullscreen mode

or deploy to GitHub Pages:

npm run deploy
Enter fullscreen mode Exit fullscreen mode

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

Image description

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

Top comments (1)

Collapse
 
menilek profile image
Menilek Techane

Awesome article! I did something similar using Vue, Vite and Vercel available here: dev.to/menilek/series/25226 It's nice to see how different tools can achieve similar goals