by Michael Ozoemena
How to use Parcel to bundle your React.js application
Parcel is a web application bundler which offers a blazingly fast performance utilizing multicore processing and requires zero configuration.
So like Webpack? Yes, like Webpack, but lighter and with no configuration required.
What this article offers.
create-react-app or anything like that.
The first thing we need to do is set up our project. I have created some starter files on GitHub, and you can see them here. When you have the project cloned on your computer, run
git checkout beginning and
npm install to put things in a “starter” position (note that at this point, the project doesn’t really work because we don’t have any bundled files yet).
Bundling the files.
Now, we have a simple
express server set up to serve files from the
dist/ folder. The reason you see
cannot GET / when you run
npm start and go to
localhost:5000/ is because no build has happened yet. As such, the
dist/ folder is empty/non-existent.
In order to start bundling our files and have something show up when you go to
localhost:5000/, we need to do a few things:
- Install Parcel by running
npm install parcel-bundler --save.
- Create build scripts.
- Run the build scripts and start our server.
- Load up
localhost:5000/in the browser.
Creating build scripts and bundling files.
Before we move into actually creating the build scripts and adding it to our
package.json file, let’s learn a bit more about bundling files.
Note that the
parcel command will not work if you only have
parcel installed in your project’s
node_modules folder and not globally using the
A nice feature that comes with Parcel (aside from other amazing stuff) is the in-built
dev-server with hot module replacement. You can simply make use of this
dev-server by running
parcel index.html where
index.html is your entry HTML file.
Unfortunately, we won’t be utilizing the
dev-server feature in our demo project, because we’ve built our own little
express server, but this doesn’t mean we won’t still have
hot module replacement. Feel free to give the
dev-server a spin on your own time.
The commands we want to use instead are:
parcel watch index.htmlto build our files into
dist/folder and to “watch” for changes to our files during development mode, and
parcel build index.htmlto just build our files and dump them into
dist/folder (useful for production mode).
If we had run
npm install parcel-bundler -g instead of
npm install parcel-bundler --save, then the commands in the previous paragraphs will run smoothly — but we didn’t. We installed Parcel into our local
node_modules folder, so instead of running
parcel index.html, we’ll run
./node_modules/.bin/parcel index.html to get our files bundled.
Now that we’ve learned all that, we can proceed to editing our
package.json file and adding our build scripts into it.
As you can see, I have created three
npm scripts. Now, when we run
npm run parcel:watch we will have our files built into the
Viewing the results.
In order to view our simple React.js app in the browser, we can run
npm start (an already existing script) to start our
express server, which should then be listening to
Key things to take away.
- You can get up and running with Parcel with absolutely zero configurations. All you have to do is install it and run the commands.
- Parcel is suitable for both development and production modes.
- Parcel has an in-built
hot module replacementto help you quickly get moving.
- There’s more to Parcel than what’s in this article, so be sure to look at the documentation to get more in-depth.
I hope you enjoyed it. If you did, don’t forget to leave a comment and a few claps.