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

This content originally appeared on DEV Community and was authored by Ritesh Kumar

Start with a clean project

pnpm init -y
or
npm init -y

Install some dependencies

pnpm add -save-dev eslint @types/express typescript
pnpm add --save express ejs 

or 

npm install -save-dev eslint @types/express typescript
npm install --save express ejs

make a new folder for your project

mkdir src
touch 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 eslint’s initialization command to interactively set up the project:

pnpx eslint --init
or
npx 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 you’ll be left with the following configuration file:

Now we will configure nodemon for hot reloading

pnpm add -g ts-node
or
npm 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 start
or
npm 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

This content originally appeared on DEV Community and was authored by Ritesh Kumar

Print Share Comment Cite Upload Translate Updates

APA

Ritesh Kumar | Sciencx (2022-06-27T17:11:32+00:00) How To Make A Typescript + NodeJS Express Project with eslint, EJS and nodemon hot reload. Retrieved from https://www.scien.cx/2022/06/27/how-to-make-a-typescript-nodejs-express-project-with-eslint-ejs-and-nodemon-hot-reload/

MLA

" » How To Make A Typescript + NodeJS Express Project with eslint, EJS and nodemon hot reload." Ritesh Kumar | Sciencx - Monday June 27, 2022, https://www.scien.cx/2022/06/27/how-to-make-a-typescript-nodejs-express-project-with-eslint-ejs-and-nodemon-hot-reload/

HARVARD

Ritesh Kumar | Sciencx Monday June 27, 2022 » How To Make A Typescript + NodeJS Express Project with eslint, EJS and nodemon hot reload., viewed ,<https://www.scien.cx/2022/06/27/how-to-make-a-typescript-nodejs-express-project-with-eslint-ejs-and-nodemon-hot-reload/>

VANCOUVER

Ritesh Kumar | Sciencx - » How To Make A Typescript + NodeJS Express Project with eslint, EJS and nodemon hot reload. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/27/how-to-make-a-typescript-nodejs-express-project-with-eslint-ejs-and-nodemon-hot-reload/

CHICAGO

" » How To Make A Typescript + NodeJS Express Project with eslint, EJS and nodemon hot reload." Ritesh Kumar | Sciencx - Accessed . https://www.scien.cx/2022/06/27/how-to-make-a-typescript-nodejs-express-project-with-eslint-ejs-and-nodemon-hot-reload/

IEEE

" » How To Make A Typescript + NodeJS Express Project with eslint, EJS and nodemon hot reload." Ritesh Kumar | Sciencx [Online]. Available: https://www.scien.cx/2022/06/27/how-to-make-a-typescript-nodejs-express-project-with-eslint-ejs-and-nodemon-hot-reload/. [Accessed: ]

rf:citation

» How To Make A Typescript + NodeJS Express Project with eslint, EJS and nodemon hot reload | Ritesh Kumar | Sciencx | https://www.scien.cx/2022/06/27/how-to-make-a-typescript-nodejs-express-project-with-eslint-ejs-and-nodemon-hot-reload/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.