How to get started with zero configuration JavaScript bundling

Christopher Shaffer
Jun 24 · 7 min read

It’s a great time to be a JavaScript developer. There are thousands of tools at our disposal and the quality of the tooling has never been better.

We have create-react-app, Angular CLI, and Vue CLI which all aim to solve the biggest hurdle someone new to JavaScript web app development needs to clear — configuring their development environment to actually start coding.

A major part of that development environment these days involves how we serve our app to the browser while we’re coding (if you’re not using something that provides hot module reloading, you’re doing it wrong) and correctly configuring this functionality to work with all the moving parts can be a pain, but it doesn’t have to be.

We’re going to set up a basic React app using Parcel and watch its magic happen for ourselves.

I want to introduce you to Parcel.js, but first let’s talk about what a bundler is, and why it matters to you as a JavaScript developer.


What’s a Bundler?

It’s a valid question, even if you’ve been working with JavaScript for a while. In today’s world of developer tooling, bundlers are often working behind the scenes, and you may not even know that you’re using one. Angular, Vue, and React tooling all rely on webpack if you’re using their user-friendly recommended configurations.

Webpack and other bundlers take our code and bundle it into smaller, fewer, more performance-efficient files which contain our code, but usually in a minified form. This reduces the delivery size of our apps, helps reduce the latency of code execution, and helps to optimize our app for the web.


Configuration Blues

When webpack arrived, it brought with it tons of benefits over previous bundlers, but it also brought with it the headache of configuring webpack.

Most bundlers require some configuration to even use their most basic features. This can be a huge barrier of entry for new users and sometimes is so tough that users just throw up their hands and give up.

Thankfully, many of the CLI tools I mentioned above take care of this configuration for us and even obscure it from view entirely inside our editors, such as in VS Code. This is apparent in the image below, showing a create-react-app project before and after ejecting, which exposes the bundler, among other things.

A comparison of files in a create-react-app project before and after ejecting.

Unfortunately, that’s still not as simple as it could be, and it also means our app size might not be a slim as it could be. It also means in many cases when we try to incorporate additional modules we have to “eject” or reveal the obscured configuration, then get our hands dirty trying to make the bundler play nice with our new module.

What if you want to set up a new project with the most minimal configuration required just to get hot reloading (auto-refresh on file save), minified bundling, and your favorite front-end libraries without having to configure anything?

Parcel to the rescue.


What is Parcel.js?

According to the tag line on their home page, Parcel is a “Blazing fast, zero-configuration web application bundler”.

I’ll admit, when I first read this, I was skeptical. Not of the speed — webpack is pretty fast, too — but of the “zero-configuration”.

I road the struggle bus when I first started using webpack and forced myself to read the documentation repeatedly until I actually understood what I was doing. I built a boilerplate and never touch it unless I absolutely have to. It’s just not fun to code webpack configurations.

When someone tells me to “just install this, it’s magic!” I approach it with one raised eyebrow. However, I can say with all honesty Parcel is the real deal.

Parcel will bundle your HTML, CSS, JavaScript and my favorite, TypeScript without issue. With React, for example, you can start using .tsx files right out of the gate with no configuration other than your basic package.json and tsconfig.json. You can easily add third-party libraries like Bootstrap with no hassle.

Let’s go over how to get running with Parcel in just a few easy steps.


Creating Our Project

While Parcel doesn’t require any real configuration, if we want a project, we’ll need to create the files. It doesn’t do everything for you!

We’re going to create a simple React app, which means we’ll need some very basic files, along with our package.json and .babelrc. While I generally write everything in TypeScript these days, we’ll use JavaScript to keep it simple, but Parcel supports TypeScript too. Go ahead and create a new project directory, along with the following files in that directory:

new-project/
src/
index.html
index.js
.bablerc
.gitignore

Next, we’ll want to initialize our new project with npm init. This will also create our package.json file. In case you haven’t done this before, you will be prompted to answer a series of questions. You can accept all the defaults or provide your own answers. Be sure you leave the entry point as the default index.js.

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (parcel-example)
version: (1.0.0)
description: An React app using Parcel
entry point: (index.js)
test command:
git repository:
keywords:
author: Christopher Shaffer
license: (ISC)
About to write to /Users/username/code/parcel-example/package.json:
{
"name": "parcel-example",
"version": "1.0.0",
"description": "An React app using Parcel",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Christopher Shaffer",
"license": "ISC"
}
Is this OK? (yes) yes

Install Parcel

We can now install Parcel, along with our other dependencies. Run the following to install Parcel, React, and the Babel dependencies.

npm install --save-dev parcel-bundlernpm install --save react react-domnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react

Once that’s done, we can move on to adding some basic code to get our app started.


Time to Code!

We need to add some minimal code to our project to get everything ready to be run by Parcel. Let’s start by dropping some HTML into our index.html file.

Add the following to index.html.

We also need to set up the bare essentials for our app. Let’s create our App class to get this party started. Place the following code in your index.js:

In order to start the app, similar to how you may have done with create-react-app previously, let’s add a couple of management commands to package.json. You can remove the test command created when you ran npm init or add your own tests there.

Make the following changes under the scripts key in your package.json:

"scripts": {
"start": "parcel src/index.html --open",
"build": "parcel build src/index.html",
"clean": "rm -rf dist/*"

},

These commands will allow us to start the app and have it open in the browser automatically, build the app for production and clear the dist folder if we’re ready to create a new build.

Be sure to add .cache and dist to your .gitignore file to prevent committing these folders to Git. The .cache folder is used by Parcel as a temporary cache directory when building your app for development and production.


Liftoff

It’s time to test our work. Wait…that’s it? Yes! Parcel is really that simple. To launch your app, run npm start. That few minutes of coding was so simple it’s hard to believe, but you now have a running, hot-reloading, bundled React app.

We’re not done yet, though. Let’s add some styling by adding Bootstrap to see some more Parcel magic.


Get Stylish

We’re going to add a couple of items to our index.js just to show off how easy it is to add styling. I’m going to add Bootstrap and React Bootstrap, which will let us easily use Bootstrap’s styling with imported components. If you want you can add another styling library instead.

npm install --save react-bootstrap bootstrap

Let’s import Bootstrap and React Bootstrap. We’ll also and add a couple of components and classes to our index.js.

I’ve added comments in the gist below to indicate where you should make your changes.


Watch the Magic Happen

Let’s take a quick look at our app in the browser. We’ll see all of our styles and our new Card component have been added.

The purpose of this exercise in adding our styling modules was to show that you don’t need to configure anything — it just works. There’s no configuration necessary for your bundler; Parcel just sees that you’ve added CSS and it automatically bundles this into your app!


The Really, Really Easy Way

That was pretty easy, right? Would you believe me if I told you there is an even easier way to get started with Parcel using React, Vue and/or TypeScript?

An awesome guy named Jakob Lind created a great tool at createapp.dev that will set everything up for you, zip it up and let you download it to get your project started. You can just click a few boxes for the things you want to include and it will literally write the code for you. The site also works with webpack.

Of course, I didn’t skip directly to this to start with because it’s important to have at least a basic understanding of how to do this on your own.


Conclusion

Parcel certainly makes starting a new project faster and easier and reduces the barrier to entry significantly in comparison to similar options. I hope this article will help next time you need to start a new project.

Please leave feedback and comments in your responses below and I will try to answer concerns and questions promptly.

Thanks for reading!

Better Programming

Advice for programmers.

Christopher Shaffer

Written by

Chris Shaffer is an independent TypeScript and JavaScript developer and Linux admin. He loves talking tech and covers JavaScript, TypeScript and Linux.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade