ParcelJS Setup for Typescript

Build configurations can be the biggest nightmare to get up and running quickly, but not with ParcelJS. Parcel is highly praised as a blazing fast, zero configuration web application bundler.

By default, Parcel handles most defaults so you actually don’t even need intense boilerplate when setting it up as a build job. All you really need to do is make it watch a single (or multiple) entrypoint such as a HTML file and any Javascript, Typescript or Stylesheets referenced within that file will be watched over and compiled.

For example, if I have a referenced stylesheet to a SCSS file within index.html, if I save the SCSS stylesheet, everything gets compiled and reloaded automatically.

Now that you have basic understanding of how Parcel works, let’s configure a really simple setup which does the following:

  1. Compiles and minifies SCSS/SASS
  2. Creates relevant sourcemaps for the SCSS/SASS
  3. Compiles and minifies typescript
  4. Creates relevant sourcemaps for the outputted typescript
  5. Minifies HTML

Before we get started, please make sure you have the following prerequisites installed and ready to go.

  1. NodeJS and NPM - you can download it from Node’s official website
  2. A code editor such as VSCode or Sublime Text.

With the above prerequisites installed, lets crack open a terminal for Mac or Linux and execute the following commands:

mkdir my-typescript-app && \
cd my-typescript-app && \
touch package.json && \
touch tsconfig.json && \
mkdir src && cd src && \
mkdir ts && \
cd ts && \
touch index.ts && \
cd .. &&
mkdir scss && \
cd scss && \
touch index.scss && \
cd .. && touch index.html && \
cd ..

Once you have created your basic skeleton, open up the package.json file and put in the following contents:

package.json:

Next up, open up tsconfig.json and add the following code:

tsconfig.json

Open src/index.html and add the following markup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Typescript App</title>
  <link rel="stylesheet" href="scss/index.scss">
</head>
<body>
  <h1>My Typescript App</h1>
  <script src="ts/index.ts"></script>
</body>
</html>

Lastly, open up src/index.ts and add in the following code:

const render = (string: string) => {
  const bodyEl = document.querySelector('body') as HTMLElement;
  bodyEl.insertAdjacentHTML('beforeend', string);
}

render('<p>Hello World :)</p>');

Open up src/index.scss and add in the following code:

body {
  color: #fff;
  background-color: #000;
}

Go back to your terminal and from the root directory of your app, run npm install.

After all the packages are installed, run npm start and you should now have a web server running at localhost:1234.

Now that you have your awesome setup going, go crazy and create something amazing in Typescript.