TL;DR -> Installation
Hello coders! 🧙♂️
Since I am now building many different project that often need a similar initial setup, I created two modern templates to accelerate my work.
I started downloading pnpm, a fast, disk space efficient package manager.
Front-End
For the Front-End template, I created a Vite React app with Typescript 💙. Vite is a build tool used for faster and leaner development experience for modern web projects. Then I added support for most of the best modern technologies some might want to use in their project.
For example, I added Docker 🐋 support, with convinient npm scripts in the package.json to simplify build, run and development with it.
CSS ⁉️
I also added TailwindCSS, a utility-first CSS framework for rapidly building custom user interfaces and I paired it with the HeadlessUI library, made of completely unstyled, fully accessible UI components that work perfectly with Tailwind 😍. I personally find Tailwind absolutely amazing, since it simplifies a front-end dev work at the point that CSS doesn't feel bad anymore! 😄
Progressive Web App 😱
But the most important thing is probably the support for PWA (Progressive Web App). As a developer, it often feels boring to manually set up a PWA, but with this template, everything is packed-up and production ready! 🤩🤩
Back-end
For the Back-End template, I created a Node.js app and added basic features, like express.js and cors.
I also added support for mongoose.js, an elegant MongoDB object modeling library for Node.js.
Obviously, Docker 🐋 and the custom npm scripts are supported in the Back-End template too, so you will no longer be worrying about any initial Docker setup.
Linters? ✨
In both template EsLint and Prettier are already configured, so that you just need to specify how you want your code to be formatted and linted in the .prettierrc and .eslintrc.cjs files. ✨✨
I completed publishing to npm two npx packages to easily scaffold your next projects 🧙♂️.
Installation 🧙♂️
We finally got to the good part!
Here are the repositories for both the templates I created:
Front-end, Back-end
You can run these commands in your terminal to set up everything in a minute!
# Front-end (2nd argument to specify the location) $ pnpx create-modern-react-pwa my-app-frontend # Back-end (2nd argument to specify the location) $ pnpx create-modern-node-app my-app-backend If you don't like using pnpm, here are the same commands with npm:
# Front-end (2nd argument to specify the location) $ npx create-modern-react-pwa my-app-frontend # Back-end (2nd argument to specify the location) $ npx create-modern-node-app my-app-backend Who am I?
I am an Italian high-school student who is interested in web-dev 🧙♂️. If you'd like to support me, you can follow me here and on my GitHub, I would really appreciate it 💜