Last updated: December 21st, 2019

🐬 Dockerized TypeScript App Template

While building the business logic for Tendies Switch, I created a TypeScript based stack for testing & production with the following features:

• Tree-shaking
• Deploy to Docker
• Instant reload in debug mode
• ESLint & Prettier support for Visual Studio Code out of the box
• Existing solutions, like tsdx (opens in a new tab), are overly complicated for my needs & buggy, with over 95 open issues on Github for a project with a little over 3,000 stars. For example, the linting config no longer cooperates with Visual Studio Code out of the box. Setting up JavaScript development tooling isn't too complicated, and by starting from scratch, I learn how to customize the development environment to a project's exact specifications in the future.

Since my open source MERN stack template received such positive feedback, I am obliged to continue in a similar spirit by sharing my Dockerized TypeScript template.

🎬 Getting Started

Source code is available here (opens in a new tab). Entry point for the app is src/app.ts.

yarn start

Execute source code with nodemon for live reloading of code changes.

yarn test

Run all *.test.ts files in test/ directory.

yarn build

Export app to prod/app.ts after running tsc & rollup.

🍔 Tech Stack

• TypeScript
• ES6

TypeScript adds strict typing to JavaScript, which means more maintainable code compared to vanilla JavaScript & access to the rich NPM ecosystem. Node.js supports ES6 natively without an transpiling, so we get all the ES6 benefits like arrow functions, more granular module imports/exports, iterators , and generators - no Babel necessary.

🔨 Unit Testing

• Mocha
• Chai

Mocha & Chai go together like peanut butter & jelly. The only serious competition for Mocha is Jest, and because we are not developing a React app, we do not need the snapshot feature to track UI changes during unit testing.

🔩 Code Quality

• ESLint
• Rollup

ESLint gained support for TypeScript recently, so setup is a matter of enforcing code style standards using .eslintrc.js. There are many competing standards for JavaScript, including AirBnB, StandardJS, and Google JavaScript Style Guide. AirBnB JavaScript Style Guide has the most stars on Github & no one wants Google to create any more standards after Google AMP, so AirBnB JavaScript Style Guide it is.

Rollup is all about processing your JavaScript source code for production through bundling various source files into one package. It has various plugins to help optimize the source code for production, such as removing comments & console.log statements.

🏃 Runtime

I value security & easy setup, so Docker is an obvious choice for deployment. I based the Dockerfile on the latest version of node-alpine & installed pm2 for handing the restart policy of the JavaScript runtime. Altogether, the base image comes out to around 4mb in size before adding the project source code. Not too bad.

🛥️ External Ports

If you wanted to extend this template to create an API server, you would do so in your docker-compose file utilizing the output image from this template or when running from the command line like this:

docker run -p <public_port>:<private_port> -d <image>

Overall, I am glad to share this template to help anyone developing TypeScript applications save an afternoon of tedious configuration. I can't wait to see what the community builds.