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.