PWA Vite React/Shadcn/Tailwind Template

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.
• Tailwind CSS CSS.
• Shadcn/ui Component library.

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 start