Hephzy

Posted on Aug 21

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

#webdev #100daysofmiva #typescript #node

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

b. Initialize node.js

  npm init -y

c. Install necessary dependencies:

npm install express 
npm install nodemon

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}`);
});

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

"scripts": {
  "start": "node app.js",
  "dev":  "nodemon app.js"
}

f. Start the server:

   npm start

For development mode (with auto-reloading):

   npm run dev

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

Steps
a. Initialize a NodeJS project

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

b. Install necessary dependencies:

npm install express
npm install --save-dev typescript @types/node @types/express ts-node nodemon

c. Initialize TypeScript:

npx tsc --init

d. Configure tsconfig.json file

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

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}`);
});

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

"scripts": {
  "start": "node app.js",
  "dev":  "nodemon app.js"
}

g. Start the server:

   npm start

For development mode (with auto-reloading):

   npm run dev

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

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