DEV Community

TK
TK

Posted on • Originally published at leandrotk.github.io

Constant feedback driven development with Nodemon

Blur city

This post was originally published at TK's Blog.

I'm learning a lot about building new projects using Typescript. Today I want to tell you more about building things with constant feedback and how to make the development dynamic.

At first, when I started building things with Typescript, for every function I built, I had two options:

  1. Execute the file by using ts-node.
  2. Open a repl with ts-node and copy and paste the function there.

At first, it is ok to test simple things. But you all need to stop the development and lose the flow. I wanted a more dynamic development flow and I found nodemon.

nodemon is not specific for Typescript. It is a

Tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected. - nodemon.io

So, for every file you saved, nodemon will restart the application. With that, you can have constant feedback from what you are building.

Setting up

If you really like this tooling, you can install it globally:

npm install -g nodemon
Enter fullscreen mode Exit fullscreen mode

But I like to configure dependencies for each project. So I install it in the dev dependencies in the project I want to use it.

npm install --save-dev nodemon
Enter fullscreen mode Exit fullscreen mode

After installing it, we have to configure the nodemon json config. This is the simple configuration I did for my publisher tool:

{
  "watch": [
    "src",
    "examples"
  ],
  "ext": ".ts,.js,.html,.json",
  "ignore": [],
  "exec": "ts-node ./src/index.ts"
}
Enter fullscreen mode Exit fullscreen mode

It watches the src and example folders with .ts, .js, .html, and .json files. If one of these files changes, the nodemon executes your main file defined in the exec property. In my project, I add the main file in the ./src/index.ts.

In your package.json, you can add a script to handle nodemon:

{
  "scripts": {
    "start:dev": "nodemon"
  }
}
Enter fullscreen mode Exit fullscreen mode

Run the command:

npm run start:dev
Enter fullscreen mode Exit fullscreen mode

And now your app is up and running.. with constant feedback.

As I said earlier, dynamic feedback is really important in development mode. It helps you have instant feedback as early as possible, making it breaking and working faster.

For your next project, I really recommend you to play around with this library. Or set up a different tool to make your development more dynamic.

Resources

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay