Zero Configure your React-Typescript App With Parcel

Ferenc Almasi
Oct 17 · 6 min read

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:

The dependencies in package.json
The dependencies in package.json

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

For index.html, we only include the bare minimum:

Since we are using React and the whole application will be rendered on the client side, we can get away with a single container and a message for the user in case JavaScript is disabled for them.

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.

Parcel automatically starts installation for missing packages
Parcel automatically starts installation for missing packages

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: dist and .cache, which means your folder structure should look something like this:

Folder structure after starting the server
Folder structure after starting the server

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 tsconfig.json and 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:

After importing Sass, your project structure should look like this
After importing Sass, your project structure should look like this

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 --no-source-maps flag.

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 dist folder.

The dist project is populated after build
The dist project is populated after build

Takeaways

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. 🥂

JavaScript in Plain English

Learn the web's most important programming language.

Ferenc Almasi

Written by

Frontend dev with a passion for beautiful code and simple yet attractive designs. Get in touch by saying hello@allma.si or visit allma.si directly 👋

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade