How To Set Up A New Typescript Project With Automatic Reload

Do you want to easily set up a new typescript project that supports hot reload? In this post, I will show you the requirements and how to create the setup step-by-step. As a little disclaimer, you can run the following command to immediately create the project set up from this post for your project:

npx simple-ts-app my-app

Learn how to create an npx boilerplate command in this post here.

Used Packages

For this setup, we will use multiple npm packages. You can install them all with the following command (if you want to follow the guide, do not do this already we will do this in the step-by-step guide as well):

npm i -D typescript ts-node nodemon

The packages have the following tasks:

• typescript: Allows you to use Typescript in your project and provides, for example, the compiler
• ts-node: Allows you to run Typescript files without needing to compile them
• nodemon: Allows for faster development by restarting you change a tracked file in your application

Set up the Typescript project

Setting up a new typescript project with auto-reload requires multiple steps that I will show you now:

1. Create a new project directory:
   mkdir my-app
cd my-app
2. Initialize the project:
   npm init -y
3. Install dependencies:
   npm i -D typescript ts-node nodemon
4. Initialize Typescript:
   npx tsc --init
   (Update the properties inside the tsconfig.js file the way you want them)
5. Create a nodemon configuration:
   touch nodemon.json
   Add the following content:
{"include": ["src"], "ext": "ts", "exec": "ts-node src/index.ts"}
6. Now let’s add our code by first creating a src directory:
   mkdir src
   Containing a index.ts file:
   touch src/index.ts
   With the following content:
   console.log("Hello World!");
7. Before we can run it, we should add two scripts to the package.json. First the dev script, that starts nodemon for us:
   "dev": "nodemon"
   And then the build script that compiles our typescript files to javascript:
   "build": "tsc"

To now run the new project, enter npm run dev and nodemon should start, and the console should show “Hello World!” after a short time.

Conclusion

I hope this short guide gave you an easy and understandable way to set up your next typescript project! I am using this mostly for backend applications, but I guess you can use it for every project using typescript. In case any questions came up, feel free to ask for help! You can either use the comments or send me an email at mail@programonaut.com.

In case you like this short guide, consider subscribing to my newsletter to get monthly updates on all my posts!

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

[convertkit form=2303042]