⚡️ Set up Next.js Progressive Web App with `npx create-next-pwa`

Related tags

Boilerplates nodejs javascript cli node pwa js progressive-web-app nextjs node-cli pwa-boilerplate tailwind tailwindcss nextjs-boilerplate nextjs-pwa
Overview

cover

⚡️ create-next-pwa

version downloads license nominate @msaaddev for GitHub Star

A cross-platform Node.js based CLI tool that creates Progressive Web App (PWA) with Next.js. You can also integrate tailwind with the Next.js PWA using this CLI with a single command.

separator

  • Simple: One command Next.js Progressive Web App setup
  • Cross-platform: Works on all available operating systems including Linux, macOS, and Windows
  • Support: Also supports TypeScript Next.js PWA with --typescript flag
  • Tailwind: Instantly integrate Tailwind using --tailwind flag in your Next.js PWA.
  • Prettier: Integrated Prettier to easily format the code with npm run format
  • MIT Licensed: Free to use for personal and commercial use.

Note: If you are on Windows, make sure to either use Command Prompt or Windows Powershell to run the CLI.

📦 Installation

# install the CLI globally
npm i -g create-next-pwa

# use it with npx (recommended)
npx create-next-pwa [app_name]

🚀 Usage

Navigate to the folder you want to have your Next.js PWA.

# using npx
npx create-next-pwa@latest [app_name]

# if you have installed globally
create-next-pwa [app_name]

# to use Next.js with Typescript
create-next-pwa [app_name] --typescript

# Next.js PWA with tailwind integration using npx
npx create-next-pwa@latest [app_name] --tailwind

# Next.js PWA with tailwind integration if you have globally installed the CLI
create-next-pwa [app_name] --tailwind

# without giving app name in terminal using npx
npx create-next-pwa@latest

# without giving app name in terminal using npx and tailwind integration
npx create-next-pwa@latest --tailwind

# without giving app name in terminal if installed globally
create-next-pwa

# without giving app name in terminal if install globally along with tailwind integration
create-next-pwa --tailwind

help

🎩 Demo

# using npx
npx create-next-pwa [app_name]

with npx

# integrate tailwind in the Next.js PWA
npx create-next-pwa [app_name] --tailwind

integration of tailwind

# if you have installed globally
create-next-pwa [app_name]

usage with app name

# you can also just use the create-next-pwa command
create-next-pwa

usage without app name

👨🏻‍💻 Contributing

Make sure you read the contributing guidelines before opening a PR. If you want something else to integrate with the CLI like I have done with tailwind, open an issue in the repository and I will get back to it.

⚡️ Other Projects

I have curated a detailed list of all the open-source projects I have authored. Do take out a moment and take a look.

🔑 License & Conduct

Comments
  • ERROR: Couldn't convert Next.js app to PWA.

    ERROR: Couldn't convert Next.js app to PWA.

    image

    I'm using your npm package ( installed global ) and tried to create an pwa ( with and without tailwind ) in vscode ( Terminal ), PS Admin and normal Powershell.

    bug 
    opened by KoCoder 3
  • Outdating dependencies future problem

    Outdating dependencies future problem

    Since I have a template package.json file that I am using for Next.js PWAs and Tailwind, the dependencies in them will outdate over time. So I need to fix it by figuring a way where I don't have to use package.json files like this.

    bug 
    opened by msaaddev 0
  • 📦NEW: Cross Platform Integration

    📦NEW: Cross Platform Integration

    In this PR, I have implemented the following:

    • [x] Wrapped exec child process method inside promise
    • [x] Using this new promise to install dependencies
    bug 
    opened by msaaddev 0
  • npm --prefix not working for windows

    npm --prefix not working for windows

    I would need to use process.chdir() to install packages and format code. But for that, I need a way to exit from Node process without terminating the program.

    bug 
    opened by msaaddev 0
  • next.config.js, [WebpackGenerateSW] 'pwa' property is not expected to be here.

    next.config.js, [WebpackGenerateSW] 'pwa' property is not expected to be here. 

    error - Please check your GenerateSW plugin configuration:
