When setting up a new project from scratch, making all the necessary configuration before you can start shipping features can take days if not weeks.
Setting up transpilers, compilers, preprocessors and whatnot is a long step before you can implement something the end user will actually get to see. To speed up repetitive tasks and processes, we were introduced to a handful of tools.
In the early days we had task runners, first we had Grunt, then Gulp came along. Now we have bundlers like Webpack and Rollup. They have their own place and are great tools if we want to configure every step on our way in our application. But what if we don’t? What If we are making a POC or working on a small project that we want to bootstrap as fast as we can?
Luckily, there is a solution. Parcel offers us a zero configuration setup. That means, there is no configuration file for Parcel, unlike we have a webpack.config for Webpack or a gulpfile for Gulp. That also means that the amount of customization we can do is limited, but after all, this is what we are after, so let’s dive into setting up a React project with Typescript support. With the need for completeness, let’s also add Sass as it won’t take any additional effort.
Defining the dependencies
First, let’s start off by pulling in parcel with
npm i parcel-bundler, and have a look at our
package.json file. Right at this stage, this is what my project setup looks like:
All we have at this stage is the
package.json file, with only a single dependency, which is parcel itself. We don’t have to worry about other packages as Parcel will handle pulling in the dependencies for us.
As you can see from the explorer, I created a public folder and placed the
index.html file there. I also added a start script that uses the
parcel command to start a development server using our index file. The
--open flag tells Parcel to open it in the browser once the server is live.
Creating the entry files
index.html, we only include the bare minimum:
Furthermore, I added a script tag, pointing to the entry file, in a separate directory, outside of the public folder. This will be responsible for rendering the application. Make sure to give it an extension of
tsx to tell Parcel we would like to use TypeScript. For the sake of simplicity, the content of this file is made up of only 13 lines of code:
After everything in place, try running the start script with
npm run start, which we defined inside our
package.json file. Parcel will start reading your
index.html file and will see that we have a reference to
index.tsx, so it will start downloading TypeScript automatically.
Once that’s done, it will start reading the
index.tsx file and will see that we have imported React and React-dom. Detecting that there are missing dependencies, it will also start an installation process for them. Once everything is installed, you should see your server up and running. In case you get any errors after building, try to rerun
npm run start.
Parcel will also create some additional folders, after starting the server:
.cache, which means your folder structure should look something like this:
Right now, there are no types in our project for TypeScript to check and we are also missing the related configuration files. To bootstrap your app, you can use these templates for
tslint.json, and modify them to your own taste:
If you would like to learn more about the options you can use, you can refer to the documentation which is pretty extensive.
Setting Up Sass
To pull in Sass for the project, all we have to do is to create an
.scss file and import it into our App component:
As soon as we start modifying
index.scss, Parcel will detect that we are missing the sass package so it will pull it down for us. With some magic of css animation, opening the browser you will see your app being rendered:
Building the project
All that’s left to do, is to build the project so we can deploy it. For that, we can extend the
package.json file with an additional script, which leaves us at the end with the following:
Building the project is as simple as calling
parcel build on our entry file. We can also pass in optional flags. For this setup I want to skip source maps so I passed in the
You may have also noticed that I removed the caret from the front of version numbers for each dependency. This will ensure that every time our project is pulled down and we run
npm i to set everything up, we will always have the same exact versions. This way if a dependency is updated, it won’t break our codebase.
If you now run
npm run build, it will build the project and populate the
No configuration file, still we have a project set up with a proper tech stack. Parcel automatically pulled in the required dependencies for us and handles module bundling, transpiling and preprocessing out of the box in its core, without exposing any configuration file to the developer. Since there’s not much configuration options going on, the documentation is digestible so if you happen to have an error anyway, you most probably find the solution for it.
As advantageous this is to other bundlers, each coin has two sides and Parcel is no exception. If you need to customize your bundling and build process to your needs, then Parcel won’t be the best choice. Handling all of this on it’s own also means it will often do guesses. When working with Parcel, keep an eye on the packages it pulls in. If you are using your own custom i18n implementation and it finds references for it in your files, it might want to pull down an i18n package from npm that is otherwise unnecessary for your project.
Parcel is a wonderful tool for those who are looking to cut to the chase and start delivering right away. If you keep in mind what to look after when working with it, it will serve you well. 🥂