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 (7)
It's 2024 and this blog stills applicable. Thanks
this is what worked for me.... Typeorm, decorators, typescript... this is just for development....
Since
@swc/cli
version0.2.2
the commandswc src --out-dir dist
does not generate/dist
but/dist/src
source: github.com/swc-project/cli/issues/281
I just have one question: Why compile to CommonJS? Node can run ESM easily.
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...
also, if you use esm you will need to use babel or --experimental-modules node flag, correct?
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.