Breaking down `npx create-react-app` from npm to npx🥷

Hello🙋‍♂️ to all the curious devs🤓. Today in this post I'm going to breakdown the things that npx create-react-app does for us. I know there are many other articles for the same but as always I'm documenting👻 this firstly for me and if it proves to be useful for anyone out here reading this it would make me more than happy😸.

So let's start. I'll break this down in the form of questions, and below is the first.

What exactly is npx?

So all those who don't know and just kept on running the command npx create-react-app, know that npx is a node package runner😎.

Oh! that was simple. N-node, P-package and X-???
Let the X here be from executor, kind of program executor in other words program runner. So here we have it node package runner.

We are going good😁 so far, now this article is not about npm but you might be thinking, and I mean might be thinking🤨 what is npm then?

So, again the same way npm is 'Node Package Manager' - N-Node, P-Package, M-Manager.

Now let's break down what is the role of a package manager and a package runner.🤫

Node Package Manager

• npm is a package manager that helps💪 you in managing the dependencies/packages you as a developer want to have in your project.
• It also helps you in managing🤏 whether you want to install those packages globally (for all the projects) or locally (for the current project).
• This all that we are talking about is a CLI (command line interface) that gets installed when you install Node JS in your system.

But npm is more than that.🕵🏼‍♂️

So when you install a package on your system it's fetched from online, and in online that place is the npm repository.
So npm is a package manager which is a combination of a CLI and a Repository.

With now this sorted😼, it's time to hop back towards npx.

So it's obvious that you installed a package and you wanna do something with it. Maybe uninstall it which you can easily do with npm or use it by running it.

There's a catch

How to run a package or in other words execute it. Can't we do with the help of npm? And boy we can do it.

So the answer to why we need npx in the very first place is just about to be revealed.🦹‍♂️

How to run a package with the help of npm?

Now, for those who are thinking "I've run a package with npm before and aren't be always starting react server with the help of the command - npm run start"

Yes, so if we are able to do it why in the world npx🥴🥴???

So the catch here is that - you can run only those packages using npm run those are specified in your projects package.json. And that simply means if you wanna run a npm package you gotta add that in your package.json.

You see all those inside scripts. That's the key to npm run for various packages. Like format is for the prettier.
There are other tedious way to do so, such as specifying the local path:_ npm run ./node_modules/.bin/your-package_

Now, there comes our hero🦸‍♂️ into the picture - NPX.

Let's explore what npx brings on the table🧙‍♂️ for us.

• npx easily runs Node.js based executable installed via npm.
• We can run a locally installed package easily, and that's what we are looking here for.
• There are other perks of npx but not in this article.

Do you know you can start react server with npx also as:
npx react-scripts start

It's time for CRA (create-react-app)👩🏻‍🎨

If you're a react-dev like me. Then you might have used this command atleast once in your life - npx create-react-app

Now we know what npx is and from all our discussion it's also clear that create-react-app is an executable, so let's find out what it does for us.

CRA is a toolchain.

And now another term to breakdown🤦. What is a toolchain??

• Don't worry💆 it's a simple term which holds its meaning in its name. It's a chain of tools or a collection of distinct tools that helps in achieving the process of completing the software development and sometimes deployment too.
• So CRA (create-react-app) is a JavaScript toolchain or a set of software tools which are basically CLIs to help in creation of a react project.

So instead of reinventing the wheel again, I would add few content from React Docs:

A JavaScript build toolchain typically consists of:

• A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
• A bundler, such as webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.
• A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.

So, in short a CRA offers all these functionalities. For more info on this you can refer to react docs.

Thank you folks for reading all through this article. I tried my best to breakdown the terms that would've otherwise made you feel like you are missing some context to this.

Keep reading, keep learning, and never stop being curious. See you until next time.✌️✌️✌️

Comments

[Md. Shahadat khokhar]

Fabulously explained 👏