Creating a React template project with Parcel 2

Have you even been in a situation where your project has grown out of bounds and CRA (webpack internally) hasn’t been able to scale nicely with the size of your project?

Well, I have, and that led me to start searching for other options of building a react project than plain old CRA.

There are few options which present itself for this solution, but I wanted something easy and one that would scale when my project becomes large.

1. Ejecting and getting your hands dirty with Webpack

Playing with Webpack and setting it up from scratch was never easy and its one of the reasons why the React team created CRA in the first place. Therefore, this was one was out of running from the beginning.

2. Rollup

Rollup makes sure that all your code is put in the same place and evaluates in one go, resulting in leaner, simpler code that starts up faster. But Rollup, has the following demerits:

  1. No HMR (Hot
  2. Handicaps on converting specific code to ES2015.

Also, Rollup was more suitable for libraries and not for web apps which is what I was looking for.

3. Parcel

Parcel is a zero config web app builder which was like a god send. It checked all the features which I was looking for:

  1. Zero config
  2. Default react support
  3. Typescript support
  4. Parallelism and Caching

The best part of parcel is that you can set the entry file to be a HTML file and parcel figures out all the dependencies within the HTML file and generates the necessary build.

This is a stark difference from the other two, where it just bundles JS and CSS and doesn’t take into account the HTML file.

I’ve now created a template project which includes all the good practices in a new project and it builds extremely fast using parcel 2.

A sub 3 second first build time

I just changed some text in the App.tsx file and the new build was done in under 0.6 seconds.

Open the link below and click on “Use this template” to quickly get started with a new react app using parcel.

It includes the following:

  1. Typescript
  2. ESLint (Airbnb template)
  3. Prettier
  4. Husky
  5. React testing library

If you do like the project, please comment here or star the project. It helps me to continue being motivated to bring such articles and projects. Thanks. 😸 😄