Desishub Lessons
Node Js and Typescript
Node Set up with Typescript

Node Js Setup with typescript

Node Js Setup

Install and Verify Node js in your Operating System

Go to https://nodejs.org/en (opens in a new tab) and download Node JS

Step 1: Create a project folder

   mkdir nodejs-with-ts
   cd nodejs-with-ts/

Step 2 : Initialise a node js project

   npm init -y

Create a src folder in the root and in it create index.ts file

console.log(2 + 3);

Step 3 : Install Typescript with Types

    npm i -D typescript @types/node

Verify the Installation by running

    npx tsc -v

Step 4 : Create Typescript config file

    npx tsc --init

Modify the generated tsconfig file to this

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES2016",
    "noImplicitAny": true,
    "removeComments": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "rootDir": "./src",
    "outDir": "./dist",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
 

Step 5 : Install Other Packages we use in Project

Install express

    npm install express @types/express

Install dotenv and cors

    npm install cors dotenv

cors: Middleware for enabling Cross-Origin Resource Sharing (CORS) in your application. It allows your server to handle requests from different origins (domains, ports, or protocols), which is essential for accessing resources from a web browser when your frontend and backend are hosted on different domains.

dotenv: A module that loads environment variables from a .env file into process.env. It's used to manage sensitive configuration data such as API keys, database connection strings, and other environment-specific settings without hardcoding them in your source code.

Install Bycrpt and its types

    npm install bcrypt @types/bcrypt

Install Prisma and Prisma Client

    npm install prisma @prisma/client

prisma: This is the Prisma CLI, which is used to manage your Prisma schema, generate the Prisma Client, and run database migrations. It's essential for setting up and managing your database schema with Prisma.

@prisma/client: This is the auto-generated database client that is tailored to your Prisma schema. It provides a strongly-typed, intuitive API for interacting with your database, making it easy to query and manipulate data with TypeScript support.

Install Build Tools

   npm install --save-dev tsc-alias ts-node-dev tsconfig-paths

** tsc-alias **: A tool that replaces path aliases in compiled JavaScript files after the TypeScript compiler (tsc) runs. It allows you to use path aliases (e.g., @/components) defined in tsconfig.json in your TypeScript code and ensures they are correctly resolved in the output files.

** ts-node-dev **: A development tool that automatically restarts your Node.js application when file changes are detected. It is similar to nodemon but optimized for TypeScript. It also provides faster restarts by using ts-node for on-the-fly TypeScript compilation and caching the results.

** tsconfig-paths **: A package that enables Node.js to recognize and resolve path aliases defined in your tsconfig.json when running TypeScript directly (e.g., with ts-node or ts-node-dev). This ensures that modules can be imported using the defined aliases instead of relative paths.

Step 6 : Modify the Script in your package.json file

"scripts": {
    "dev": "tsnd --respawn -r tsconfig-paths/register --pretty --transpile-only ./src/index.ts",
    "build": "tsc && tsc-alias",
    "start": "node ./dist",
    "postinstall": "prisma generate"
  },

Step 7 : Project File Structure

  • package-lock.json
  • package.json
  • tsconfig.json
  • ℹ️

    Dont forget to create a prisma folder with a schema and to do that you have to run the command below

     
      npx prisma init --datasource-provider mongodb
     

    Summary of What the Code Does:

    The code Initialises the prisma folder and also creates the schema file in the folder , it also sets the datasource (DB) to Mongodb

    Step 8 : Create an express server

    Modify your src/index.ts to this

    import express from "express"; // Import the Express framework
     
    require("dotenv").config(); // Load environment variables from a .env file into process.env
    const cors = require("cors"); // Import the CORS middleware
    const app = express(); // Create an Express application instance
     
    app.use(cors()); // Enable Cross-Origin Resource Sharing (CORS) for all routes
     
    const PORT = process.env.PORT || 8000; // Set the server's port from environment variables or default to 8000
     
    app.use(express.json()); // Parse incoming JSON requests and make the data available in req.body
     
    app.listen(PORT, () => {
      // Start the server and listen on the specified port
      console.log(`Server is running on http://localhost:${PORT}`); // Log a message indicating the server is running
    });

    Summary of What the Code Does:

    Express Setup: The code sets up an Express server, a popular Node.js framework for building web applications and APIs.

    Environment Variables: The dotenv package is used to load environment variables from a .env file, making them accessible via process.env.

    CORS Middleware: The cors middleware is used to enable Cross-Origin Resource Sharing, which allows the server to handle requests from different domains.

    Port Configuration: The server's port is set based on the PORT environment variable, or it defaults to 8000 if not specified.

    JSON Parsing: The express.json() middleware is used to automatically parse incoming JSON payloads and make them available in req.body.

    Server Start: The server is started by calling app.listen(), and it listens for incoming requests on the specified port, logging a message once it is running.

    Step 9 Create a simple API Enpoint

    import express, { Request, Response } from "express";
    // GET REQUEST
    app.get("/customers", (req: Request, res: Response) => {
      const customers = [
        { name: "John Doe", email: "john.doe@example.com", phone: "+1234567890" },
        {
          name: "Joel Smith",
          email: "joel.smith@example.com",
          phone: "+0987654321",
        },
      ];
     
      return res.status(200).json(customers);
    });

    Step by step video On How To set up

    Use the nodext-app package

    ℹ️

    You can quickly get the Setup by using the package below

    npx create-nodext-app my-new-project