PWA Vite React Boilerplate

 

 

->> Demo Page <<-

 

 

 

Boilerplate Techstack

This boilerplate is already preinstalled with:

• Vite Plugin PWA to generate the manifest JSON for progressive web app (PWA).
• Vite.js frontend tooling to build for production.
• React.js with TypeScript support.
• Sass CSS preprocessor. To uninstall, type: npm uninstall sass in terminal.
• Github Action for continuous integration and codeql analysis.

 

 

 

How To Use

Generate GitHub repository

1. Generate your repository from this template: Click Here
2. Clone code to your to remote repository: git clone https://github.com/user-name/repository-name

Note: supply your GitHub user-name and repository-name.

Development

The following terminal commands are from Vite.js command line interface. Also check the package.json file "scripts" section for all command line scripts.

Note: npm can also be replaced with yarn or pnpm...

Run development website locally

npm run dev

• There is no PWA functionality in development mode.

Build production files - to "dist" folder

npm run build

• Ensure there are no TypeScript errors, otherwise complilation will be aborted.
• Build files will be placed in the "dist" folder by default.
• To change build folder, add this line to vite.config.ts defineConfig:

build: {
  outDir: './build-directory'
},

Run production build website locally

npm run preview