DEV Community

VIDHYA VARSHINI
VIDHYA VARSHINI

Posted on

npm, npx, VITE and CRA in Javascript

NPM:
• This stands for Node Package Manager. It is the default package manager for Node.js.
• This is mainly used to install, manage, and share code libraries (called packages or modules) for JavaScript projects.

How to install package?
For the installation of libraries such as React, Express and Lodash, npm can be used.
Example:

npm install express
Enter fullscreen mode Exit fullscreen mode

It records all the libraries your project requires inside a file named package.json.You can set up custom scripts (such as start, build, or test) in package.json and execute them with npm.

Example:

npm run start
Enter fullscreen mode Exit fullscreen mode

NPM CLI: CLI stands for command line interface. It is the tool used in the terminal/command prompt to run npm commands.

npm init → create a new project

npm install react → install React

npm run start → run the start script

How to install npm?

  1. Open the termial and enter 
sudo apt install npm
Enter fullscreen mode Exit fullscreen mode
  1. Create react app. 
npm create -react-app my-app
Enter fullscreen mode Exit fullscreen mode
  1. Start project: 
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

NPX:
• It stands for Node Package Execute.
• This lets you execute a package directly from the npm registry. npx runs commands from packages even if they aren’t installed in the system.
• It can be used for one time task.

Why NPX is useful?
• No global installs → Use tools without adding them permanently to your system.

• Always up to date → Fetches the newest version each time you run it.

• Quick testing → Experiment with packages instantly.

• Project-specific → Uses the package version from your project when available.

Difference between NPX and NPM:

  1. Main purpose: NPM used to install/manage packages while NPX used to execute/run packages.
  2. Installation: NPM installs packages globally or manually whereas NPX runs packages without installing globally.
  3. Version used: NPM uses the version installed in your system/project whereas NPX can fetch and run the latest version or project version.

Example: NPM uses "npm install react" which installs react.
NPX uses "npx create-react-app my-app" which create react app tool.

CRA:
• This stands for Create React App.
• It is a command-line utility that allows you to rapidly create a new React project with all essential configurations pre-configured. CRA sets up Webpack, Babel, and other build tools automatically.

• Create React App (CRA) is a command-line utility created by Facebook that allows you to effortlessly set up a new React project without requiring any manual setup.
• It autonomously handles tools such as Webpack and Babel, organizes a uniform folder structure, and features a live-reloading development server.
• CRA enables the creation of production-ready applications and is widely embraced in the React community, allowing developers to focus on coding instead of setting up the environment.

Vite:
• This is a modern tool used for building front-end projects. It is very fast and helps developers see changes instantly in the browser while coding.
• Vite works with frameworks like React, Vue, or Svelte and creates a ready-to-use project with minimal setup.
• For production, it builds optimized code automatically, making development easier and quicker compared to older tools.
• Developers prefer Vite for React because:

a) It starts the dev server almost instantly.

b) It rebuilds your app super quickly.

To be discussed

Top comments (0)