React Boilerplate with Parcel and Babel 7

Setup your React environment from scratch in under 5 minutes!
Jun 29, 2020

Tired of webpack config for setting up a React project? 😫

Try Parcel!

Parcel is a zero-config fast bundler. Everything just works out-of-the-box 🎉

Initialize npm

$ npm init -y

Install parcel

$ npm install --save-dev parcel-bundler

You can also install it globally if you're planning to run it as a CLI.

Create files

Here we have a vanilla HTML, CSS, JS and React setup. Nothing fancy 🍦


<!DOCTYPE html>
<html lang="en">
    <link href="./style.css" type="text/css" rel="stylesheet" />
    <div id="app"></div>
    <script src="index.js"></script>


import React from "react";
import ReactDOM from "react-dom";

class Hello extends React.Component {
  render() {
    return (
        <h1>Hello {}</h1>

ReactDOM.render(<Hello name="Lenny" />, document.getElementById("app"));


body {
  font-family: Arial, Helvetica, sans-serif;

Install React

$ npm install --save react
& npm install --save react-dom

Configure Babel 7

Since Babel 7, we have to use the @babel-namespaced version of the presets


	"presets": ["@babel/preset-env", "@babel/preset-react"]

Add npm scripts for dev and build

Parcel needs an entry point to start the build, which could be any file.

For simplicity, let's stick with our index.html where the React app will be mounted


  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"

Build dir

Default build dir is dist/, but you can specify using -d e.g. parcel build -d public/


Default port is 1234, but you can specify yours using --port, e.g. parcel index.html --port 5000

Finally, ignore these files to not blow up your Git repo ✅



# parcel temp build files

Run it!

$ npm install
$ npm run dev

Build and Deploy


$ npm run build

Deploy is such an ease to use, but feel free to use any CLI-deploy tool you have.

$ npm install --global surge
$ surge dist/

Surge options

Surge takes a directory to deploy, which is dist/ since we left Parcel's default build dir.

It also asks you for a sub-domain name So as long as it's not taken yet, go bananas 🤗!


🙌 Awesome! Catch you in the next one! 🤓

Full code:

⬅ Previous postNext post ➡