Bundle a React App with Parcel

Alex Jover Morales

React

JavaScript

Parcel comes in as the new cool kid in the bundlers world. Unlike other bundlers which take lots of explicit configuration, Parcel works out of the box and requires almost zero-configuration by intelligently inferring it depending on what you use in your code.

This lessons shows you how to bundle a simple React app starting from scratch and having hot-reloading, dev-server and generating an optimised bundle with no configuration and only 4 dependencies.

Code

You must be a Member to view code

Access all courses and lessons, track your progress, gain confidence and expertise.

Become a Member
and unlock code for this lesson

orLog In

Discuss

Transcript

Instructor: Let's start totally from scratch where we have an app that has a simple index.html, a simple index.js which is the entry point, and a very simple app component which says, "hello, react." That's all.

We go back to the package JSON. We start from no dependencies at all.

Let's then install React and React DOM. Then, let's install a setup dependency, both the Parcel bundle, and we need Babel and some configuration to make possible to inaudible JSX, new versions of MS Read, and so on. We can use babel-preset-react-app, which takes all the Babel configuration and dependencies from Create React App, which is all it needs to run a React app.

Now we need to create a babelrc file in the root of the project, where we need to define the preset of React app that we just installed. Then it's applied.

Parcel will use, as an entry point, the dependencies that we define in the index.html. Let's here import the index file that would have, inside, src.

Now we have an arom parcel in development mode. For that, let's create a script. Let's name it Start. All you need is to say, "parcel index.html."

We run this. We run a development server that runs it in this URL, which I already have open here. We reload, and then we see "hello, react."

This development server has hot module reloading by default. If we change something, it will be updated automatically, without any extra configuration.

Another cool feature is that if we make a mistake -- let's say we misspelled this import -- it will output a very nice log here in the console. Let's get this back to working again. By default, we can also import CSS, and you'll see it has CSS modules, as well.

Finally, in order to generate a bundle in production mode, all we need to do is go here. Let's duplicate this script and say, "build." We just need to say, "parcel build."

This will set the node development variable, which some developers use to perform automation. It will also minify all code generated. We can skip that using no-minify, although that's something you probably wouldn't want.

Let's stop the development server, and then run NPM run build. There we go. Our production bundle has been generated in the dist folder.