Creating a express app with typescript and swc

#beginners #tutorial #typescript #compiling

Creating an Express application with TypeScript and compiling it can seem daunting, especially for beginners. In this blog post, we aim to simplify the process by providing a template for an Express application using TypeScript and compiling it with SWC.

SWC is a Rust-based transpiler and compiler that's straightforward to configure and can significantly streamline your development workflow.

Let's get started.

Setting Up Your Project

Begin by creating a new directory and initializing your project:

mkdir express-app
cd express-app
pnpm init

Installing SWC

Next, install the necessary SWC packages:

pnpm i -D @swc/cli @swc/core

With SWC, you can create a configuration file for your project. Create a .swcrc file in the project's root directory. In this file, specify that you are using TypeScript and need to compile to CommonJS:

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "dynamicImport": true,
      "decorators": false
    },
    "transform": null,
    "target": "es2016",
    "loose": false,
    "externalHelpers": false,
    "keepClassNames": false
  },
  "module": {
    "type": "commonjs",
    "strict": false,
    "strictMode": false,
    "noInterop": false,
    "lazy": false
  },
  "minify": true
}

Setting Up Express

To create your Express application, start by installing the Express package:

pnpm i express
pnpm i -D @types/express @types/node

Now, create two new files in the src/ directory: index.ts(the entry point of your project) and server.ts (your server app):

mkdir src
touch src/index.ts
touch src/server.ts

In server.ts, create an Express app and expose it:

// server.ts
import { createServer } from "http";
import express from "express";

export const server = async () => {
  const app = express();

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

  const server = createServer(app);

  server.listen(4000, () => {
    console.log(`Server running in 4000`);
  });
};

In index.ts, call the server to start it:

import { server } from "./server";

server();

Now, when you run your entry point (index.ts), it will call the server and create an Express app.

TypeScript Configuration

To install and configure TypeScript for your project, run the following commands:

pnpm i typescript
npx tsc --init

The tsc --init command will generate a tsconfig.json file with default settings, which you can keep as is.

Defining Scripts

With everything configured, you can create scripts for building and starting your server. Open your package.json and add the following scripts:

"scripts": {
    "build": "swc src --out-dir dist",
    "start": "node dist/index.js",
}

The build script will compile your project using SWC, and the start script will run the compiled application.

To start the server, simply execute pnpm run build and pnpm run start.

Development Workflow

For an improved development experience, you can use Nodemon to watch for changes in your project and automatically recompile and restart the server. To install Nodemon, run the following command:

pnpm i -D nodemon

Then, add a dev script to your package.json for watching changes and restarting the server:

"scripts": {
    "build": "swc src --out-dir dist",
    "start": "node dist/index.js",
    "dev": "nodemon --watch src --ext ts --exec 'npm run build && npm start'"
}

With this setup, you can use the pnpm run dev command to run your server in a development environment. Nodemon will watch for changes in your TypeScript files and automatically rebuild and restart the server, making your development workflow more efficient.

That's it! You now have an Express application with TypeScript and SWC, configured for both development and production environments. Happy coding!

Github project: https://github.com/vinibgoulart/swc-express-typescript

Top comments (5)

José Pablo Ramírez Vargas • Oct 28 '23

I just have one question: Why compile to CommonJS? Node can run ESM easily.

Vinicius Blazius Goulart • Oct 28 '23

you can use esm, I used commonjs because it is the swc standard, in addition the swc native blunder requires the code to be commonjs. swc.rs/docs/configuration/bundling...