Parcel Basic Setup for JS and React

Published March 27, 2024 | By Matt

Let’s face it, setting up web projects can be a pain. Between finicky build tools and endless configuration files, the word “Webpack” might send a shiver down your spine. But what if I told you that there’s a way to get your projects up and running with almost no setup? Enter Parcel.js, the zero-configuration web application bundler.

What is Parcel.js?

Parcel.js is a super-fast bundler that aims to make web development a breeze. With Parcel, you can focus on building your application and let it handle the nitty-gritty details of asset bundling, code transformations, and setting up a development server. That means no more lengthy webpack configurations!

Setting the Stage

Before we dive in, make sure you have the following prerequisites:

Node.js and npm (or yarn): You can download these from the official Node.js website (https://nodejs.org).

Let’s install Parcel globally to have it ready whenever you start a new project:

Bash

npm install -g parcel-bundler

Your First Vanilla JavaScript App

Project Setup:

Create a new project folder:
Bash
mkdir my-parcel-project
cd my-parcel-project

Initialize your project with npm:
Bash
npm init -y

Create the following files:
- - index.html
  - index.js
- styles.css

Basic Boilerplate:

index.html
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Parcel App</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div id=”app”></div>
<script src=”index.js”></script>
</body>
</html>

index.js
JavaScript
const appDiv = document.getElementById(‘app’);
appDiv.innerHTML = ‘<h1>Hello from Parcel!</h1>’;

styles.css
CSS
body {
font-family: sans-serif;
margin: 20px;
}

Parcel in Action
Now for the magic! Start Parcel’s development server:
Bash
parcel index.html

Open your web browser and go to http://localhost:1234/. You should see your “Hello from Parcel!” message proudly displayed. Make a change in any of your files, save, and see your browser update instantly – that’s Parcel’s hot reloading!

Section 3: Adding React to the Mix

Installing Dependencies:
Bash
npm install react react-dom

Converting to a React Structure

Create a components folder and add a simple component file (e.g., MyComponent.jsx):
JavaScript
import React from ‘react’;
const MyComponent = () => {
return (
<div>
<h2>Hello from my React component!</h2>
</div>
);
};
export default MyComponent;

Modify index.js:
JavaScript
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import MyComponent from ‘./components/MyComponent’;
const root = ReactDOM.createRoot(document.getElementById(‘app’));
root.render(<MyComponent />);

Let Parcel Work Its Magic
No extra configuration is needed. Run your parcel index.html command again, and your React app is ready!

Section 4: Deployment Made Easy (Netlify)

Check out Netlify! It’s a fantastic way to host your projects:

Create a Netlify account: https://netlify.com
Deploy: Link your GitHub repo or drag-and-drop your project files.

Conclusion

Parcel.js simplifies web app development. Give it a try on your next project, especially if you’re looking for a quick setup. Keep exploring – Parcel supports even more like Sass, image optimization, and more!