How to get started with Parcel.js

How to get started with Parcel.js

Rahul Singh's photo
Rahul Singh
·

3 min read

Think about developing a new, simple, static site, how do you start? Do you just create an index.html file and link a style.css? What if you want to use the Javascript module building and modification of your final project?

Why to use Parcel.js

If you want to spend more time writing code than setting up, debugging your tooling you might be interested in using Parcel.js

What is Parcel.js?

Parcel is a building tool that takes your source files like Sass, Javascript, and Typescript and processes them into a format that is usable by the browser.

The main difference between Parcel and other building tools is that it requires no configuration, it's really fast and, as you'll see, it handles installing any extra dependencies required for you.

Installation

You can install Parcel just you install the React package.

npm install -g parcel

Adding Source Files

With parcel installed as a dependency of our project, let's create some source files. You can structure your project in my way.

myProject/
|── node_modules
|── src/
|   |── index.html
|   |── img/
|   |── scss/
|   |   |── styles.scss
|   |── js/
|   |   | - app.js
|── package.json
|── package-lock.json

Next, let’s add some content to our HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ParcelJS</title>
    <link rel="stylesheet" href="scss/styles.scss">
</head>
<body>
    <h1>Hello from Parcel!</h1>
    <button id="btn">Click Me</button>
    <script src="js/app.js"></script>
</body>
</html>

Parcel’s built-in server

Let's create an npm script to run Parcel for serving our source files. package.json

{
  "name": "parcel-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "parcel serve src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^1.12.4"
  }
}

In our project’s package.json file, we’ll add a new script called serve which runs the parcel serve command, setting the entry point to our index.html file in the src folder.

With that done, we can run the Parcel server with:

npm run serve

You should then see the URL that Parcel is serving your content on localhost:8000

Server running at http://localhost:1234 
✨  Built-in 4.45s.

parcel_js.png

Parcel build options

If you have Parcel installed globally, you can check out all the available build options with parcel build --help. Here are a few useful options you might want to consider:

-d, --out-dir <path>  set the output directory. defaults to "dist"
--no-minify           disable minification
--no-source-maps      disable source maps
--no-content-hash     disable content hashing

Parcel makes putting together a simple static really really simple, keeping away from all the configuration needed with other bundles, and get working with favorite development language.

ReactparcelPreactbest practices