Here’s my minimal setup to write a piece of typescript code

Writing 10 lines of typescript should not require advanced devOps knowledge. Here’s a minimal build to write and debug any piece of typescript code without knowing anything about gulp or webpack.

Don’t get me wrong, webpack is awesome. But sometimes I just want to write 10 lines of code and get it running as fast as possible. Some people are fluent with gulp or webpack and would have a setup running in a few seconds. I’m not, so this is the minimal “build” I often come up with.

What do we want ?

• Let’s write and run a small piece of code. Now that I’m used to typescript, writing vanilla js simply scares me. Therefore I want to write a and run a small piece of typescript code.
• Even for a 10 minutes project, save -> compile -> run is just a tedious workflow. We should at least automate this.
• Installing stuff on a computer is boring. I already have docker installed. That’s more than enough to get things up and running.

When do we want it ?

It should clearly take less than a minute to setup something that works.

The setup

The whole “project” can be found on github

I have to say I like nodemon. It looks to me like it provides the simplest workflow ever : watch something, and if it moves, then run something. The kind of thing I tend to remember.

First, let’s build a docker image where we install typescript, and nodemon:

I basically takes a node image, and installs nodemon and typescript on it. Then it installs your package.json dependencies, if you have some. Here we use yarn, because we totally belong to the cool kids.

The second and last thing we need is to automate the save -> compile -> run workflow. That’s where docker-compose comes handy:

As you can see, we use 3 containers :

• data takes care of the files logic. We tell it to share our own src directory with the containers, and to have its own dist and node_modules directories. The other containers will share the volumes so they share the same src, dist and node_modules directories.
• transpiler will watch the src directory (where the *.ts files live), and transpile the typescript code to dist
• server will use nodemon to watch the dist directory, and run index.js whenever index.js has changed.

This will work smoothly, whether you’re writing a server, or a simple script that exits after it’s launched.

Now a simple docker-compose up command will run the servers, and we’re ready to work on our awesome ts script. After a change in the typescript file, here’s what happens:

About exactly what we would expect: the script is transpiled, then launched

Needless to say, if we write something dummy such as

Then our console outputs a fancy error, as expected:

Hope you enjoy !

Download the project if you like