TypeScript - Auto Refresh TypeScript project in browser With LiveReload

[Last Updated: Dec 11, 2018]

This tutorial shows how to auto refresh web application in browser when changes are made to TypeScript source files.

To auto compile from TypeScript files to JavaScript files, we will use tsc --watch (last tutorial).

To auto refresh application in browser we will use LiveReload.

Creating TypeScript project

We are going to reuse our example project from the last tutorial.

D:\typescript-project-with-live-reload>tree /a /f
Folder PATH listing for volume Data
Volume serial number is 68F9-EDFA
D:.
|   tsconfig.json
|   
+---ts-src
|       hello.ts
|       
\---web-app
    |   index.html
    |   
    \---js
            hello.js

Setting up LiveReload

There are two LiveReload components we have to setup; LiveReload server application and LiveReload browser extension.

Download LiveReload server from here. I'm using Windows so I downloaded and installed 'LiveReload 0.9.2 Alpha for windows'. I also installed Chrome LiveReload extension (link).

Start LiveReload server application from windows start menu. Select our project location (D:\typescript-project-with-live-reload\web-app) by clicking + sign:

Running TypeScript application

Start TypeScript in watch mode:

D:\typescript-project-with-live-reload>tsc --watch

[1:44:03 PM] File change detected. Starting incremental compilation...

[1:44:03 PM] Found 0 errors. Watching for file changes.

Start Node http-server:

D:\typescript-project-with-live-reload\web-app>http-server -c-1
Starting up http-server, serving ./
Available on:
  http://192.168.0.2:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Load index.html in browser and click on live reload icon:

The icon should turn to this (solid inner circle):

If you have difficulty connecting, then right click on LiveReload icon and then select following option

After you enabled the LiveReload in browser, the desktop application should show '1 browser connected message'

Now we can make changes to TypeScript source files without compiling to JavaScript and reloading the page manually. On saving the changes, the browser will get refreshed automatically.