{"id":11837,"date":"2025-01-23T05:53:29","date_gmt":"2025-01-23T05:53:29","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=11837"},"modified":"2025-01-23T06:13:51","modified_gmt":"2025-01-23T06:13:51","slug":"watch-and-reload-ts-node-when-typescript-files-change","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/node\/watch-and-reload-ts-node-when-typescript-files-change","title":{"rendered":"How to Watch and Reload ts-node When TypeScript Files Change"},"content":{"rendered":"

Solution 1 : Using Nodemon with ts-node<\/h2>\n

Step 1: Install Required Packages<\/h3>\n
npm install ts-node nodemon typescript --save-dev\r\n<\/pre>\n
Step 2: Create a nodemon.json<\/strong> Configuration File<\/h3>\n
Add a nodemon.json<\/strong> file to your project root with the following content:<\/p>\n
{\r\n  \"watch\": [\"src\"],  \/\/ Directory or files to watch\r\n  \"ext\": \"ts\",       \/\/ File extensions to watch\r\n  \"ignore\": [\"dist\"], \/\/ Directories to ignore\r\n  \"exec\": \"ts-node .\/src\/index.ts\" \/\/ Command to execute\r\n}\r\n<\/pre>\n
Step 3: Run nodemon<\/h3>\n
Use nodemon to start your application:<\/p>\n
npx nodemon\r\nOr\r\n\"scripts\": {\r\n  \"start\": \"npx nodemon\"\r\n}\r\n<\/pre>\n
Alternative if we dont want to create a nodemon.json file then we can execute following command directly or we can add it to package. Json.<\/p>\n
npx nodemon --watch src --ext ts --exec \"ts-node .\/src\/index.ts\"\r\n<\/pre>\n
Pros:-<\/strong><\/p>\n
    \n
  1. Mature and Flexible<\/b>:<\/span>\n
      \n
    • nodemon<\/span> offers a wide range of configuration options, such as ignoring files, specifying extensions, and handling custom scripts.<\/span><\/li>\n
    • You can fine-tune what to watch or ignore, making it suitable for larger projects.<\/span><\/li>\n<\/ul>\n<\/li>\n
    • Compatible with Complex Workflows<\/b>:<\/span>\n
        \n
      • Works well with tools like preprocessors or additional build steps.<\/span><\/li>\n
      • Can integrate with custom tasks (e.g., linting or running multiple commands).<\/span><\/li>\n<\/ul>\n<\/li>\n
      • Community Support<\/b>:<\/span>\n
          \n
        • Widely used, so you\u2019ll find plenty of resources, plugins, and fixes for common problems.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
          Cons:-<\/strong><\/p>\n
            \n
          1. Dependency Overhead<\/b>:<\/span>\n
              \n
            • Requires installing <\/span>nodemon<\/span> and configuring it, which adds extra setup and dependencies.<\/span><\/li>\n<\/ul>\n<\/li>\n
            • Performance<\/b>:<\/span>\n
                \n
              • Slightly slower for very large projects since it monitors a broader range of files.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                Solution 2 : Using Node.js’s Built-in –watch Mode<\/h2>\n
                We can use Node.js’s built-in –watch mode which monitors files for changes and restarts your application automatically. This feature is available from Node.js v18.11.0 <\/strong>and later.
                \nWe can use this command to run ts-node directly using node js built in watch mode.<\/p>\n
                node --watch -r ts-node\/register .\/src\/index.ts\r\n<\/pre>\n
                Pros:-<\/strong><\/p>\n
                  \n
                • Lightweight<\/b>:<\/b><\/li>\n<\/ul>\n
                    \n
                  • No need to install additional tools like <\/span>nodemon<\/span>. Ideal for smaller projects or minimal setups.<\/span><\/li>\n<\/ul>\n
                      \n
                    • Built-In Simplicity:<\/b>\n
                        \n
                      • Reduces dependency management.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                          \n
                        1. \n
                            \n
                          1. <\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
                              \n
                            • \n
                                \n
                              • The <\/span>–watch<\/span> mode is easy to enable with no extra configuration.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                  \n
                                • Good for Small-to-Medium Projects:<\/b><\/li>\n<\/ul>\n
                                    \n
                                  1. \n
                                      \n
                                    • Works well for straightforward applications without a lot of custom requirements.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                      Cons:-<\/strong><\/p>\n
                                        \n
                                      • Less Configurable:<\/b><\/li>\n<\/ul>\n
                                          \n
                                        • You can’t exclude specific file types or directories unless you set environment variables (<\/span>NODE_WATCH_IGNORE<\/span>).<\/span>\n
                                            \n
                                          • No support for additional workflows like running custom scripts.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                              \n
                                            1. \n
                                                \n
                                              1. <\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
                                                  \n
                                                • Not Feature-Rich:<\/b><\/li>\n<\/ul>\n
                                                    \n
                                                  1. \n
                                                      \n
                                                    • Limited to restarting the application when files change. It lacks advanced capabilities like conditional restart logic or task runners.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                                      Recommendation<\/h2>\n
                                                        \n
                                                      1. Use <\/b>nodemon<\/b> with <\/b>ts-node<\/b> if<\/b>:\n
                                                          \n
                                                        • You need advanced features like ignoring specific files or directories.<\/li>\n
                                                        • You work on large or complex projects with custom workflows.<\/li>\n
                                                        • You prefer a mature and well-supported solution.<\/li>\n<\/ul>\n<\/li>\n
                                                        • Use Node.js Watch Mode if<\/b>:\n
                                                            \n
                                                          • You prefer simplicity and fewer dependencies.<\/li>\n
                                                          • You\u2019re working on a smaller project or want a lightweight setup.<\/li>\n
                                                          • You\u2019re exploring Node.js\u2019s built-in capabilities for a minimalist approach.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
                                                            Solution 1 : Using Nodemon with ts-node Step 1: Install Required Packages npm install ts-node nodemon typescript –save-dev Step 2: Create a nodemon.json Configuration File Add a nodemon.json file to your project root with the following content: { “watch”: [“src”], \/\/ Directory or files to watch “ext”: “ts”, \/\/ File extensions to watch “ignore”: [“dist”], […]<\/p>\n","protected":false},"author":1,"featured_media":11838,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-11837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11837"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=11837"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11837\/revisions"}],"predecessor-version":[{"id":11841,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11837\/revisions\/11841"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/11838"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=11837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=11837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=11837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}