Introduction

Actually, SWC has many more features besides compilation; it can do bundling, modification, and many other things. One of its significant advantages is the performance it offers during development; we have improved the Fast Refresh of our application, and the build step is immensely fast.

Prerequisites

But before going further, you will need to install the following dependencies:

• Node
• NPM
• TS

In addition, it is expected to have a basic knowledge of Express.js to complete the project.

Getting Started

Create project setup

As a first step, we will create our project directory and navigate into it:

mkdir node-swc

cd node-swc

Then we can create our development environment, as well as our TypeScript project:

npm init -y

npm install typescript @types/node --save-dev

Now we can create the tsconfig.json file and add the following configuration:

{
  "compilerOptions": {
    "target": "es2020",
    "module": "es2020",
    "allowJs": true,
    "removeComments": true,
    "resolveJsonModule": true,
    "typeRoots": ["./node_modules/@types"],
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": ["es2020"],
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "Node",
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

With the configuration of our TypeScript project done, we can move on to the next step.

Install dependencies

The next step is to install the packages needed to build the API. For that, you should run the following commands in your terminal:

npm install express

npm install @types/express --save-dev

After executing the above commands, we installed two packages in our project, express, which is a minimalistic Node.js framework and its data types.

Create the Express API

But before proceeding to create the API, we have to create the source code folder and the entry file:

mkdir src
cd src
touch server.ts

After this, in the server.ts file, write the following API:

import express, { Request, Response } from "express";

const app = express();

app.use(express.json());

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

const start = async (): Promise<void> => {
  try {
    app.listen(3000, () => {
      console.log("Server started on port 3000");
    });
  } catch (error) {
    console.error(error);
    process.exit(1);
  }
};

void start();

Setup SWC

Now we need to install the necessary dependencies to configure SWC:

npm install @swc/cli @swc/core chokidar nodemon concurrently --save-dev

After executing the command, we will have the following dependencies:

• SWC - @swc/cli and @swc/core are the pre-built binaries of the compiler
• chokidar - will be responsible for recompiling the files when there are changes (watcher)
• nodemon - will reload our API whenever there are changes in the compiled code
• concurrently - will execute multiple commands concurrently

Next, create a .swcrc file and add the following configuration to it:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": true,
      "dynamicImport": true
    },
    "target": "es2020",
    "baseUrl": "."
  },
  "module": {
    "type": "commonjs"
  }
}

With our SWC configured, we can jump to the next step.

Explaining the transpilation process

During the development process, the SWC will read the source code of the TypeScript project, and as soon as there is a code change, it will transpile the TypeScript code to JavaScript in the dist/ folder. For this same reason, we will have to create two scripts, one where we will use SWC to watch the source code and another for nodemon to watch the transpiled code.

With this explanation now in mind, we can create the following scripts in package.json:

{
  "scripts": {
    "dev": "concurrently \"npm run watch-compile\" \"npm run watch-dev\"",
    "watch-compile": "swc src -w --out-dir dist",
    "watch-dev": "nodemon --watch \"dist/**/*\" -e js ./dist/server.js",
    "build": "swc src -d dist",
    "start": "NODE_ENV=production node dist/server.js"
  },
}

Now use the following commands:

• npm run dev: during the development of the API
• npm run build: to transpile code to production
• npm start: to start the API in production

Did you find this article interesting?  Share it with your friends and colleagues.