TL;DR -> Installation
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.
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.
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! 😄
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! 🤩🤩
For the Back-End template, I created a Node.js app and added basic features, like
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.
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
.eslintrc.cjs files. ✨✨
I completed publishing to
npx packages to easily scaffold your next projects 🧙♂️.
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
# 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
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 💜