menglinmaker/pwa-vite-react-boilerplate

A boilerplate GitHub template to create repositories for: PWA using Vite, React and TypeScript

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

pwa-vite-react-boilerplate's Issues

BodyScroll and safe-area-env

Hello,
Thank you so much for your React PWA project with Vite! It's an excellent foundation! I would like to seek your expertise on two specific points:

Disabling bodyscroll on Safari iOS:
I’ve tried various approaches to disable body scrolling on Safari iOS, but so far, I haven't found a satisfactory solution. Do you have any recommendations or tips on how to achieve this effectively? The goal is to have the app behave like a Native app.

Using environment variables for the body's safe area:
To ensure better integration with smartphones and their notches, I'm looking for a clean way to use environment variables to handle the body's safe area in the PWA. Do you have any advice or best practices to share on this matter?

Thank you very much!