Standard Way To Setup Node JS Project With TypeScript

-

Node JS - Education Funda

As you know in programming world JavaScript is becoming quite famous programming language so in this blog we will discuss how we can create fresh project of NodeJS with TypeScript in standard way.

What is Node JS?

It s a cross-platform, open-source, and server-side JavaScript runtime environment that executes JavaScript code outside a web browser.

What is TypeScript?

TypeScript is an open-source language maintained and developed by Microsoft. It's loved and used by a lot of software developers around the world.

If you want to Setup with only Node JS Then here is the Link.

Requirements

  • Any server should be installed either Apache or Nginx.
  • NodeJS and NPM should be installed in the operating system. 
NodeJS & TypeScript - Education Funda India

First open your terminal and go to your project directory then run following commands

~ npm init (after hitting this command it will ask some basic questions you can answer it as per your needs)

{
"name": "kafka-nodejs-real-time-app",
"version": "1.0.0",
"description": "Small application in nodejs with Kafka as a message broker",
"main": "dist/app.js",
"scripts": {
"ts-to-js": "rimraf dist && tsc --pretty",
"prestart": "npm run ts-to-js",
"dev:ts-app-watch": "tsc -w",
"dev:js-app-watch": "nodemon --watch dist dist/app.js",
"dev": "concurrently \"npm run dev:ts-app-watch\" \"npm run dev:js-app-watch\"",
"build": "npm run ts-to-js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/sanjaydeveloper15/kafka-nodejs-real-time-app.git"
},
"keywords": [
"kafka",
"nodejs",
"nodejs-kafka",
"message-broker-kafka"
],
"author": "Sanjay Kumar",
"license": "MIT",
"bugs": {
"url": "https://github.com/sanjaydeveloper15/kafka-nodejs-real-time-app/issues"
},
"homepage": "https://github.com/sanjaydeveloper15/kafka-nodejs-real-time-app#readme",
"dependencies": {
"dotenv": "^16.4.7",
"express": "^4.21.2",
"rimraf": "^6.0.1"
},
"devDependencies": {
"@types/concurrently": "^6.4.0",
"@types/express": "^5.0.0",
"@types/nodemon": "^1.19.6",
"@types/typescript": "^0.4.29",
"concurrently": "^9.1.2",
"nodemon": "^3.1.9",
"ts-node": "^10.9.2",
"typescript": "^5.7.3"
}
}


This above is basic template of your package.json file.

⏺️ "RimRaf": It is a npm package to delete directory and it's files, Useful to delete previous build.

⏺️ "Concurrently": For run at least two or more commands without kind of any behaviour issue of running project.

⏺️ "ts-to-js": Removing directory of build and Putting updated files in clean way because of we have used tsc --pretty.

⏺️ "prestart": Default behaviour of package.json file, it just runs automatically when we call `npm start`.

⏺️ "start-ts-js-app-watch": Setup your dev environment to see all the errors and file changes Automatically.

To do setup of license, .gitignore and code of conduct for new project we can do with NPX commands:

~ npx tsc --init (it will create tsconfig.json file, now edit the rootDir and outDir)
{
"compilerOptions": {
"module": "ES2020",
"esModuleInterop": true,
"target": "es6",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"rootDir": "src",
"strict": false
},
"lib": ["ES2020"]
}
~ npx license mit (it will create open source license for your project)
~ npx gitignore node (it will create .gitignore file in your project automatically so you don't need to create it manually) 
~ npx covgen your_email_id (it will create code of conduct file for your project)

Server File (src/app.ts)

Now you can create app.ts OR index.ts file in your project directory which you mentioned while npm init also, below is example file


import express, { Application } from 'express'
import { configDotenv } from 'dotenv'
configDotenv()
const app: Application = express()
// 10 radix: decimal, 16 radix: hexadecimal, 8 radix: octal, securing 01000
const port: number = parseInt(process.env.PORT || '1000', 10)

// middleware to parse json, available in express since 4.16 version,
// earlier same we were achieving with body-parser package
app.use(express.json({ limit: '5mb' }))
app.use(express.urlencoded({ limit: '5mb', extended: true }))

// listen server
app.listen(port, async () => {
return console.log(`Server listening on port ${port}`)
})

export default app


That's it from these commands now you have just created your standard way of code node js project.
 
 
I hope you like our effort, please share your feedback in comments sections !!

<> Happy Coding </>

Follow on GitHub




Location: New Delhi, Delhi, India

Comments

Post a Comment

Popular posts from this blog

JavaScript Logical Output Based Interview Questions

-
Image
You mostly seen in JavaScript interviews there interviewers must asks output based questions in which candidate stuck mostly so here in this blog I'm telling you most commonly asked output based JavaScript interview questions. By Education Funda Most Commonly Asked JavaScript Output Based Questions Question: 1 function sum(){      let a = 8;      const b=2;      var c=a+b; } console.log(a) // Reference error: a is not defined console.log(b) // Reference error: a is not defined console.log(c) // Reference error: a is not defined sum() console.log(a) // Reference error: a is not defined console.log(b) // Reference error: b is not defined console.log(c) //Output: undefined ---------------------------------------------------------------------------- Question: 2 let arr=[1,2,3,4,5]; console.log(arr[2], arr.length); //Output: 3 5 arr.length=0; console.log(arr[2], arr.length); //Output: undefined 0 Note:  As we can see in above code 1st ques...
Read more

Deploy Angular Build With Express JS Project

-
Image
Deploy Angular Build in Node JS (Express JS) Server Mean Stack - Education Funda Firstly Create Angular Production Ready Build: ~ ng build (run in command line when directory is projectFolder). ~ Compress using Brotli compression the resources using the following command for i in dist/*/*; do brotli $i; done Deployment Check Angular Build: You can get a preview of your application using the ng serve --prod command that starts a local HTTP server such that the application with production files is accessible using http://localhost:4200. This is not safe to use for production usage. For a production usage, you have to deploy all the files from the dist folder in the HTTP server of your choice. Node JS/Express JS Server File Changes: //enabling CORS app . use ( cors ()); app . use ( express . static ( path . resolve ( './public' ))); //api v1 base route set app . use ( '/api/v1' , router ); //angular front site app . use ( express . static ( path . resolve ( './public/a...
Read more

Postman Collection APIs to Swagger Docs

-
Image
Being an back-end developer we generally works with APIs, for storing the APIs mostly developers are using the Postman, So in this blog will discuss how to covert postman collection APIs to swagger APIs documentation. Express Js Project Convert Postman Collection APIs to Swagger Docs Step 1: You should have proper APIs postman collection for your project. Step 2: Install swagger ui in your node project via ~ npm i swagger-ui-express . Step 3: Put below code in your Routes index file OR app.js wherever you maintained your express routes as per your requirements: Here you also need to create 1 json file for storing the details of your APIs docs just like we create swagger-output.json . import express from "express" ; import swaggerUi from "swagger-ui-express" ; const swaggerDocument = JSON . parse ( await readFile ( new URL ( "../../../../swagger-output.json" , import .meta. url )) ); const router = express . Router (); // adding swagger docs...
Read more