Goodbye Webpack! Hello Parcel 👋🏼

If you have written any Javascript framework like either React, Vue etc. chances are that you have come across one form of bundler or the other.

Well here is another one called PARCEL.

Introduction

Parcel is a blazingly fast web application bundler that boasts of its zero-configuration setup 😱. Yeah! you heard me right zero-configuration.

Hard to believe, then lets set up a simple React application with Parcel and Babel.

Setup the Project

So first things first, we need to set up our project. Run the following command below in your terminal

NB - Am assuming you have Node installed if not, you can download it here

With that out of the way, run the following in your terminal

$ mkdir parcel-project
$ cd parcel-project 
$ npm init -y

Now that we have our directory setup, we can install the packages that are required.

$ npm i babel-preset-env babel-preset-react parcel-bundler --save-dev
$ npm i react react-dom --save

Generating the files

Now that we have the project setup, we can go ahead and set up our React application. Let's start by creating a .babelrc file, then add the following lines to your the .babelrc file we just created

// .babelrc

{
  "presets": [
     "env",
     "react"
  ]
}

Now let's create the entry point for our React application. Create a file called index.js and another file called index.html. In the index.js file, we add the following lines of code.


// index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return <h1>Hello World! with Parcel </h1>
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

In case this is your first time with React, all this code is doing is just import our react library and creating a DOM object that renders the text Hello World! with Parcel. For more on React, take a look at this

Now let's create the root element in our index.html file. Open the file and add the following lines of code to it


<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Parcel Tutorial</title>
</head>
<body>
  <div id="root"></div>
  <script src="./index.js"></script>
</body>
</html>

Execute the Parcel Script

Now for the moment we have all been waiting for, in your package.json file, add a start script that runs parcel index.html. So you should have something like this

// package.json
{
...

"script": {
  "start":  "parcel index.html"
}

and we can then run npm start in our terminal. If you followed every step correctly, you should see your react application spin-up. Head over to the URL provided http://localhost:1234 and you should have a web page like the image below

Screenshot 2019-09-29 at 5.00.45 PM.png

there we have it, a simple React app setup with zero-configuration using the parcel-bundler

Conclusion

Now I don't want to bash webpack in any it still is a very useful bundler but whenever I think of going from this 👇

{
  "name": "react_web",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --open --hot --mode development",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }
}

which has a whole lot of webpack dependencies to this 👇

{
  "name": "parcel_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.12.3"
  },
  "dependencies": {
    "react": "^16.10.1",
    "react-dom": "^16.10.1"
  }
}

the decision just becomes really clear.

Have a contrary opinion, let me know in the comments below and with that, we will call it a demo 😁. Have a nice day folks!