Start a simple React JS app with Parcel bundler
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 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.