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

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