So a couple of days back, I started learning about Progressive Web Apps (PWA) and how they make your web app a standalone desktop application and sort of like an android application. I was really intrigued by the whole concept. I knew about PWAs before but I have never experimented with them. And this time, I decided to do just that.
So to indulge in my curiosity, I went ahead and created a Next.js app with create-next-app. And afterward, I started making all the changes in the code that were required for a PWA. In the end, I was successful but it took me some time since I was coming from a background where I had no experience with PWAs.
Later I decided to use Tailwind for my project. I looked up its documentation and followed all the steps I needed to perform to set up Tailwind in my Next.js application. And here again, I spent some time figuring out what to do and what not to do.
After going through all this, figuring stuff out, I realized that some kind of automation tool can come in real handy when doing all these configurations. And that is when I started building create-next-pwa. 🏗
⚡️ CREATE-NEXT-PWA
create-next-pwa is an extremely lightweight, zero-configuration Node.js-based CLI tool that I have built to automate everything I have talked about above. It can set up your Next.js PWA with a single command:
npx create-next-pwa@latest [app_name]
If you want to set up Tailwind for your PWA, you can easily do this with create-next-pwa with a single --tailwind flag like this:
npx create-next-pwa@latest [app_name] --tailwind
I have also integrated Prettier as a dev dependency in the PWA. It means you can format your entire project when you are building your PWA by just running:
npm run format
Everything you needed to do before in order to set up a Next.js-based PWA with or without Tailwind can now be done with a single command. How awesome is that?! 🥂
If you still want to set up Next.js-based PWA by yourself, I would then recommend reading this awesome article by Eshwaren. And on top of this to integrate tailwind, you can follow the official documentation.
🙌🏻 WRAP UP
If you folks want me to integrate something else like I have integrated Tailwind then open an issue in the repository and I will get back to you. Also if you like this application, be sure to star it as well. 😉
Cheerios ✌🏻
Top comments (1)
Awesome! Thanks so much. I had two minor issues that I posted to the github repo. Thanks for posting.