How to Create Node js Express App Using Typescript from Scratch.
In this article, you will learn how to create a simple Node.js app using Typescript support. Before we start, we need to know what is Node js, Express, and Typescript, and what is the advantage of using Typescript over Javascript.
What is Node.js?
Node.js is one of the most popular Javascript server runtime environments. You may often hear that Javascript is mainly used for the front-end side of website development. But thanks to Node, we can now utilize Javascript on the back end.
What is Typescript?
Simply, Typescript is a programming language that is more advanced than Javascript. We can say Typescript is similar to Javascript. The difference between JS and TS is that Typescript will allow developers to use strict typing for the code. Javascript is notorious for its inconsistencies with its syntax and commonly causes many bugs in an app.
… And, why the hell should I use Typescript?
As we will use the Node app mainly for the back-end version, it is advised to utilize Typescript for the development, because it will create a more scalable and maintainable code for the future. This will significantly reduce errors and bugs in the app.
What is Express?
I won't explain too much about this. In simple terms, Express or Express.js is a minimum and flexible web application framework for Node Js. Express offers a wide range of features for building web applications and APIs. Express is designed as flexible as possible to give developers the freedom to define their own project structure.
Now, you should have a little grasp of Typescript, Node, and Express. We can begin creating a new app from scratch.
Prerequisites
To follow this tutorial, you need several apps installed on your systems.
- Node. This is the most important, please make sure you have installed node on your machine, or you can download it from their official website here.
- Git (Optional). I will use Git to track changes.
- VS Code or any code editor/IDE that you like.
If all are installed, we can now advance to the tutorial.
Step 1 — Create a New Folder
Firstly, you need to create a new folder for our project, let’s call it express-demo.
mkdir express-demo
Then, change the directory to the folder.
cd express-demo
Step 2 — Init new Node js App
Inside the folder, we can create a new Node app from scratch. We can run this npm command.
npm init -y
This command will create a new package.json file for our node app. The ‘-y’ flag will tell the terminal to create a new package.json file using default options.
Step 3 — Install Express js.
For this tutorial, we will use the Express framework to create a simple routing for our app. We will install Express via npm.
npm install express
Then, to add support for Typescript types, install the Typescript types via NPM for the dev environment.
npm i --save-dev @types/express
NPM will install Express and create a node_modules folder containing all dependencies.
Step 4 — Create an index.ts file and create the folder structure.
First, create a src/ folder inside our root folder. We will put all of our files inside the src folder.
Next, we will create an index.ts file inside the src folder for running our app, so our initial folder structure will look like this:
express-demo/
├── node_modules/
├── package-lock.json
├── package.json
└── src/
└── index.ts
Step 5 — Create a simple Express App
We can start to create a simple Express app. Open the index.ts app and type this code.
// Import Express from the node_modules.
import Express from 'express'
import { Response, Request } from 'express' // Import the right response and request
// Create a new Express instance
const app = Express()
// Set the port that this app will run on
const PORT = 3000
// Create a simple GET route that will return a simple "hello world!" text using Express.
app.get('/', (req: Request, res: Response) => {
res.send("Hello world") // Send simple hello world
})
// Start the server
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
This code will create a new Express instance and assign a GET route to return simple text.
Step 6 — Run the app
To run a Typescript node app, we cannot use a direct node command, we need to use an additional library to support the app.
First, you need to install the ts-node library for the dev environment.
npm i --save-dev ts-node
After installing, you can run the app using the ts-node command and target our index file.
npx ts-node src/index.ts
Then, you will see the output like this
% npx ts-node src/index.ts
Server is running on http://localhost:3000
This message signs that our app is successfully run. Now we can visit port 3000 on localhost to see our app.
Yay, your app is now up and running. You have created a simple Node js Express app.
Conclusion
In this tutorial, you have learned on how to create a simple Node Js Express app from scratch. This tutorial also covers the usage of ts-node for running the app with Typescript support. The next step is to learn the advances of Node js with Typescript such as controllers, routes, services, and unit tests. I will try to create another tutorial explaining this soon. Please stay tuned~~.
Thank you and happy coding!