[WebpackGenerateSW] 'pwa' property is not expected to be here.

    Found a solution here:

    https://github.com/shadowwalker/next-pwa/issues/392

    I changed my next.config.js to this to get the error to go away:

    const withPWA = require('next-pwa')({
	dest: 'public',
	register: true,
	skipWaiting: true
})

module.exports = withPWA({
	reactStrictMode: true,
	// put other next js options here
  });
    opened by peteristhegreat 0
  • Empty manifest.json

    Empty manifest.json

    Minor issue:

    manifest.json was empty

    When I ran

    npx create-next-pwa@latest --typescript --tailwind myapp

    I pasted in the following:

    {
    "name": "MyApp",
    "short_name": "MyApp",
    "theme_color": "#ffffff",
    "background_color": "#004740",
    "display": "fullscreen",
    "orientation": "any",
    "scope": "/",
    "start_url": "/",
    "icons": [{
      "src": "/icons/favicon.svg",
      "sizes": "48x48 72x72 96x96 128x128 144x144 152x152 192x192 256x256 384x384 512x512",
      "type": "image/svg+xml",
      "purpose": "any"
    }],
    "splash_pages": null
  }
    opened by peteristhegreat 0
  • Cannot make it instalable with Github pages

    Cannot make it instalable with Github pages

    I'm trying to make a static pwa with next.js and tailwind.

    Steps

    1. Use create-next-pwa:
    npx create-next-pwa pwa-test --tailwind
    1. Install gh-pages dependency and update package.json
    "scripts": {
	"dev": "next dev",
	"build": "next build && next export",
	"start": "next start",
	"format": "prettier --write \"./**/*.{js,json}\"",
	"predeploy": "npm run build",
	"deploy": "gh-pages -d out -t true"
},
    1. Update next.config.js
    const withPWA = require('next-pwa');

module.exports = withPWA({
	basePath: '/temp',
	pwa: {
		dest: 'public',
		register: true,
		skipWaiting: true
	}
});
    1. Run deploy script (you need to setup the remote repo) npm run deploy

    In development mode, the pwa is instalable and works fine. But when I run next export and add the static site to Github pages, I always get this error:

    No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.

    image
    opened by waghcwb 0
Releases(v3.4.3)

  • v3.4.3(Jul 25, 2021)

  • v3.3.1(Jun 15, 2021)

  • v3.2.0(Jun 15, 2021)

    • Removed code redundancies
    • Improved code structure
    • Removed in-folder dependency
    • Added node-async-exec because of its change directory and cross-platform nature
    • Fixed outdating future dependencies bug #21
    • Added custom error message if the project folder already exists
    Source code(tar.gz)
    Source code(zip)

  • v3.1.9(Jun 6, 2021)

    • Cross platform directory deletion
    • Used copy command for windows to copy files
    • Took care of file creation for windows
    • Fixed npm dependency installation for windows by making exec a promise
    • Fixed file paths for Windows
    • Fixed git directory deletion for macos
    • Introduced check for update to notify the user if there is an update available of the CLI
    • Added err handlers
    • Removed jsonfile and used json-write-file instead
    Source code(tar.gz)
    Source code(zip)

  • v2.4.0(Jun 5, 2021)

    In this release, I have implemented the following:

    • [x] Integration of tailwind for Next.js PWAs
    • [x] Code refactoring
    • [x] One file path handling
    • [x] Fixed flags and input bug
    • [x] Improved UI
    Source code(tar.gz)
    Source code(zip)

  • v1.3.0(Jun 5, 2021)

Owner
Saad Irfan ⚡️
Turning ideas into code...
Saad Irfan ⚡️
GitHub https://twitter.com/msaaddev
(WIP) Universal PWA Builder

WORK IN PROGRESS Features Framework Agnostic Build with your preferred framework or with none at all! Official presets for Preact, React, Vue, and Sve

