DEV Community

Gonzalo López
Gonzalo López

Posted on • Updated on

Deno live reload server

Hey! We just started our first steps at deno. We already forgot to run our deno script with the --allow-net flag. We also exclaim WTF! after check that for await loop or that those remote dependencies works. And, maybe, we have been wondering how our life could be if we would have meet a native standard library before.

But now, we finally got a running hello world script that could looks similar to this:

import { serve, Server } from "https://deno.land/std/http/server.ts";

const server: Server = serve({
  port: 8000,
});

console.log("http://localhost:8000/");

for await (const request of server) {
  request.respond({
    body: `Hello World!!`,
  });
}

Nice! We are the brontosaurus of code, the triceratops of security flags, the std-lib t-rex. But that message is so standard. Lets change it a bit.

...

for await (const request of server) {
  request.respond({
    body: `Welcome to my Deno application`,
  });
}

Now refresh the browser. Same response... Oh! Probably we forgot to save the file... Nope. Could it mean that the server didn't reload the code? Let's check it.

  1. Stop the server.
  2. Forget the --allow-net flag (again).
  3. Rerun the script with the flag.

Well, that's it! Here we got our changes. And now what? Will we have to restart servers each time we make a change? Does not deno have a live reload?

Fortunately, as allways, someone has faced the problem before us. And also has thought about a solution.

DENON

Denon is a utility that will monitor for any changes in source files and automatically restart the server.

If you have worked with node before, you probably know nodemon. Well, here's the deno implementation. So let's follow the read me.

Installation

It is veeeery simple. First, ensure we have at least the 1.0.1 version of deno. We can check our version with:

$ deno --version

If our version is older, we can upgrade it using:

$ deno upgrade

Once we got the correct version, we are ready to install it. We will use the script installer tool. Here is the command:

$ deno install --allow-read --allow-run --allow-write -f --unstable
https://deno.land/x/denon/denon.ts 

It seems that each deno command requires allow permissions explicitly. It also requires the explicit --unstable flag because it uses some std-lib features (still in beta). I like it. You have to know what are you doing. Perfect.

Ensure that installation has been successfully by checking version:

$ denon --version

Thats all. We are ready for watch live code. denon command is just a wrapper, so we have to execute our script as before but using denon instead of deno as command.

$ denon index.ts

Just kidding 😁. Remember that deno requires explicit permissions for everything!!

$ denon run --allow-net .\index.ts

Now we will see how the code is reloaded after save a file:
Alt Text

Thats all folks. I hope you could find this usefull!

Top comments (2)

Collapse
 
draylegend profile image
Vladimir Drayling

Thank you for the tutorial!

Is there a way to reload a browser's tab, when files are changed?

Collapse
 
mejanhaque profile image
Muhammad Mejanul Haque

Thanks...its working...