How to automatically compile Typescript files to Javascript files and run the Nodejs server automatically
Tags: javascript, typescript, node, compile
Published: 2022-03-28 11:04:08

<!-- wp:paragraph -->
<p>When I started using typescript one of the first challenges I encountered was that I have to build/compile my typescript file to javascript before I can run the node server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So to compile I would run:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm run build</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and to run the node server, I would issue:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>node index.js</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>To do things automatically  I knew  I can watch changes to my .js server files by using packages like <strong>nodemon</strong>, so I installed it, and then set the <strong>scripts</strong> object like following in my package.json file:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>  "scripts": {
    "build": "tsc -p .",
    "start": "node index.js",
    "dev": "nodemon index.ts"
    
  }</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>The <em>build </em>property-value is what would be run when we issue <em>npm run build.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The <em>start </em>property-value is what would be run when we issue <em>npm run start</em>. You can answer for the <em>dev</em>, right.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now to automatically build your typescripts to javascript whenever you make and <strong>save</strong> changes to a typescript file, there are two ways to go about it</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>add <strong>-w</strong> flag to the build script.</li><li>or uncomment and then set the <strong>watch </strong>property to <strong>true</strong> in the <strong>compilerOptions </strong>object in your tsconfig.json file.</li></ol>
<!-- /wp:list -->

<!-- wp:image {"id":436,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://coolerswall.files.wordpress.com/2022/03/image-1.png?w=655" alt="" class="wp-image-436"/><figcaption>using the the watch flag <em>-w</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Either of these two would keep watching for saved changes in your typescript files and thereby compile automatically.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":434,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://coolerswall.files.wordpress.com/2022/03/image.png?w=874" alt="" class="wp-image-434"/><figcaption>setting <em>watch </em> to <em>true</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>So in one terminal run: <em><strong>npm run build</strong></em>, then open another terminal and run <strong><em>npm run dev</em></strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you issued <strong><em>npm run dev</em></strong>, your server would run and depend on the file name attached in the <strong><em>dev scripts</em></strong>. Conversely for <em><strong>npm run start</strong></em>. In the case here, the server would be running from <em><strong>index.ts</strong></em> if I issued <em><strong>npm run dev</strong></em>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Compilation from typescripts to javascripts would happen automatically because of the watch flag, -w or setting it to true in the <strong>tsconfig.json</strong> file.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Server would restart automatically because we are using <strong>nodemon</strong> to handle it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Just different terminals.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Also take these tips into consideration:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Nodejs server runs on javascript files</li><li>Changes to typescript has be saved and compiled/build to javascript</li><li>We need to build automatically</li><li>and we need to start our server automatically</li></ol>
<!-- /wp:list -->

<!-- wp:image {"id":439,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://coolerswall.files.wordpress.com/2022/03/image-2.png?w=1024" alt="" class="wp-image-439"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><em>Your brother in copy and paste,</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Abdwahab</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Tweet at me @wahabind</p>
<!-- /wp:paragraph -->