Effortless Application bundling: React + Parcel in under 2 minutes

September 25, 2019

Bundle Web Applications effortlessly

Bundlers are used to take our various source files (JavaScript, CSS, Sass, etc). and prepare them for use in the browser. This article assumes that you’re already sold on using a bundler for your JavaScript applications. For more information on bundlers and how they work, check out this post by Alberto Gimeno

There are many great tools we can use to bundle our applications like webpack, rollup, and others. Today, however, I want to focus on Parcel.

Getting started

While there is very little overhead with Parcel, there are two steps we need to take (as noted in the Parcel documentation).

First, we must install parcel as a global dependency: npm install -g parcel-bundler OR yarn global add parcel-bundler

From there, we need to create a project folder and initialize the project (with a package.json file): npm init -y OR yarn init -y (remove the -y flag if you’d rather walk through the initialization wizard).

A little code

At this point, we should be good to start writing some code. We’ll start by writing a “Hello world” type React component. In the video, I called this SayHello.js and created it in the root of the project folder. In a less contrived project, we might want a little bit more organization (e.g. we could place the JavaScript files under /src/).

SayHello.js

import React from "react"

export default function SayHello({ name }) {
  return <h1>Hello {name}!</h1>
}

Next, we’ll create an index.js file. We’ll treat this file as the location where we will connect our React component with our DOM elements. We haven’t created the HTML file yet but let’s assume that we will eventually have an element with an id of “main” and we’d like to render our component into this element.

index.js

import React from "react"
import ReactDOM from "react-dom"
import SayHello from "./SayHello"

ReactDOM.render(<SayHello name="everyone" />, document.getElementById("main"))

Finally, we’ll create our HTML file that will serve as the entry point of the application. Please note: we’re using some contrived markup in this example. Ideally, there would be more in our HTML file (like doctype, title, etc) but for the sake of clarity, we’ll keep it pretty light.

index.html

<html>
  <body>
    <div id="main"></div>
    <script src="./index.js"></script>
  </body>
</html>

Running the application

Now we can jump back to our command line and type parcel index.html from the project directory and we should be presented with something like the following indication that our project is now running.

➜  testParcel parcel index.html
Server running at http://localhost:1234
⠼ Packaging
✨  Built in 1.52s.

Navigate to localhost:1234 in the browser, and we should see our running application.

The running application

Please check out the Parcel documentation for more information.

Hi 👋 I'm Ryan Lanciaux. I run Spaceship Studio, LLC. a consultancy specializing in fast and dynamic web and native mobile applications.

I live in Ann Arbor with my wonderful family! In my freetime, I create electronic music.

You should follow me on Twitter