DEV Community

Cover image for Creating a express app with typescript and swc
Vinicius Blazius Goulart
Vinicius Blazius Goulart

Posted on

Creating a express app with typescript and swc

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
Enter fullscreen mode Exit fullscreen mode

Installing SWC

Next, install the necessary SWC packages:

pnpm i -D @swc/cli @swc/core
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Setting Up Express

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

pnpm i express
pnpm i -D @types/express @types/node
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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`);
  });
};
Enter fullscreen mode Exit fullscreen mode

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

import { server } from "./server";

server();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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",
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'"
}
Enter fullscreen mode Exit fullscreen mode

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 (7)

Collapse
 
yeasin2002 profile image
Md Kawsar Islam Yeasin

It's 2024 and this blog stills applicable. Thanks

Collapse
 
otumianempire profile image
Michael Otu • Edited

this is what worked for me.... Typeorm, decorators, typescript... this is just for development....

{
    "$schema": "https://json.schemastore.org/swcrc",
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "tsx": false,
            "dynamicImport": true,
            "decorators": true
        },
        "transform": {
            "decoratorMetadata": true
        },
        "target": "es2016",
        "loose": false,
        "externalHelpers": false,
        "keepClassNames": false
    },
    "module": {
        "type": "commonjs",
        "strict": false,
        "strictMode": false,
        "noInterop": false,
        "lazy": false
    },
    "minify": true
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mmatila profile image
Manu Matila

Since @swc/cli version 0.2.2 the command swc src --out-dir dist does not generate /dist but /dist/src

source: github.com/swc-project/cli/issues/281

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

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

Collapse
 
vinibgoulart profile image
Vinicius Blazius Goulart

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...

Collapse
 
vinibgoulart profile image
Vinicius Blazius Goulart

also, if you use esm you will need to use babel or --experimental-modules node flag, correct?

Thread Thread
 
webjose profile image
José Pablo Ramírez Vargas

Good question. I am a .Net guy. I think NodeJS runs ESM without anything. Just use the .mjs extension, or set "type" to "module" in package.json.