I hope you understand every concept in our previous blog. Now let's learn more about React🥳
In this blog, we will learn about how to make our app production-ready. So let me introduce you to the first thing -
1. What is npm?
-npm doesn't stand for the Node Package Manager
You can give your own name to npm; I'll give it the name "new pop music." It is a package manager for the JavaScript programming language and is the default package manager for Node.js, a popular JavaScript runtime. npm is used to manage and distribute packages (libraries and modules) of reusable JavaScript code. It allows developers to easily install, share, and manage dependencies for their projects.
Let's add npm to our project with the following command:
1. `npm init` (you can do `npm init -y`, but it will skip some points, and I want to show you each point).
2. Now, it will ask you for a package name. I'll give it the name "ReactSeries."
3. Version: (1.0.0)
4. Description: This is React series.
5. Entry point: App.js
6. Test command: jest
7. Git repository URL
8. Keywords: react, jatin
9. Author: Jatin Sharma
10. License: "ISC"
Now, it will ask, "Is this okay?" Answer, "Yes, it's okay😉."
It has now created a JSON file.
Let's install our dependencies.
The most important package in our project is the bundler. What is a bundler?
A bundler is a tool that takes all your JavaScript code, along with any other assets like CSS or images, and combines them into a single file (or a few files) that can be served to the browser.
It packages your app properly to ship the app to production.
2. What is Parcel/Webpack?
Parcel automatically tracks all the files, configuration, plugins, and dev dependencies involved in your build and granularly invalidates the cache when something changes. It integrates with low-level operating system APIs to determine what files have changed in milliseconds, no matter the project size.
What is package.json?
The specifics of npm's package.json handling. This document contains all you need to know about what's required in your package.json file. It must be actual JSON, not just a JavaScript object literal. A lot of the behavior described in this document is affected by the config settings described in config.
Let's install Parcel in our project with the following command:
`npm install -D parcel`
What is -D?
There are two types of dependencies an app can have:
1. Dev dependencies - generally required for the development phase.
2. Normal dependencies - required for production.
For example, we need Parcel, which is a dev dependency. This is how we tell npm we need a dev dependency by writing -D.
Now open the package.json file, and you will see:
"devDependencies": {
"parcel": "^2.8.3"
}
Read about ^ and understand what it does to your app🧐.
Now you will see the package-lock.json file after you install Parcel. What is package-lock.json? It keeps track of every package installed. It keeps the exact version.
Difference between package.json and package-lock.json?
package.json: Manifest for the project, managing metadata, and configuration.
package-lock.json: Automatically generated by npm when installing or updating packages. Locks the exact versions of dependencies for reproducibility and consistent installations.
One more thing is created in our project: node_modules.
What is node_modules? Is it good to push node_modules to GitHub?
The node_modules folder is created when you install packages using the Node Package Manager (npm). It stores the packages and their dependencies that your project requires. It is generally not a good idea to push the node_modules folder to GitHub. This is because the node_modules folder can be very large and can contain sensitive information, such as API keys. Additionally, the node_modules folder can change frequently, making it difficult to track changes to your project.
If you are working on a team project, it is best to have each team member install the node_modules folder on their machine. This ensures that everyone is using the same version of the packages, and the node_modules folder is not accidentally pushed to GitHub.
Every package you install has its own package.json and own dependencies. The best practice is to keep the node_modules in the .gitignore file.
Q: Is it important to put package-lock.json and package.json onto your Git repo? A: Yes, if you have package.json and package-lock.json, you can recreate your node_modules. That's why it is not required to put node_modules on your Git. Whatever you regenerate, just don't put it on Git.
Now let's take a break😉
Part 2
Now we will write the command: npx parcel index.html
And now you will see: Server running at http://localhost URL
Congratulations🥳 You have hosted your app on your server. Parcel is doing this for us.
What is npx? Executing package; it will execute Parcel. NPX is a package executer, used to execute JavaScript packages directly without installing them. NPX does not install packages, so package pollution on the machine is not a concern. The most common application of NPX is the create-react-app command. Since we only need to use it once, i.e., while initializing the project, we do not install it.
Now, if you remember, we first injected React into our app using CDN links, right? But this is not a preferred way to bring React into our project. Why? Fetching from CDN is a costly operation. It will fetch React from unpkg.com. Suppose I already have React in my node_modules; it's easier than creating React from another network.
So let's see the second method of creating React. Command: npm install react Did you notice I don't write -D here because I want React as a normal dependency, not a dev dependency?
Now check package.json:
"dependencies": {
"react": "^18.2.0"
}
It means we have successfully installed React. Similarly, install React DOM: Command: npm i react-dom (don't panic; npm i is a short version of npm install)
Now, again check package.json:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
Now we no longer need CDN, so remove it from the index.html file.
Let's start our server again and check if it's working or not. Oops, we got an error: Uncaught ReferenceError: React is not defined at App.js:8:16
Why this error? We have just installed the package, but our code doesn't understand where this React is coming from. I'll use this React in our code; I'll use it using the import keyword.
file - App.js:
import React from "react";
import ReactDOM from "react-dom";
Now start the server, and we will get a new error: Parcel encountered errors @parcel/transformer-js: Browser scripts cannot have imports or exports.
We need this import; we need to tell the browser that this is not a normal browser script; it's a module. To do this, add the fo llowing
to index.html:
<script type="module" src="./App.js"></script>
Now let's explore Parcel's superpowers:
Dev build
Local server
HMR (Hot Module Replacement) -> automatic refreshing of the page
Parcel uses a file-watching algorithm written in C++ for HMR
Caching for faster builds
Image optimization
Minification
Bundling
Compression
Consistent Hashing
Code splitting
Differential Bundling -> support for older browsers
Diagnostic
Good error handling
HTTPS
Tree shaking -> remove unused code
Different dev and prod bundles
To create a prod build, use the command:
npx parcel build index.html
Note: You may encounter an error during the build process related to the "main" attribute in package.json. To fix this, open package.json and remove the "main" attribute.
Now delete the dist folder and run the build command again:
npx parcel build index.html
This will create the dist folder with three files:
✨ Built in 871ms
dist\index.html 324 B 1.46s
dist\index.8d566482.css 84 B 104ms
dist\index.68db4388.js 138.78 KB 834ms
Now you can delete the .parcel-cache folder, and if you want to regenerate dist and .parcel-cache, add these folders to your .gitignore file.
Congratulations! You have now built a production-ready app. Let's make the app compatible with different browsers.
- Browser list You need to specify which browsers your app will support. Configure it in your package.json by adding:
"browserslist": [
"last 2 versions"
]
For example:
"browserslist": [
"last 2 chrome versions",
"last 2 firefox versions"
]
This means it might or might not work on other browsers, but it will definitely work on the specified Chrome and Firefox versions.
How to know what to write? Check this website: browserslist.dev. Explore this site.
Congratulations! You have made your app production-ready.