Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 27, 2022 05:11 pm GMT

How To Make A Typescript NodeJS Express Project with eslint, EJS and nodemon hot reload

Start with a clean project

pnpm init -yornpm init -y

Install some dependencies

pnpm add -save-dev eslint @types/express typescriptpnpm add --save express ejs or npm install -save-dev eslint @types/express typescriptnpm install --save express ejs

make a new folder for your project

mkdir srctouch src/app.ts

src/app.ts

import express from 'express';const app = express();const port = 3000;app.use(express.json());app.use(express.static("public"));app.set("view engine", "ejs");app.get('/', (req, res) => {  res.send('Hello World!');});app.listen(port, () => {  return console.log(`http://localhost:${port}`);});

create a new folder for your public folder

create a new folder of views

Create tsconfig.json

{    "compilerOptions": {        "module": "commonjs",        "esModuleInterop": true,        "target": "es6",        "moduleResolution": "node",        "sourceMap": true,        "outDir": "dist"    },    "lib": [        "es2015"    ]}

Now we will run eslints initialization command to interactively set up the project:

pnpx eslint --initornpx eslint --init

Now You have to answer some questions to finish the initialization process:

  • How would you like to use ESLint?: To check syntax and find problems
  • What type of modules does your project use?: JavaScript modules (import/export)
  • Which framework does your project use?: None of these
  • Does your project use TypeScript?: Yes
  • Where does your code run?: Node
  • What format do you want your config file to be in?: JavaScript

Finally, you will be prompted to install some additioanl eslint libraries. Choose Yes. The process will finish and youll be left with the following configuration file:

Now we will configure nodemon for hot reloading

pnpm add -g ts-nodeornpm add -g ts-node

Now we will create nodemon.json

{    "ext": "ts,js",    "ignore": [        "node_modules",        "dist"    ],    "watch": [        "src"    ],    "exec": "ts-node src/app.ts"}

Lets Change our package.json and add some lines

add main

"main": "dist/app.js",

add lint and start in scripts

"lint": "eslint . --ext .ts","start": "tsc && nodemon dist/app.js"

Finally It should look like this

{  "name": "xss",  "version": "1.0.0",  "description": "",  "main": "dist/app.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "lint": "eslint . --ext .ts",    "start": "tsc && nodemon dist/app.js"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "@types/express": "^4.17.13",    "@typescript-eslint/eslint-plugin": "^5.29.0",    "@typescript-eslint/parser": "^5.29.0",    "eslint": "^8.18.0",    "typescript": "^4.7.4"  },  "dependencies": {    "cors": "^2.8.5",    "ejs": "^3.1.8",    "express": "^4.18.1"  }}

Now start the project with pnpm or npm

pnpm startornpm start

Hurray you have a new project!

Connect me on Twitter :- Twitter

Do check out my Github for amazing projects:- Github

Connect me on LinkedIn :- Linkedin

Read my another article :-
Parallax In Next.js using React-Scroll-Parallax

Stateful vs Stateless Architecture


Original Link: https://dev.to/nyctonio/how-to-make-a-typescript-nodejs-express-project-with-eslint-ejs-and-nodemon-hot-reload-4e0b

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To