Luke Edwards 3.1k Dec 26, 2022
Full-Stack solution to quickly build PWA applications with Vue.js and Firebase

Welcome to bento-starter ?? ?? bento-starter is an Open-Source Full-Stack solution that helps you to build fast and maintainable web applications usin

Franck Abgrall 1.5k Jan 5, 2023
Set up a modern web app by running one command.

Create React App Create React apps with no build configuration. Creating an App – How to create a new app. User Guide – How to develop apps bootstrapp

Facebook 98.4k Dec 28, 2022
A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Yoki 23 Aug 18, 2022
The next small thing in web development, powered by Svelte

sapper The next small thing in web development, powered by Svelte. What is Sapper? Sapper is a framework for building high-performance universal web a

Svelte 7.1k Jan 2, 2023
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.7k Jan 1, 2023
An experiment in building a public facing personal knowledge web app with TiddlyWiki and Nodejs.

Maarfapad What is this? Maarfapad was my attempt at learning Expressjs back in 2016 while building a CRUD app to handle TiddlyWiki html files. It was

A.B. Samma 3 Mar 12, 2022
✨ Create server-rendered universal JavaScript applications with no configuration

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yours

Jared Palmer 11k Jan 8, 2023
A simple Fast CLI that create Express+Mongoose MVC pattern

express-schema-generator Site | Docs | Contributing | Code of Conduct | Twitter | Chat Bored Writing and Creating the Same Express MVC Folders Again a

Shantanu Bombatkar 10 Aug 15, 2022
This project is for backend developers with node js. It create the "Mongoose models, routers and controllers" with cli command line.

Node.js Boilerplate This project is for backend developers with node js. It create the "Mongoose models, routers and controllers" with cli command lin

Bilal Yaver 3 Sep 19, 2022
A full-stack dApp starter built on Ethereum (Solidity) with Next.js (React).

A full stack dApp starter built on Ethereum (Solidity) with Next.js (React) This repo contains boilerplate code for interacting with a simple smart co

Tom Hirst 272 Dec 30, 2022
Next.js + Tailwind CSS + TypeScript starter packed with useful development features

?? ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Cornelius Denninger 7 Nov 12, 2022
Next Boilerplate with TypeScript, Redux Toolkit and Styled-Component.. For now

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Ibrahim Yaacob 2 Feb 17, 2022
A Next + TypeScript Starter. Featuring Styled-Components, ESLint, Prettier, Axe a11y monitoring, Fathom analytics, sitemap generation, and more!

Next + TypeScript Starter A Next + TypeScript Starter by Justin Juno. Featuring Styled-Components, ESLint, Prettier, Axe a11y monitoring, Fathom analy

Justin Juno 11 Dec 13, 2022
Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Next Boilerplate was created to be a template for starting NextJS projects with pre-configured settings like Linters, Test Setup, Storybook and Commit Hooks.

Claudio Orlandi 4 Feb 22, 2022
A highly opinionated and complete starter for Next.js projects ready to production

The aim for this starter is to give you a starting point with everything ready to work and launch to production. Web Vitals with 100% by default. Folder structure ready. Tooling ready. SEO ready. SSR ready.

Fukuro Studio 28 Nov 27, 2022
🚀 A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript

?? A well-structured boilerplate and Starter for Next.js 12+, Tailwind CSS 3, Redux, Redux Thunk, and TypeScript ⚡️ Made with developer experience first ESLint + Prettier + Lint-Staged + VSCode setup

null 4 Nov 28, 2022
NextJS BoilerPlate for Alpha version(Next.js + Styled Components + Customization + Theme)

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Super Ninja 8 Oct 24, 2022
A default Next.js project with boilerplate packages and configurations. Includes Tailwind, TypeScript (strict), ESLint, Prettier, and Husky.

Yet another Next.js project template This template includes a set of our favorite dev tools scaffolded into a Next.js project. Tools include: TypeScri

Joey McKenzie 16 Dec 27, 2022