DEV Community

Cover image for How To Make A Typescript + NodeJS Express Project with eslint, EJS and Restart On Typescript Server Changes
Ritesh Kumar
Ritesh Kumar

Posted on

How To Make A Typescript + NodeJS Express Project with eslint, EJS and Restart On Typescript Server Changes

Start with a clean project

pnpm init
or
npm init -y
Enter fullscreen mode Exit fullscreen mode

Install some dependencies

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

or 

npm install -save-dev eslint @types/node @types/express typescript ts-node-dev
npm install --save express ejs 
Enter fullscreen mode Exit fullscreen mode

make a new folder for your project

mkdir src
touch src/app.ts
Enter fullscreen mode Exit fullscreen mode

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}`);
});
Enter fullscreen mode Exit fullscreen mode

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"
    ]
}
Enter fullscreen mode Exit fullscreen mode

Now we will run eslintโ€™s initialization command to interactively set up the project:

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

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 use ts-node-dev for watching the changes in our typescript server file

As we already installed the dev dependency we do not have to do much we just have to add the start script in our package.json file

Lets Change our package.json and add some lines

add main

"main": "dist/app.js",
Enter fullscreen mode Exit fullscreen mode

add lint and start in scripts

"lint": "eslint . --ext .ts",
"start": "ts-node-dev src/app.ts"
Enter fullscreen mode Exit fullscreen mode

Finally It should look like this

{
  "name": "typescript-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint . --ext .ts",
    "start": "ts-node-dev src/app.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.30.0",
    "@typescript-eslint/parser": "^5.30.0",
    "eslint": "^8.18.0",
    "ts-node-dev": "^2.0.0",
    "typescript": "^4.7.4"
  },
  "dependencies": {
    "ejs": "^3.1.8",
    "express": "^4.18.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now start the project with pnpm or npm

pnpm start
or
npm start
Enter fullscreen mode Exit fullscreen mode

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

Top comments (10)

Collapse
 
attkinsonjakob profile image
Jakob Attkinson

Here are a couple of nooby questions:

should ts-node-dev watch the app.ts or the start command should look like this: "start": "npx tsc && ts-node-dev dist/src/app.js ?

Meaning, should we be watching the ts file or the compiled version?

If you deploy this app on production, how would you start the server?

Collapse
 
nyctonio profile image
Ritesh Kumar • Edited

no there is no need to add tsc in start script ts-node-dev do all the jobs but in production we should use our transpiled file as we have already type checked everything

Collapse
 
attkinsonjakob profile image
Jakob Attkinson

ts-node-dev doesn't transpile, does it? At least in my case, if I want to have the dist/build folder, I do need to manually run tsc

Thread Thread
 
nyctonio profile image
Ritesh Kumar

No, actually It does not transpile it automatically I will recommend you to create different scripts for development and production
"start:dev": "ts-node-dev src/app.ts",
"start": "tsc && node dist/app.js"

Thread Thread
 
attkinsonjakob profile image
Jakob Attkinson

Thank you!

Collapse
 
brense profile image
Rense Bakker

For a typescript project highly prefer ts-node-dev over nodemon
With your current start script, if you make a change to the typescript code it will not recompile automatically, you can fix that with nodemon, but ts-node-dev has no need to recompile your code, it will just serve the changed typescript immediately which is obviously much faster.

Collapse
 
brense profile image
Rense Bakker

Actually I just noticed you're doing stuff double... because you are using ts-node in your nodemon config you dont need to tsc before running nodemon. ts-node is also much slower than ts-node-dev though and you dont need to have nodemon at all, you can just add a script like this: "start": "ts-node-dev src/app.ts" and thats all you need.

Collapse
 
nyctonio profile image
Ritesh Kumar

Thank you for your insights I will check this out for sure

Collapse
 
tylim88 profile image
Acid Coder

I use babel-node to run typescript project

dev.to/tylim88/babel-node-typescri...

Collapse
 
nyctonio profile image
Ritesh Kumar

thank you for sharing