johnretsas

Posted on Dec 9

Getting Started with a Node.js TypeScript Boilerplate

#node #boilerplate #typescript #axios

Getting Started with a Node.js TypeScript Boilerplate using esbuild

Setting up a modern Node.js project with TypeScript, Axios, and ESLint provides a solid foundation for building scalable applications. But what if you want a fast and efficient bundling tool to speed up your development process? Enter esbuild—a fast bundler and minifier that will help you compile TypeScript code and bundle your application with ease.

In this blog post, we will walk through setting up a Node.js project with TypeScript, using esbuild for bundling, and integrating Axios for HTTP requests and ESLint for maintaining code quality.

Why Use TypeScript for Node.js?

TypeScript provides type safety and improved tooling over plain JavaScript, allowing you to catch errors early and build maintainable applications. Benefits of using TypeScript include:

Type Safety: Helps to catch type errors before runtime, reducing bugs.
Enhanced Developer Experience: Tools like autocompletion and inline documentation make coding easier.
Better Refactoring: The strict typing allows for safer, easier code refactoring.

Why Use esbuild?

While TypeScript provides the structure and safety for your code, bundlers like esbuild help with bundling your TypeScript files into a single, optimized output for deployment. Esbuild offers:

Lightning-fast performance: esbuild is known for its speed, offering quick builds and fast rebuilds during development.
Built-in minification: Minifying your code for production is easy with esbuild.
Simple configuration: It’s simple to set up and integrates well with TypeScript projects.

Features of the Node.js TypeScript Boilerplate with esbuild

This boilerplate includes everything you need to get started:

TypeScript: The project is configured to use modern TypeScript with ESNext module support, enabling the latest JavaScript features.
Axios: Axios is pre-configured for making HTTP requests.
ESLint: To ensure your code follows consistent coding standards.
esbuild: Used for bundling your TypeScript code into a single output file.
Type Declarations: Automatic generation of .d.ts files for type support and IDE autocompletion.

How to Set Up the Node.js TypeScript Boilerplate

Step 1: Clone the Repository

First, clone the repository to your local machine:

git clone https://github.com/johnretsas/node-ts-boilerplate.git
cd node-ts-boilerplate

Step 2: Install Dependencies

Run the following command to install the necessary dependencies:

npm install

This will install all required packages, including TypeScript, Axios, ESLint, esbuild, and tsx.

Step 3: Run the Project

Development Mode

To start the application in development mode with hot-reloading, run:

npm run dev

This will use tsx to automatically reload the application when changes are detected in the source files.

Build the Application

To compile your TypeScript code into a bundled JavaScript file using esbuild, run:

npm run build

The build.js script uses esbuild to bundle your TypeScript files and outputs the result to dist/bundle.js.

Here's a quick look at the build.js script:

import { build } from 'esbuild';

const isProd = process.env.NODE_ENV === 'production'; // Check if we're in production

build({
  entryPoints: ['./src/index.ts'],
  bundle: true,
  outfile: './dist/bundle.js',
  resolveExtensions: ['.ts', '.tsx', '.js', '.json'],
  sourcemap: !isProd, // Enable source maps in development
  minify: isProd, // Minify in production
  target: 'esnext', // Target modern JavaScript
}).catch(() => process.exit(1)); // Exit process if build fails

Start the Application

Once the project is built, you can start the application with:

npm start

This will run the compiled bundle.js from the dist/ folder.

Clean Build Files

To remove the compiled build files, run:

npm run clean

Step 4: Lint Your Code

To maintain code quality, run ESLint to check for errors or issues:

npm run lint

This will run ESLint across your project and provide feedback on any issues.

Step 5: Type Checking

You can perform type checking to ensure that your TypeScript code is correctly typed without generating output files using:

npm run type-check

This will validate the types in your TypeScript files based on the settings in your tsconfig.json.

Development vs. Production

In your build process, it’s important to distinguish between development and production environments. In development, you want fast rebuilds with source maps enabled for easier debugging. In production, however, you should minify your code to reduce file size and improve load times.

The build.js script checks the NODE_ENV environment variable to adjust the configuration for each environment:

Development: Enables source maps and skips minification for faster rebuilds.
Production: Minifies the code to reduce file size and excludes source maps.

Conclusion

This boilerplate gives you a fast and efficient way to develop and bundle your Node.js applications with TypeScript, Axios, ESLint, and esbuild. By using esbuild for bundling, you're getting a lightning-fast build process, and the combination of TypeScript and Axios ensures a robust and maintainable codebase.

For more information on the tools used in this boilerplate, check out the following resources:

DEV Community