{"id":286449,"date":"2019-04-25T07:22:55","date_gmt":"2019-04-25T14:22:55","guid":{"rendered":"http:\/\/css-tricks.com\/?p=286449"},"modified":"2019-04-25T07:22:55","modified_gmt":"2019-04-25T14:22:55","slug":"using-parcel-as-a-bundler-for-react-applications","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-parcel-as-a-bundler-for-react-applications\/","title":{"rendered":"Using Parcel as a Bundler for React Applications"},"content":{"rendered":"<p>You may already be familiar with <a href=\"https:\/\/css-tricks.com\/tag\/webpack\/\">webpack<\/a> for asset management on projects. However, there\u2019s another cool tool out there called <a href=\"https:\/\/parceljs.org\/\" rel=\"noopener\">Parcel<\/a>, which is comparable to webpack in that it helps with hassle-free asset bundling. Where Parcel really shines is that it requires zero configuration to get up and running, where other bundlers often require writing a ton code just to get started. Plus, Parcel is super fast when it runs because it utilizes multicore processing where others work off of complex and heavy transforms.<\/p>\n<p>So, in a nutshell, we\u2019re looking at a number of features and benefits:<\/p>\n<ul>\n<li>Code splitting using dynamic imports<\/li>\n<li>Assets handling for any type of file, but of course for HTML, CSS and JavaScript<\/li>\n<li>Hot Module Replacement to update elements without a page refresh during development<\/li>\n<li>Mistakes in the code are highlighted when they are logged, making them easy to locate and correct<\/li>\n<li>Environment variables to easily distinguish between local and production development<\/li>\n<li>A &#8220;Production Mode&#8221; that speeds up the build by preventing unnecessary build steps<\/li>\n<\/ul>\n<p>Hopefully, you\u2019re starting to see good reasons for using Parcel. That\u2019s not to say it should be used 100% or all the time but rather that there are good cases where it makes a lot of sense.<\/p>\n<p><!--more--><\/p>\n<p>In this article, we\u2019re going to see how to set up a React project using Parcel. While we\u2019re at it, we\u2019ll also check out an alternative for <a href=\"https:\/\/github.com\/facebook\/create-react-app\" rel=\"noopener\">Create React App<\/a> that we can use with Parcel to develop React applications. The goal here is see that there are other ways out there to work in React, using Parcel as an example.<\/p>\n<h3>Setting up a new project<\/h3>\n<p>OK, the first thing we need is a project folder to work locally. We can make a new folder and navigate to it directly from the command line:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">mkdir csstricks-react-parcel &amp;&amp; $_<\/code><\/pre>\n<p>Next, let\u2019s get our obligatory <code>package.json<\/code> file in there. We can either make use of npm or Yarn by running one of the following:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">## Using npm\r\nnpm init -y\r\n\r\n## Using Yarn, which we'll continue with throughout the article\r\nyarn init -y<\/code><\/pre>\n<p>This gives us a <code>package.json<\/code> file in our project folder containing the default configurations we need to work locally. Speaking of which, the parcel package can be installed globally, but for this tutorial, we\u2019ll install it locally as a dev dependency.<\/p>\n<p>We need Babel when working in React, so let\u2019s get that going:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">yarn add parcel-bundler babel-preset-env babel-preset-react --dev<\/code><\/pre>\n<p>Next, we install React and ReactDOM&#8230;<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">yarn add react react-dom<\/code><\/pre>\n<p>&#8230;then create a <code>babel.rc<\/code> file and add this to it:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">{\r\n  \"presets\": [\"env\", \"react\"]\r\n}<\/code><\/pre>\n<p>Next, we create our base <code>App<\/code> component in a new <code>index.js<\/code> file. Here\u2019s a quick one that simply returns a &#8220;Hello&#8221; heading:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">import React from 'react'\r\nimport ReactDOM from 'react-dom'\r\nclass App extends React.Component {\r\n  render() {\r\n    return (\r\n      &lt;React.Fragment&gt;\r\n        &lt;h2&gt;Hello!&lt;\/h2&gt;\r\n      &lt;\/React.Fragment&gt;\r\n    )\r\n  }\r\n}\r\n\r\nconst rootElement = document.getElementById(\"root\");\r\nReactDOM.render(&lt;App \/&gt;, rootElement);<\/code><\/pre>\n<p>We\u2019ll need an HTML file where the <code>App<\/code> component will be mounted, so let\u2019s create an <code>index.html<\/code> file inside the <code>src<\/code> directory. Again, here\u2019s a pretty simple shell to work off of:<\/p>\n<pre rel=\"HTML\"><code class=\"language-html\">&lt;html lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\r\n    &lt;title&gt;Parcel React Example&lt;\/title&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;div id=\"root\"&gt;&lt;\/div&gt;\r\n    &lt;script src=\".\/index.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/code><\/pre>\n<p>We will make use of the Parcel package we installed earlier. For that to work, we need to edit the <code>start<\/code> script in <code>package.json<\/code> file so it looks like this:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\"scripts\": {\r\n  \"start\": \"NODE_ENV=development parcel src\/index.html --open\"\r\n}<\/code><\/pre>\n<p>Finally, let\u2019s go back to the command line and run <code>yarn start<\/code>. The application should start and open up a fresh browser window pointing at <code>http:\/\/localhost:1234\/<\/code>.<\/p>\n<h3>Working with styles<\/h3>\n<p>Parcel ships with PostCSS out of the box but, if we wanted to work with something else, we can totally do that. For example, we can install <a href=\"https:\/\/www.npmjs.com\/package\/node-sass\" rel=\"noopener\">node-sass<\/a> to use Sass on the project:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">yarn add --dev node-sass autoprefixer<\/code><\/pre>\n<p>We already have <a href=\"https:\/\/www.npmjs.com\/package\/autoprefixer\" rel=\"noopener\">autoprefixer<\/a> since it\u2019s a PostCSS plugin, so we can configure that in the <code>postcss<\/code> block of <code>package.json<\/code>:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ ...\r\n\"postcss\": {\r\n  \"modules\": false,\r\n  \"plugins\": {\r\n    \"autoprefixer\": {\r\n      \"browsers\": [\"&gt;1%\", \"last 4 versions\", \"Firefox ESR\", \"not ie &lt; 9\"],\r\n      \"flexbox\": \"no-2009\"\r\n    }\r\n  }\r\n}<\/code><\/pre>\n<h3>Setting up a production environment<\/h3>\n<p>We\u2019re going to want to make sure our code and assets are compiled for production use, so let\u2019s make sure we tell our build process where those will go. Again, in <code>package-json<\/code>:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\"scripts\": {\r\n  \"start\": \"NODE_ENV=development parcel src\/index.html --open\",\r\n  \"build\": \"NODE_ENV=production parcel build dist\/index.html --public-url .\/\"\r\n}<\/code><\/pre>\n<p>Running the <code>yarn run build<\/code> will now build the application for production and output it in the <code>dist<\/code> folder. There are some additional options we can add to refine things a little further if we\u2019d like:<\/p>\n<ul>\n<li><code>--out-dir directory-name<\/code>: This is for using another directory for the production files instead of the default <code>dist<\/code> directory.<\/li>\n<li><code>--no-minify<\/code>: Minification is enabled by default, but we can disable with this command.<\/li>\n<li><code>--no-cache<\/code>: This allows us to disable filesystem cache.<\/li>\n<\/ul>\n<h3>&#x1f4a9; CRAP (Create React App Parcel)<\/h3>\n<p><a href=\"https:\/\/github.com\/sw-yx\/create-react-app-parcel\" rel=\"noopener\">Create React App Parcel<\/a> (<abbr title=\u201dCreate React App Parcel\u201d>CRAP<\/abbr>) is a package built by <a href=\"https:\/\/twitter.com\/swyx\" rel=\"noopener\">Shawn Swyz Wang<\/a> to help quickly set up React applications for Parcel. According to the documentation, we can bootstrap any application by running this:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">npx create-react-app-parcel my-app<\/code><\/pre>\n<p>That will create the files and directories we need to start working. Then, we can migrate over to the application folder and start the server.<\/p>\n<pre rel=\"Terminal\"><code class=\"language-markdown\">cd my-app\r\nyarn start<\/code><\/pre>\n<h3>Parcel is all set up!<\/h3>\n<p>Parcel is worth exploring in your next React application. The fact that there&#8217;s no required configuration and that the bundle time is super optimized makes Parcel worth considering on a future project. And, with more than 30,000 stars on GitHub, it looks like something that&#8217;s getting some traction in the community.<\/p>\n<h4>Additional resources<\/h4>\n<ul>\n<li><a href=\"https:\/\/github.com\/parcel-bundler\/examples\" rel=\"noopener\">Parcel Examples<\/a>: Parcel examples using various tools and frameworks.<\/li>\n<li><a href=\"https:\/\/github.com\/parcel-bundler\/awesome-parcel\" rel=\"noopener\">Awesome Parcel<\/a>: A curated list of awesome Parcel resources, libraries, tools and boilerplates.<\/li>\n<\/ul>\n<p>The source code for this tutorial is available on <a href=\"https:\/\/github.com\/kinsomicrote\/csstricks-react-parcel\" rel=\"noopener\">GitHub<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You may already be familiar with webpack for asset management on projects. However, there\u2019s another cool tool out there called Parcel, which is comparable to webpack in that it helps with hassle-free asset bundling. Where Parcel really shines is that it requires zero configuration to get up and running, where other bundlers often require writing [&hellip;]<\/p>\n","protected":false},"author":251966,"featured_media":286503,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1308,557,680],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/parcel-react.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":286474,"url":"https:\/\/css-tricks.com\/moving-from-gulp-to-parcel\/","url_meta":{"origin":286449,"position":0},"title":"Moving from Gulp to Parcel","date":"April 25, 2019","format":false,"excerpt":"Ben Frain just made some notes about the switch from Gulp to Parcel, a relatively new \"web application bundler\" which, from a quick look at things, is similar to webpack but without all the hassle of setting things up. One of the things I\u2019ve always disliked about webpack is that\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/parcel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":298226,"url":"https:\/\/css-tricks.com\/using-fusebox-as-a-bundling-alternative-to-webpack-for-react\/","url_meta":{"origin":286449,"position":1},"title":"Using FuseBox as a Bundling Alternative to webpack for React","date":"November 1, 2019","format":false,"excerpt":"If you are searching for an alternative bundler to webpack, you might want to take a look at FuseBox. It builds on what webpack offers \u2014 code-splitting, hot module reloading, dynamic imports, etc. \u2014 but code-splitting in FuseBox requires zero configurationby default (although webpack will offer the same as of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/fusebox-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":298224,"url":"https:\/\/css-tricks.com\/working-with-fusebox-and-react\/","url_meta":{"origin":286449,"position":2},"title":"Working with Fusebox and React","date":"November 8, 2019","format":false,"excerpt":"If you are searching for an alternative bundler to webpack, you might want to take a look at FuseBox. It builds on what webpack offers \u2014 code-splitting, hot module reloading, dynamic imports, etc. \u2014 but code-splitting in FuseBox requires zero configuration by default (although webpack will offer the same as\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/fusebox-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297193,"url":"https:\/\/css-tricks.com\/why-parcel-has-become-my-go-to-bundler-for-development\/","url_meta":{"origin":286449,"position":3},"title":"Why Parcel Has Become My Go-To Bundler for Development","date":"October 21, 2019","format":false,"excerpt":"Today we\u2019re gonna talk about application bundlers \u2014 tools that simplify our lives as developers. At their core, bundlers pick your code from multiple files and put everything all together in one or more files in a logical order that are compiled and ready for use in a browser. Moreover,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/parcel-box-title.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":358520,"url":"https:\/\/css-tricks.com\/some-notes-on-using-esbuild\/","url_meta":{"origin":286449,"position":4},"title":"Some notes on using esbuild","date":"December 9, 2021","format":false,"excerpt":"This is a fantastic article from Julia Evans about duking it out with modern front-end tooling. Julia has made a bunch of Vue projects and typically uses no build process at all: \u00a0I usually have an\u00a0index.html\u00a0file, a\u00a0script.js\u00a0file, and then I do a\u00a0<script src=\"script.js\">\u00a0and that\u2019s it. Which I think is awesome\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/esbuild-snowpack-vite.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":253773,"url":"https:\/\/css-tricks.com\/es6-modules-support-lands-browsers-time-rethink-bundling\/","url_meta":{"origin":286449,"position":5},"title":"ES6 modules support lands in browsers: is it time to rethink bundling?","date":"April 15, 2017","format":false,"excerpt":"Modules, as in, this kind of syntax right in JavaScript: import { myCounter, someOtherThing } from 'utilities'; Which we'd normally use Webpack to bundle, but now is supported in Safari Technology Preview, Firefox Nightly (flag), and Edge. It's designed to support progressive enhancement, as you can safely link to a\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/286449"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/251966"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=286449"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/286449\/revisions"}],"predecessor-version":[{"id":286504,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/286449\/revisions\/286504"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/286503"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=286449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=286449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=286449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}