How To Set Up Fastify With TypeScript and Automatic Reload

Do you want to learn how to set up Fastify with TypeScript and automatic reload? In this guide, we will learn exactly that. We will first set up a new project using Fastify and then add automatic reload using nodemon!

• Set Up Fastify With TypeScript and Automatic Reload
• Conclusion

Set Up Fastify With TypeScript and Automatic Reload

Before we can start setting up the project, we need to create a new directory for it. Run the following commands to do so:

mkdir backend && cd backend

We then need to install the needed packages. The first one is fastify, which we will use to create our server. You can use npm, pnpm, or whatever package manager you are using. I will use pnpm.

pnpm i fastify

Next up, we will install some packages that are only needed for development. These are:

• typescript and @types/node: Add typescript support to the project.
• nodemon: For the automatic reload.
• ts-node: Execute .ts files without needing to compile first.

To install them, run:

pnpm i -D typescript @types/node nodemon ts-node

Next, we need to create the typescript configuration file using:

npx tsc --init

Then update the target inside the tsconfig.json file to es2017 and set the outDir to ./build. With that, we configured the TypeScript for our project, and we can create the main file. Do this by creating a directory src with a file called index.ts. Inside the index.ts file, add the following basic server code:

import fastify from 'fastify'  
const server = fastify()

// Declare a route  
server.get('/', function (request, reply) {  
	reply.send({ hello: 'world' })  
})  
  
// Run the server!  
server.listen({ port: 3000 }, function (err, address) {  
	if (err) {  
		server.log.error(err)  
		process.exit(1)  
	}
	
	console.log(`Server is now listening on ${address}`)  
})

Before we can actually run the project with nodemon, we have to create a configuration file. Inside the configuration file, we specify that we want to execute .ts files using ts-node. To do so, we create the file nodemon.json and add the following content:

If this guide is helpful to you and you like what I do, please support me with a coffee!

{
	"execMap": {
		"ts": "ts-node"
	}
}

The next step is to add the following scripts inside the package.json file:

{
...
	"scripts": {
		"dev": "nodemon --watch src src/index.ts",
		"build": "tsc -p tsconfig.json"
	}
...
}

The script “dev” allows you to start the development version with automatic reload, and “build” allows you to compile the TypeScript files for the final release.

With that, the configuration is done, and we can run the project using:

pnpm run dev

Conclusion

In this quick guide, you learned how to set up Fastify with TypeScript and Nodemon for automatic reload in a step-by-step manner. I hope it was useful to you, and if you have any other questions, let me know through Discord, comments, or mail!

In case you liked this quick guide, consider subscribing to my monthly newsletter to not miss any posts!

[convertkit form=2303042]