DEV Community

Cover image for Day 1: How to create a simple server using TypeScript and NodeJS.
Hephzy
Hephzy

Posted on

Day 1: How to create a simple server using TypeScript and NodeJS.

Introduction

Hi everyone. I'm starting the #100DaysofMiva coding challenge. I'm a day late but better late than never. I started my journey with TypeScript and today, I am going to take us through the process of creating a simple API server with both TypeScript and a plain NodeJS environment.

What is NodeJS

NodeJS is an open-source and cross-platform runtime environment built on Chrome’s V8 JavaScript engine for executing JavaScript code outside of a browser. It provides an event-driven, non-blocking (asynchronous) I/O and cross-platform runtime environment for building highly scalable server-side applications using JavaScript.

What is TypeScript?

TypeScript is a free and open-source high-level programming language developed by Microsoft that adds static typing with optional type annotations to JavaScript. It is a strict superset of JavaScript, which adds type to the JavaScript and helps you avoid potential bugs that occur at runtime.

Benefits of NodeJS

  • Asynchronous Programming
  • Scalability
  • Fast Performance

Benefits of TypeScript

  • Static Typing
  • Code completion
  • Refactoring

Setting Up a NodeJS Server

In order to set up a node.js server, there are a few things you need before you can start.

Prerequisites

  • NodeJS and Npm: You need to have NodeJS installed on your system. You can do that by going to the NodeJS official website and downloading NodeJS.

Steps

a. Create a new folder and navigate to it

  mkdir hello-world-api
  cd hello-world-api
Enter fullscreen mode Exit fullscreen mode

b. Initialize node.js

  npm init -y
Enter fullscreen mode Exit fullscreen mode

c. Install necessary dependencies:

npm install express 
npm install nodemon
Enter fullscreen mode Exit fullscreen mode

d. Create a new file called app.js and add the following code.

import express from 'express';

const app = express();
const port = 3000;

// Define a route handler for the default home page
app.get('/', (req, res) => {
  res.status(200).json({message: 'Hello, World!'});
});

// Start the Express server
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Enter fullscreen mode Exit fullscreen mode

e. Add this script to your package.json file.

"scripts": {
  "start": "node app.js",
  "dev":  "nodemon app.js"
}
Enter fullscreen mode Exit fullscreen mode

f. Start the server:

   npm start
Enter fullscreen mode Exit fullscreen mode
  • For development mode (with auto-reloading):
   npm run dev
Enter fullscreen mode Exit fullscreen mode

g. Access the API: Open your browser or use a tool like Postman to navigate to http://localhost:3000/, and you should see "Hello, World!" displayed.

Setting Up a TypeScript Server

Prerequisites

  • NodeJS and Npm should be installed.
  • Additionally, you can install typescript globally
  npm install -g typescript
Enter fullscreen mode Exit fullscreen mode

Steps
a. Initialize a NodeJS project

mkdir hello-world-api
cd hello-world-api
npm init -y

Enter fullscreen mode Exit fullscreen mode

b. Install necessary dependencies:

npm install express
npm install --save-dev typescript @types/node @types/express ts-node nodemon
Enter fullscreen mode Exit fullscreen mode

c. Initialize TypeScript:

npx tsc --init
Enter fullscreen mode Exit fullscreen mode

d. Configure tsconfig.json file

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
Enter fullscreen mode Exit fullscreen mode

e. Create a src/index.ts directory and input this code:

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

const app = express();
const port = 3000;

// Define a route handler for the default home page
app.get('/', (req: Request, res: Response) => {
  res.status(200).json({message: 'Hello, World!'});
});

// Start the Express server
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

f. Add this script to your package.json file.

"scripts": {
  "start": "node app.js",
  "dev":  "nodemon app.js"
}
Enter fullscreen mode Exit fullscreen mode

g. Start the server:

   npm start
Enter fullscreen mode Exit fullscreen mode
  • For development mode (with auto-reloading):
   npm run dev
Enter fullscreen mode Exit fullscreen mode

h. Access the API by visiting http://localhost:3000/ in your browser, or to whatever port you specified in your project. You should also have this message showing in your terminal:

   Server is running on port 3000
Enter fullscreen mode Exit fullscreen mode

That's it! You now have a simple API server up and running using both TypeScript and Node.js. Check out my GitHub repo for the full code. Stay tuned for the next post in the #100DaysofMiva challenge!

Day 1: #100DaysofMiva

Top comments (2)

Collapse
 
marvellye profile image
Ezekiel Marvellous

Smooth sailing πŸ‘πŸ»

Collapse
 
tobidelly profile image
TD!

Nice one