What is NPM and NPX?Create boilerplate template for react using NPX.

1. What is NPM?

• NODE PACKAGE MANAGER (NPM) is default package manager of node js. It manages all the modules and packages for node .It gets installed with node .All the required packages in node js are installed using NPM from NPM registry(Centralized database that hosts packages).

Here is how you can add package using NPM.

command: npm i packageName -l , npm i packageName -g

NOTE: "i" stands for install , "-l" locally ,"-g" globally

Here is how you can remove package using NPM.

command: npm uninstall packageNam

2. What is NPX?

• Just like NPM comes with node NPX comes with NPM( version of NPM must be higher than 5.2.0). NPX or Node Package Execute is used to execute the the packages. NPX can execute packages directly through registry(Centralized database that hosts packages) without installing them locally .

Creating boilerplate template for react by executing creact-react-app package through NPX.

Output of above command:

Now lets discuss what is the work of each file and directory in above boilerplate.

node_module

• node_module directory is created by NPM and inside of node_module node.js stores all the modules (module is a JS file that can be imported ) that is essential for developing applications. Each module is stored in their own directory for example if our project depends on express and bcryptjs then there will be separate directory for express and bcryptjs inside node_module.

public

• The purpose of the public directory is to serve static files. The content to be displayed on the frontend, like images, fonts, is placed in the public folder. Inside the public folder, it contains index.html, which is the root file that is being rendered in frontend.

src

• All the source code of the application is stored inside the src directory.This is where we write react component,business logic ,application logic and styles. Src directory is heart of the application.

.gitignore

• .gitignore is used to ignore the files that is unnecessary or file that contains sensitive data. .gitignore is used in git while publising the project publicly. We can simply write file name or directory name on .gitignore which we want to ignore.

package-lock.json

• package-lock.json stores the name and the version of the package .It ensures that the same version of packages are installed for the different users by doing so it helps to prevent errors.

package.json

• package.json holds important information of our project. It stores project name, details of packages like package version ,name author etc that is being used in project. In package.json we can also create a custom script to run an application though various phase like in development or in production.

README.md

• The ".md" stands for Markdown .Markdown is the lightweight markup language which has syntax to format the text. README.md files are normally used to provide essential information about the project to anyone.We can write description of project,installllation and setup instructions,contact info etc in Readme.md file.

Bikash Karki