DEV Community

Cover image for How to set up a Node Project using TypeScript in 2024
Arnaud Ferrand
Arnaud Ferrand

Posted on • Edited on

How to set up a Node Project using TypeScript in 2024

#node #typescript #javascript

Originally published at https://www.tsamaya.net/blog/2024-07-19-how-to-set-up-a-node-project-with-typescript-in-2024

I'm writing this down to make it easier to locate in the future because I've had to search for how to build a new Node project far too often. This is a brief, crude post with little background information.

Create the project 

# create a new project folder
mkdir my-node-project
cd my-node-project/
echo "20" > .nvmrc
nvm use
# Found '/Users/arnaud/projects/tsamaya/my-node-project/.nvmrc' with version <20>
# Now using node v20.11.1 (npm v10.2.4)
Enter fullscreen mode Exit fullscreen mode

Initialize the project 

git init
# Initialized empty Git repository in /Users/arnaud/projects/tsamaya/my-node-project/.git/
pnpm init
# Wrote to /Users/arnaud/projects/tsamaya/my-node-project/package.json

# {
#   "name": "my-node-project",
#   "version": "1.0.0",
#   "description": "",
#   "main": "index.js",
#   "scripts": {
#     "test": "echo \"Error: no test specified\" && exit 1"
#   },
#   "keywords": [],
#   "author": "",
#   "license": "ISC"
# }
Enter fullscreen mode Exit fullscreen mode

Install dev dependencies 

pnpm add -D typescript ts-node @types/node
# Packages: +20
# ++++++++++++++++++++
# Progress: resolved 20, reused 19, downloaded 1, added 20, done

# devDependencies:
# + @types/node 20.14.11
# + ts-node 10.9.2
# + typescript 5.5.3

# Done in 1.4s
Enter fullscreen mode Exit fullscreen mode

Initialize TypeScript 

npx tsc --init

# Created a new tsconfig.json with:       TS
#   target: es2016
#   module: commonjs
#   strict: true
#   esModuleInterop: true
#   skipLibCheck: true
#   forceConsistentCasingInFileNames: true


# You can learn more at https://aka.ms/tsconfig
Enter fullscreen mode Exit fullscreen mode

Customize

We are using node >= 20.6 then we can use:

  • The --watch flag was added in Node v18.11.0.
  • The --env-file=config flag was added in Node v20.6.0.

Add in the package.json file in the scripts section:

    "build": "tsc",
    "dev": "node --env-file=.env --watch -r ts-node/register src/index.ts",
Enter fullscreen mode Exit fullscreen mode

Edit the tsconfig.json file.

In the Language and Environment section, find target and replace it with your target, I use es2022 :

  "target": "ES2022"
Enter fullscreen mode Exit fullscreen mode

In the Emit section, find outDir, uncomment the line and use "./dist"

  "outDir": "./dist",
Enter fullscreen mode Exit fullscreen mode

dotenv file 

echo "TEST=World" > .env
Enter fullscreen mode Exit fullscreen mode

Let's code 

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

edit the index.ts file

function main(): void {
  console.log(`Hello ${process.env.TEST}`);
}

main();
Enter fullscreen mode Exit fullscreen mode

run with pnpm dev 

pnpm dev

# > my-node-project@1.0.0 dev /Users/arnaud/projects/tsamaya/my-node-project
# > node --env-file=.env --watch -r ts-node/register src/index.ts

# Hello World
# Completed running 'src/index.ts'
Enter fullscreen mode Exit fullscreen mode

Edit the src file; for example, adding ! will reload it and output the new value.

# Restarting 'src/index.ts'
# Hello World!
# Completed running 'src/index.ts'
Enter fullscreen mode Exit fullscreen mode

💡 Editing the value TEST in the .env file won't reload; one needs to stop and start again.

.gitignore file

Don't forget your .gitignore file, run

curl "https://www.toptal.com/developers/gitignore/api/node" > .gitignore
Enter fullscreen mode Exit fullscreen mode

Conclusion

That's all, folks. Happy coding!

Credits

Photo by Jorge Rosal on Unsplash

Top comments (3)

Collapse
 
crazyjat profile image
Jeff Tillwick •

Worst guide ever. In no way is this a server.

Collapse
 
tsamaya profile image
Arnaud Ferrand •

I'm sorry to hear you didn't find the guide helpful. The guide's title and focus were on setting up a general NodeJS project, not specifically a server application.

In the future, I'll try to be more explicit about the scope and goals of the guide upfront. I aimed to provide a general overview of common NodeJS project setup steps, but I understand that may not have been what you were looking for.

Please let me know if there are any other aspects I can clarify or expand on. I'm happy to improve the guide based on feedback.

Collapse
 
tsamaya profile image
Arnaud Ferrand •

I can see how the inclusion of the word "server" in the URL of my original post may have been misleading.
Fixed it.

Read next

velan profile image

Mastering Bruno: A Beginner's Guide to API Clients

Velan<> -

frorning profile image

JavaScript Interview Cheat Sheet - Part 2

Piyush Chauhan -

danrot90 profile image

Writing high quality tests

Daniel Rotter -

blamsa0mine profile image

How to Create a Dynamic Popover with CSS and JavaScript 🚀

A0mineTV -