A brief instruction to Parcel, an awesome bundler!

So you have an idea for a great app or a cool website and you want make it with top coolest tech stack, you want use Typescript in your React app or use SASS instead of normal css, and GraphQL or RUST , etc… but you hate the initial configurations which sometimes can take a long time specially if it’s your first time.

Alright, what if I tell you there is a better, faster and more simpler way? Yes! it called Parcel 📦 and it’s awe…wait for it…some!

Why is awesome?

As I mentioned, Parcel is a web application bundler and It offers blazing fast performance utilizing multicore processing and requires zero configuration, how cool is that?

I’m gonna go through how you can install and use it in a second, but long story short, after you install parcel, you just need to focus on your app, you want use typescript? use it! just create a ts file and write your codes, parcel will take care of everything.

How it works

Well, you can follow the official documentation for more details, but I will show you how I use it in my project. First things first, let’s install it.

You need to install parcel globally either with Yarn or npm :

Yarn :

yarn global add parcel-bundler

npm :

npm install -g parcel-bundler

if you already have a package.json in your project you can skip this one, but if you don’t you need to create one by running either of these commands :

yarn init -y

or if you use npm :

npm init -y

Then in your package.json file, add this :

"scripts": {
  "dev": "parcel YOUR_PATH/index.html",
  "build": "parcel build --public-url . YOUR_PATH/index.html",
  "clean": "rimraf dist/index.html dist/src.*.css dist/src.*.js    dist/src.*.map",
  "predeploy": "npm run clean -s && npm run build -s",
}

if you noticed, on dev script :

"dev": "parcel YOUR_PATH/index.html"

there is a path which is super important, you should make sure this path is your main index.html, for example if you make a React app, your path usually is something like this :

"dev": "parcel src/index.html"

and that’s it, you are ready to develop your app, you just need to run :

Yarn dev

This will start a development server by default in http://localhost:1234 address and Parcel automatically updates modules in the browser as you make changes during development, and again, no configuration needed.

now for example if I create a typescript file anywhere in my project folder, parcel will take care of it, if Im done with my development, I can run:

yarn predeploy

and this will run clean & build scripts in package.json and at the end, after build finished, you will have a dist folder in your project, you can deploy all the files in this folder to your host or production server and enjoy your app/website live!