When a JavaScript project asks you to install Node.js, run npm or Yarn, choose a Node.js version with n, and start Vite, those instructions can look like a pile of unrelated commands.
They are easier to understand when you treat them as layers in one toolchain. Node.js runs JavaScript outside the browser. npm and Yarn install the packages a project depends on. n helps choose the Node.js version. Vite runs and builds a modern frontend application.
This guide explains what each tool does, how the tools relate to each other, and which part of the setup process each one usually belongs to.
Quick map of the tools
| Tool | Plain-language role | Think of it as | What you use it for |
|---|---|---|---|
| Node.js | JavaScript runtime | The program that runs JavaScript outside the browser. | Running backend JavaScript, command-line tools, test tools, and frontend build tools. |
| npm | Package manager | The commonly bundled tool for installing and running project packages. | Installing dependencies, managing package.json, and running scripts such as development, test, and build commands. |
n |
Node.js version manager | A way to install and switch Node.js versions. | Matching the Node.js version expected by a project or team. |
| Yarn | Alternative package manager | Another tool for installing dependencies and running project scripts. | Working in projects that standardize on Yarn and its lockfile workflow. |
| Vite | Frontend development and build tool | The tool that serves the frontend during development and builds it for release. | Starting a fast local development server, updating the browser during development, and producing deployable frontend files. |
The simplest mental model
Each tool answers a different setup question.
- Node.js: What runs JavaScript outside the browser?
- npm or Yarn: How do we install and track the code this project depends on?
n: Which Node.js version should this terminal use?- Vite: How do we run and build the frontend application?
In practical terms, Node.js is the base runtime. npm and Yarn sit on top of that runtime to manage project packages. n manages the runtime version itself. Vite then uses the Node.js-based tooling layer to serve and build the frontend.
What is Node.js?
Node.js is a runtime environment for executing JavaScript outside the browser. A runtime is the program that actually runs code. In a browser, the browser provides that environment. On a server or in a terminal, Node.js can provide it instead.
That is why Node.js appears in both backend and frontend projects. A backend may use Node.js to run application code or APIs. A frontend project may still need Node.js because package managers, test runners, and build tools run during development.
Key features of Node.js
- Server-side JavaScript: Node.js makes JavaScript usable for backend services and APIs, not only browser interaction.
- Command-line tooling: Many project commands run through tools that execute in the Node.js environment.
- Asynchronous I/O: Its event-driven style helps programs handle operations without waiting for every task in a simple one-by-one sequence.
- Frontend development ecosystem: Even browser-focused projects often depend on Node.js during installation, development, testing, and build steps.
What is npm?
npm is the package manager commonly installed with Node.js. A package manager downloads and tracks reusable code packages, such as libraries, frameworks, and command-line tools.
A dependency is code that a project relies on but does not fully contain inside the project itself. In a typical JavaScript project, npm reads package.json to understand which dependencies and scripts belong to that project.
The same file often defines commands for everyday work. For example, a project may define a development command, a test command, and a production build command. npm can run those scripts through npm run.
Core functions of npm
- Installing packages: Add libraries and tools to a project.
- Managing dependencies: Track package names and version ranges through
package.json. - Running scripts: Execute project commands such as starting the app, running tests, or building assets.
Common npm commands
| Command | What it means |
|---|---|
npm install |
Installs the dependencies listed by the project. |
npm init |
Creates a new package.json for a project. |
npm update |
Updates installed packages according to the project's dependency rules. |
npm run <script> |
Runs a script defined in package.json, such as npm run dev or npm run build. |
What is n?
n is a Node.js version management tool. It helps when one project expects one Node.js version and another project expects a different version. Instead of treating one global Node.js installation as the only option, a version manager gives developers a controlled way to install and select versions.
This matters because JavaScript tooling often depends on the Node.js version available in the terminal. If a project asks for a specific Node.js version, a version manager can make local setup closer to the environment expected by the rest of the team.
What n does and does not do
- It does manage Node.js versions. Use it when the runtime version needs to change.
- It does not install project dependencies. npm or Yarn handles dependencies.
- It does not replace Vite. Vite still runs the frontend development server and production build workflow.
Common n usage
| Command | What it does |
|---|---|
n <version> |
Installs and activates the Node.js version named by the project or team. |
n lts |
Installs and activates the long-term-support release available to n. |
n |
Opens an interactive list of downloaded Node.js versions. |
If a project README gives a specific Node.js version command, follow that project instruction first. Different teams may standardize on different version managers, but the purpose is the same: keep the runtime version predictable.
What is Yarn?
Yarn is another package manager for JavaScript projects. It overlaps with npm because both tools install dependencies and run project scripts. The practical choice is usually made at the project or team level.
As a rule, use the package manager already chosen by the repository. If the project includes a Yarn lockfile and the documentation says to use Yarn, use Yarn. If the project is set up around npm, use npm. That keeps local setup closer to the environment expected by the project maintainers.
Key features of Yarn
- Dependency installation: Add and install packages for a project.
- Cache-aware workflow: Reuse packages that are already available locally when the project and configuration allow it.
- Consistent dependency versions: Use a lockfile to help make installs more predictable across environments.
Common Yarn commands
| Command | What it means |
|---|---|
yarn add <package> |
Adds a package to the project. |
yarn install |
Installs the project dependencies. |
yarn <script> |
Runs a script defined by the project, such as yarn dev or yarn build. |
Some Yarn command names differ by Yarn version and project configuration. For that reason, the safest guide is the project's own README and scripts in package.json.
npm vs Yarn: how to choose in a project
For most beginners, the right choice is not based on personal preference. It is based on what the repository already uses.
| Question | Use npm when… | Use Yarn when… |
|---|---|---|
| What does the project already document? | The README, setup notes, or scripts show npm commands. | The README, setup notes, or scripts show Yarn commands. |
| What lockfile workflow does the project expect? | The project is organized around npm-oriented install behavior. | The project is organized around Yarn-oriented install behavior. |
| Are you starting from scratch? | You want the package manager commonly available with Node.js. | Your team prefers Yarn's workflow and has agreed to standardize on it. |
| What should a beginner do? | Start with the command shown in the project instructions. | Start with the command shown in the project instructions. |
The important point is consistency inside one project. Mixing package managers can make dependency installation harder to reason about because each tool has its own workflow and lockfile behavior.
What is Vite?
Vite is a frontend build tool focused on a fast development experience. It is commonly used with modern frontend frameworks such as Vue.js and React. During development, it starts a local server and updates the browser quickly when files change. For release, it builds optimized files that can be deployed.
A development server is a local server used while building the application. It lets developers open the app in a browser and see changes during development. A production build is the prepared output that can be deployed after development work is complete.
Vite is not a replacement for Node.js, npm, or Yarn. It uses the Node.js-based toolchain. You usually install Vite as a project dependency, then run it through a package-manager script such as npm run dev or yarn dev.
Common Vite commands
| Command | What it does |
|---|---|
vite |
Starts the Vite development server in the current project. |
vite build |
Builds the frontend application for production. |
vite preview |
Serves the built application locally so you can preview the production output. |
How Vite differs from older bundler workflows
- Fast development startup: Vite uses native ES modules during development to reduce waiting time.
- Hot module replacement: Many file changes can appear in the browser quickly without a full page reload.
- Light configuration: Many projects can start with less setup than older, heavily configured build workflows.
How the tools work together in a real setup
A typical frontend setup flow looks like this.
- Check the required Node.js version. The project may mention a version in its README or configuration.
- Use
nif you need to change Node.js versions. This aligns the terminal environment with the project. - Install dependencies with npm or Yarn. Use the package manager the project already uses.
- Start the development server. This is often done through a script such as
npm run devoryarn dev. In a Vite project, that script commonly starts Vite. - Build and preview before release. Vite can build production files and preview the built output locally.
For example, a modern frontend project may use Node.js as the runtime, npm or Yarn to install dependencies, n to align the Node.js version, and Vite to run the development server and create the production build.
Troubleshooting by layer
When a setup fails, it helps to ask which layer is failing instead of treating every command as the same kind of problem.
| Symptom | Layer to check first | Why |
|---|---|---|
| The project says the Node.js version is wrong. | Node.js and n |
The runtime version is probably the first thing to align. |
| Dependency installation fails. | npm or Yarn | The package manager is responsible for installing project packages. |
A script such as dev or build fails. |
package.json, npm or Yarn, and Vite |
The script is launched by the package manager and may call Vite or another project tool. |
| The frontend does not update during development. | Vite and the development server | Vite is the layer responsible for the local development workflow in a Vite project. |
Common confusion points
Is Node.js the same as npm?
No. Node.js runs JavaScript. npm manages packages and scripts for a project. They are closely connected because npm is commonly installed alongside Node.js, but they do different jobs.
Does n install project dependencies?
No. n manages Node.js versions. npm or Yarn installs project dependencies. This distinction helps when troubleshooting setup problems: first confirm the Node.js version, then confirm the package installation, then check the development or build command.
Should a project use both npm and Yarn?
Usually, one project should standardize on one package manager. Mixing package managers can make dependency installation harder to reason about because each tool has its own workflow and lockfile behavior.
Is Vite only for React?
No. Vite is commonly used with modern frameworks such as Vue.js and React, but it is better understood as a frontend build tool that can support different frontend project types.
Does Vite replace Node.js?
No. Vite uses the Node.js-based toolchain. Node.js provides the runtime environment, npm or Yarn installs the project dependencies, and Vite handles the frontend development and build workflow.
Choosing the right tool for each job
- Use Node.js when JavaScript needs to run outside the browser or when a project depends on Node-based tooling.
- Use npm when the project uses npm or when you want the package manager commonly available with Node.js.
- Use Yarn when the project or team has standardized on Yarn and its lockfile workflow.
- Use
nwhen different projects require different Node.js versions. - Use Vite when building a modern frontend that benefits from a fast development server and a production build process.
Related learning paths
If you are still mapping the JavaScript ecosystem, these related articles may help.
- Node.js, Vue.js, Nuxt.js, and Next.js: How the Stack Fits Together
- Major JavaScript Frameworks and Libraries: A Practical Overview
- Benefits of Learning React: Skills, Ecosystem, and Career Value
- Key Points to Check When Solving Node.js Errors
Conclusion
Node.js, npm, n, Yarn, and Vite are closely connected, but each one has a distinct responsibility. Node.js runs JavaScript. npm and Yarn manage dependencies and scripts. n manages Node.js versions. Vite improves the frontend development and build workflow.
Once you understand those layers, project setup instructions become easier to read. You can tell whether a command is changing the runtime, installing dependencies, running a script, or building the frontend application.
At greeden, we help turn ideas into practical software through system development and software design. If you need support with system development or want to discuss a project, contact greeden through the service desk.