⚛️ Preact-PWA

pheralb/preact-pwa is a boilerplate to build fast progressive web applications with Preact & Vitejs.

• 👀 Demo - Cloudflare Pages.

🚀 Getting Started

You will need:

• Nodejs +16.
• Git.

1. Run:

npx degit pheralb/preact-pwa my-preact-app
cd my-preact-app

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Run your project:

npm run dev
# or
yarn dev
# or
pnpm run dev

4. Access 127.0.0.1:5173 and happy coding 🥳.

[💡] Open src/pages/home.tsx and start editing your project.

📦 Packages

• ⚡️ Vitejs - Next Generation Frontend Tooling.
• ⚛️ Preact - Fast 3kB alternative to React with the same modern API.
• 💙 Typescript - A superset of JavaScript that compiles to clean JavaScript output.
• 🌳 React-Router - Declarative routing for React.
• 📲 Vite-Plugin-PWA - Zero-config and framework-agnostic PWA Plugin for Vite.
• 🔷 Vite-tsconfig-paths - Support for TypeScript's path mapping in Vite.

📂 Directory structure

• Your fonts, images, icons... ->

├── public
│   └── icons
│   └── images

• Your Preact application... ->

├── src
│   └── pages       <- App pages.
│   └── pwa         <- Service Worker.
│   └── styles      <- CSS styles.

🌟 Deploy

🪧 Remember use Nodejs 16 to compile the project to production.

• Cloudflare Pages:

- Framework preset: Create React App
- Build command: npm run build
- Build output directory: dist

and create a environment variable with:

NODE_VERSION 16.16.0

• Netlify:

Create a file named _redirects in the root with the following content:

/*    /index.html   200

• Vercel:

Create a file named vercel.json in the root with the following content:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

⚒️ Resources

• 🔎 SEO meta tags: gist by ikurotime.