npm for absolute beginners

Summary

This video tutorial introduces viewers to npm (Node Package Manager) and walks through the installation and basic usage process. It covers downloading and installing Node.js, navigating the command line, and starting a new npm project. Key concepts like creating a project with npm, managing dependencies, and using npm scripts are explained. The tutorial also addresses how to install and manage additional packages, the importance of version control, and the difference between npm and npx commands. The video aims to help beginners set up and manage their development environment effectively.

Takeaways

• 😀 To get started with npm, first install Node.js from nodejs.org. npm comes bundled with Node.js, so you don't need to install it separately.
• 😀 Use the command line (Command Prompt on Windows or Terminal on macOS) to interact with npm. This is essential for creating projects and managing dependencies.
• 😀 When initializing a project, run 'npm init' to create a new npm project. For frameworks like Vite, use 'npm create vite@latest <project-name>' to set up the project.
• 😀 After creating a project, navigate to your project folder using 'cd <folder-name>' and open it in Visual Studio Code with 'code .' to begin development.
• 😀 To install the necessary dependencies for your project, use 'npm install'. This will install all dependencies listed in your 'package.json' file.
• 😀 Dependencies needed only for development (like testing tools or build tools) are listed under 'devDependencies' in 'package.json'. Install them with 'npm install --save-dev <package-name>'.
• 😀 To run scripts like a development server or build process, use 'npm run <script-name>'. For example, 'npm run dev' will start the development server.
• 😀 The 'node_modules' folder, where npm installs packages, is typically excluded from version control (e.g., with a .gitignore file) because it contains many files that don't need to be tracked.
• 😀 The difference between 'npm' and 'npx': 'npm' is used for managing packages, while 'npx' is used to execute packages without installing them globally, like running 'npx create-react-app <app-name>'.
• 😀 When using npm, always check the documentation for flags like '--save-dev', which specify whether a package is a regular dependency or a development-only dependency.
• 😀 After installing dependencies, you'll likely need to use version control (like Git) to track changes and collaborate. Node modules are excluded from version control to keep repositories clean and lightweight.

Q & A

What is npm, and why do I need it?

npm (Node Package Manager) is a tool that allows you to manage packages or libraries for your Node.js projects. It helps you install, update, and manage dependencies needed for building and running your projects. It’s essential for modern web development as it simplifies dependency management and project setup.

How do I install npm on my computer?

To install npm, go to the official Node.js website (nodejs.org) and download the installer. npm comes bundled with Node.js, so installing Node.js automatically installs npm. Follow the installation wizard, and once completed, npm will be ready to use.

What command do I use to navigate to a specific folder in the terminal?

You use the `cd` command to change directories. For example, `cd Desktop` moves you to the Desktop folder, while `cd ..` moves you one directory back. You can also drag and drop folders into the terminal to quickly navigate to them.

How do I initialize a new npm project?

To initialize a new npm project, use the command `npm init`. This creates a `package.json` file, which keeps track of your project’s dependencies. You can also use `npm create [framework] [project-name]` to quickly initialize a project with a specific framework, like Vite or React.

What is the purpose of the `package.json` file in an npm project?

The `package.json` file contains metadata about your project, including the project name, version, dependencies, and scripts. It helps npm manage your project's packages and makes it easier to share your project with others, ensuring they install the same dependencies.

What’s the difference between `dependencies` and `devDependencies` in a `package.json` file?

`dependencies` are packages needed for your project to run in production, such as libraries used on the live website. `devDependencies`, on the other hand, are tools used during development, such as testing frameworks or build tools, and they are not included in the live website.

How do I install additional packages in an npm project?

To install an additional package, use the command `npm install [package-name]`. For example, `npm install prismjs` installs the Prism.js package for syntax highlighting. This will update your `node_modules` folder and `package.json` file with the new dependency.

What is the role of the `node_modules` folder in an npm project?

The `node_modules` folder contains all the installed packages for your project. These packages can include both direct dependencies and their own dependencies. This folder is automatically created when you install packages using npm.

How do I run scripts defined in `package.json`?

To run a script defined in your `package.json`, use the command `npm run [script-name]`. For example, `npm run dev` runs the `dev` script, which typically starts the development server for your project.

Why should I use `.gitignore` for the `node_modules` folder?

The `node_modules` folder can be very large and contains dependencies that can be automatically restored by running `npm install` on any machine. Therefore, it’s common practice to add `node_modules` to your `.gitignore` file so that it’s not tracked by version control systems like Git.