Originally published at https://www.tsamaya.net/blog/2024-07-19-how-to-set-up-a-node-server-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)
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"
# }
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
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
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",
Edit the tsconfig.json
file.
In the Language and Environment
section, find target
and replace it with your target, I use es2022
:
"target": "ES2022"
In the Emit
section, find outDir
, uncomment the line and use "./dist"
"outDir": "./dist",
dotenv file
echo "TEST=World" > .env
Let's code
mkdir src
touch src/index.ts
edit the index.ts
file
function main(): void {
console.log(`Hello ${process.env.TEST}`);
}
main();
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'
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'
💡 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
Conclusion
That's all, folks. Happy coding!
Credits
Photo by Jorge Rosal on Unsplash
Top comments (0)