DEV Community

Cover image for How I Build an NPM Package that lets you Scaffold React Apps
Abhishek
Abhishek Subscriber

Posted on

How I Build an NPM Package that lets you Scaffold React Apps

#react #cli #npm

Okay, So I finnaly made an NPM package so that you don't need to find each and every dependencies. In this blog, I am going to walkthrough the process how you can try this package yourself.
I will also share how I came to making one more npm thingy, here we go.

Let first start with a question:

What is An NPM Package?

=> NPM is a package manager for Node. js packages, or modules if you like. www.npmjs.com hosts thousands of free packages to download and use. The NPM program is installed on your computer when you install Node.js. If you installed Node.
That's a preety boring definition, here is the simpler version

An npm package is basically a bundle of reusable code that you (or anyone) can install and use in a Node.js project. Think of it as a little Lego piece—easy to plug in, whether it’s for adding a button component, handling dates, or powering a whole framework.

My First NPM package

I found out the process of setting up each package one by one, why not make a scaffold tool like a thing so that anyone can just hit the command, do some'enter...enter' and get their react project as it it.
I tried to implement some CI/CD files and vercel.json to make the process further helpful.

To install the npm package, you need to enter this command in your terminal-

npx react-starter-plus

The prompts you need to follow

  1. Project name → my-react-app
  2. Language → JavaScript / TypeScript
  3. Git setup → Initialize repo & push to GitHub (provide remote URL)
  4. Extras →
  • CI/CD with GitHub Actions?
  • Zustand for state?
  • React Testing Library?
    1. Deployment → Deploy with Vercel (make sure you’re logged in with vercel login)
    2. Deploy now or later → Your call.

Get the Summary & Setup

The CLI shows a summary before proceeding. If everything looks good, it:

  • Installs dependencies
  • Sets up Tailwind + routing
  • Initializes Git & pushes to remote
  • Configures CI/CD
  • Deploys to Vercel

And done

You’ll end up with something like:

✔ Deployment successful:
https://johndoes-project.vercel.app

→ Run it locally with `npm run dev`
Enter fullscreen mode Exit fullscreen mode

Then you can choose how your React project gonna be-
and finnaly you get this-

That's all for this project, if you find this helpful at any point, leave a start 🌟.

Top comments (0)