Start a simple React JS app with Parcel bundler

11 August, 20193 min readWeb Development

Here's how to get started with a simple hello world React Javascript app using Parcel. We're going to be using a global install of parcel-bundler here.

Install Parcel

Install parcel globally

npm i -g parcel-bundler

The advantage if you install it globally is that node_modules is only 4MB and 100 or so files. create-react-app on the other hand will download about 110 MB and 28,000 files!

If you're working in a team environment, I would recommend performing a local install of parcel. This is about 63MB and 13,000 files. This way everyone is using the same version of the bundler.

Create app

Create working directory

mkdir app
cd app

Create package.json and install the bare minimum react packages

npm init -f
npm i -s react react-dom

Create a subdirectory src/ with the two files below.

Create src/index.html with

<!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>React and Parcel</title>
</head>
<body>
    <div id="root"></div>
    <script src="index.js"></script>
</body>
</html>

Create src/index.js with

import * as React from "react";
import { render } from "react-dom";

const App = () => <h1>Hello world</h1>;

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

Start dev server and build files

Start development server with parcel

parcel src/index.html

You should now be able to view this simple Hello World web app with the URL http://localhost:1234

To build files production, run

parcel build index.html

Static files generated with be placed in dist/

Add scripts to package.json

Add this to your package.json for easier start up

"scripts": {
    "start": "parcel src/index.html",
    "prebuild": "rm -rf dist",
    "build": "parcel build --public-url ./ src/index.html"
},

The --public-url ./ will allow the app to be served from a subdirectory, otherwise links will be referenced to /. The prebuild script will always run automatically before a npm run build command. Parcel does not automatically clean the build/ directory.

If you're running Windows without the rm command available, you'll can use an alternate command instead, such as

"prebuild": "rmdir /q /s dist"

It's optional to manually clean the dist/ directory. If you don't, you'll end up with a lot of old useless files in there.

Using public/ dir for static files

If you have static files you'd like to have served all the time, install the parcel-plugin-static-files-copy plugin. All files in the public/ (if it exists) directory will be copied into the build directory tree.

npm install --save-dev parcel-plugin-static-files-copy

Add to package.json:

"staticFiles": {
    "staticPath": "public",
    "watcherGlob": "**"
}

Example of files that might go here are things like robots.txt or download files.

© Andy Gock 2009−2019