Bundle a React App with Parcel
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.
Instructor: [00:01] 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.
[00:19] We go back to the package JSON. We start from no dependencies at all.
[00:24] 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.
[01:08] 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.
[01:23] 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.
[01:38] 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."
[01:52] 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."
[02:08] This development server has hot module reloading by default. If we change something, it will be updated automatically, without any extra configuration.
[02:19] 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.
[02:44] 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."
[03:00] 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.
[03:17] 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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!