NPM build: A Deep Dive into the Build Process

When we hit that npm run build command in a React app made with Create React App (CRA), we kick off a bunch of behind-the-scenes processes that transform our code into a version that's ready to roll in PRODUCTION.

Let’s have a look into what happens during this build process, what the final output looks like, and why those funky hashed filenames matter.

• This whole topic came up in one of my full-stack interviews, and I think it’s a solid insight for any developer using React and builds.

What Happens During the Build Process?

So, what’s going on when we run npm run build?

Running that command kicks off a build process that compiles, optimizes, and bundles our app’s assets into a neat package.

Here’s a quick rundown of what typically happens

1. Compilation: Our JSX/JavaScript and CSS files get transformed into plain JavaScript and CSS that browsers can understand.

2. Minification: The build process removes unnecessary characters (like whitespace and comments) to reduce file sizes, making our application load faster.

3. Bundling: Multiple JavaScript and CSS files get squished into fewer files to reduce the number of requests a browser has to make. Less hassle for users!

4. Optimization: Images and other assets are polished up to ensure they perform well on the web.

5. Asset Hashing: Filenames get hashed (a fancy way of saying they get a unique string) to help with caching.

   The Structure of the Build Folder

What does the structure of the output folder look like after the build?

After the build, we”ll typically find a build folder containing a structured layout like this:

build/
├── index.html
├── favicon.ico
├── robots.txt
├── asset-manifest.json
├── static/
│   ├── css/
│   │   └── main.22f65aef.css
│   ├── js/
│   │   └── main.22f65aef.js
│   └── media/
│       ├── logo.abc123.svg
│       └── image.efg456.jpg
└── manifest.json

• index.html: This is the main HTML file that loads our whole application. It's like the front door to our app.

• favicon.ico: This little icon shows up in the browser tab and bookmarks. It’s what helps users identify our site quickly.

• robots.txt: This file tells search engines and web crawlers which parts of our site they can or can’t access. For example, here’s a simple robots.txt file

 # https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

• In this case, the instructions say that all web crawlers (like Google) are allowed to visit and look at every part of the website because there are no rules telling them not to go anywhere.

• asset-manifest.json: This file contains a mapping of asset filenames to their hashed versions, which is particularly useful for server-side rendering and cache management.

• static/: Contains static assets organized into subfolders:

  • css/: Holds the CSS files.

  • js/: Contains JavaScript files.

  • media/: Contains images and other media files.

• manifest.json: Provides metadata about our application, often for Progressive Web Apps (PWAs).

Understanding Hashed Filenames

So, why do filenames like main.22f65aef.css and main.22f65aef.js look like that?

The way these filenames are set up serves some important purposes, mainly for managing caches and tracking versions:

1. Base Name (main): This tells you the main entry point for our app’s JavaScript or CSS.

2. Hash (22f65aef): This unique string is a content hash that changes whenever the file gets updated.

   • Cache Busting: If the content of a file changes, the hash changes too. This tells browsers to fetch the latest version instead of relying on an old cached file. So, if main.22f65aef.css gets updated, it might become main.12345abc.css, ensuring users always get the newest styles.

   • Performance Optimization: Having those hashed filenames allows browsers to cache files longer. This means returning users get faster load times because unchanged files can be pulled from the cache instead of being re-downloaded.

Version Tracking Through Hashed Filenames

How does the use of content hashes help with version tracking in a project?

The content hash effectively serves as a Versioning Mechanism for our assets.

Here’s how it helps in version tracking:

• Automatic Versioning: Whenever developers tweak a file, the hash updates too. This makes it easy for team members to spot which assets have changed.

• Team Collaboration: In a team, when you see a filename change from main.22f65aef.css to main.12345abc.css, it’s a clear signal that something important has been updated. This kind of visibility helps a lot during code reviews and communication.

• Traceability: If you’re using version control like Git, you can link filename changes back to specific commits, making it easier to track how the project has evolved.

I hope this helps someone out there if they run into a similar situation! And of course, understanding npm run build is a must for anyone working with React.

Happy coding!