Creating a express app with typescript and swc
Tags: beginners, tutorial, typescript, compiling
Published: 2023-10-28 17:26:07

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: 

```bash
mkdir express-app
cd express-app
pnpm init
``` 

### Installing SWC

Next, install the necessary SWC packages:

```bash
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:

```json
{
  "$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:

```bash
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):

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

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

```ts
// 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:

```ts
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:

```bash
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:

```json
"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:

```bash
pnpm i -D nodemon
```

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

```json
"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