Introduction

Forget about ts-node and nodemon, tsup is the way to go. It is a command-line tool that allows you to bundle Typescript code with performance in mind. It uses esbuild under the hood, which is a fast bundler and minifier. Get your entire typescript project bundled with a command that is as simple as tsup src/index.ts

Why should we use tsup?

If you have setup an express app with typescript before, you would have very likely gone through the headache of using tools like tsc, ts-node, nodemon, etc. If you had any path alias configurations in your project, then it would have also been another headache to get that working.

Main reasons to consider tsup are its performance and ease of use. By using esbuild under the hood, tsup is able to quickly bundle your Typescript code, making it a great choice for large projects, or really, any typescript project!

Additionally, tsup has a built in onSuccess flag that would re-run the bundled code, removing the need for installing nodemon

Typescript Express app with tsup setup

Alright, so how quickly can we initialize our typescript project and get it bundled?

Create our new project

To create a new project, we can start by creating a new directory and navigating to it in the terminal:

mkdir my-app
cd my-app

Initialize our package.json

Next, we need to initialize our Node project. I am using yarn, but you can use npm or pnpm if you would like.

To initialize our package.json file with yarn, let’s run the following command in the terminal:

yarn init -y

This will create a new package.json file in our project directory with the default values.

Install the dependencies

Main Dependencies

We’ll start with installing express as our project’s dependency.

yarn add express

Dev Dependencies

To use Typescript with Express, we need to install the @types/express and typescript packages as a dev dependencies. We’ll also be using tsup to bundle our Typescript code, so we’ll install it as a dev dependency as well.

yarn add -D typescript tsup @types/express 

Create our src/index.ts

Now that we have all our dependencies installed, we can create our Express app in TypeScript. To do this, create a new directory called src in the root of our project, and create a new file called index.ts inside it:

mkdir src
touch src/index.ts

In our index.ts file, we’ll initialize a simple express app.

import express from 'express';

const app = express();

app.get('/', (req, res) => {
  res.send('Hello, world!');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

when we run this express app, we should be able to see “Hello, world!” when we open http://localhost:3000 in our browser.

Add our “dev” script in package.json

Finally, we want to bundle and run our bundled code, as well as watch for any changes in our typescript files.

To do this, we need to add a “dev” script to our package.json file that will start our Express app in development mode.

Open the package.json file and add the following script to the "scripts" section:

"scripts": {
	"dev": "tsup src/index.ts --watch --onSuccess 'node dist/index.js'"
}

so let us break down what the command and its arguments are doing.

tsup src/index.ts informs tsup that our entry file is located in src/index.ts and by default, it will output the bundled code in dist directory with a single index.js file.

--watch would make tsup continuously watch for any changes in our typescript files, and re-bundle our code.

--onSuccess is an argument of what we want to run after we have successfully bundled our typescript code, and in our case, we want to start up our express app with the command node dist/index.js

This entire setup is awesome, with a single command, we no longer need to use nodemon to watch our changes and integrate it with ts-node in a clunky way to bundle our typescript code. not to mention that the compiling of tsup is faster than ts-node!

⚠️ Note that we are not configuring a tsconfig.json, and in this case, tsup will use the expected default tsconfig. If you have any custom configurations like the path alias, then you can create your own tsconfig, and tsup will read your custom configuration instead.

Running our app

To run our app in development mode, we can now simply run the following command in the terminal:

yarn dev

This will start our Express app, and we can test it by visiting http://localhost:3000 in our web browser.

Building for production

It’s not much different from the dev script, so we can add the build script as such:

"scripts": {
	"dev": "tsup src/index.ts --watch --onSuccess 'node dist/index.js'"
	"build": "tsup src/index.ts"
}

and then we can run this command:

yarn build

In the same /dist directory of before, we will have our bundled index.js file. Only difference here is that we aren’t watching for file changes nor running our bundled code.

Conclusion

We’ve seen how to build a TypeScript Express app with tsup, and how it can cover both of our development and production needs. In later tutorials, I will explain how we can customize our configuration further to fit in multiple use cases, like path alias!