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.
- 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
- Tailwind: Instantly integrate Tailwind using
--tailwindflag 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.
# install the CLI globally npm i -g create-next-pwa # use it with npx (recommended) npx create-next-pwa [app_name]
Navigate to the folder you want to have your Next.js PWA.
# using npx npx [email protected] [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 [email protected] [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 [email protected] # without giving app name in terminal using npx and tailwind integration npx [email protected] --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
# using npx npx create-next-pwa [app_name]
# integrate tailwind in the Next.js PWA npx create-next-pwa [app_name] --tailwind
# if you have installed globally create-next-pwa [app_name]
# you can also just use the create-next-pwa command create-next-pwa
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.
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
- MIT © Saad Irfan
- Code of Conduct
ERROR: Couldn't convert Next.js app to PWA.
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.
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.
📦NEW: Cross Platform Integration
In this PR, I have implemented the following:
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.
next.config.js, [WebpackGenerateSW] 'pwa' property is not expected to be here.
Found a solution here:
I changed my
next.config.jsto this to get the error to go away:
When I ran
I pasted in the following:
Cannot make it instalable with Github pages
I'm trying to make a static pwa with
gh-pagesdependency and update
npm run deploy
In development mode, the pwa is instalable and works fine. But when I run
next exportand 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.