Deno - Angular Development Environment

In a previous post I showed you how to set up a Deno server with Angular.

The goal of this post is to extend the Proof of Concept with the features that are needed for the development of the server and the client app. It covers following topics:

• Set up Angular development tools
  • Installing VS Code Extensions
  • Set up Angular live reloading
  • Configure debugger
• Set up Deno development tools
  • Install VS Code Extensions for Deno development
  • Set up live reloading
  • Configure the debugger

The below description uses the outcome of the previous post. The code, from where I continue, can be found on GitHub.

The folder structure that we are working with looks following:

Here client-app contains the Angular app, server the Deno server code and common the shared code between server and client side.

Set up Angular development tools

We are going to develop the Angular app in a separate VS Code window. Let's open Visual Studio Code from the angular-deno-stack-poc\client-app folder and get started.

Installing VS Code Extensions for Angular development

• Install Angular language service to make easier the editing of Angular code.
• Install Debugger for Chrome extension to make possible the usage of the debugger.

Set up Angular live reloading

To use the live reloading feature of Angular we need to configure ng serve to send the requests of the Angular app to the Deno server. Otherwise we would be unable to fetch data from the server, when the app is developed with ng serve. So let's do following steps:

• Create a file named proxy.conf.json.
• Add following content to it to have a proxy configuration to the Deno server that will listen on port 8080.

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

• In the package.json modify the start script to use the proxy config:

"start": "ng serve --proxy-config proxy.conf.json",

• Let's check if it works.
  • In angular-deno-stack-poc\client-app folder run npm run start from the command line.
  • In angular-deno-stack-poc\server folder run deno run --allow-net --allow-read .\server.ts command to start the Deno server.
  • Open the browser on http://localhost:4200/. (Note that the port 8080 serves the built app from the dist folder, we have the live reloading feature of Angular on port 4200.) If everything is configured fine we are able to see the fetched data from the server, it is "Hello from API!" and the actual time.
  • Let's change something in the Angular code to check the live reloading. Open the app.component.html add some text and save it. The change will be reloaded instantly in the browser:

When this works we can continue with setting up the debugger for Angular.

Configure debugger

In this section we enable the usage of breakpoints on the client side.

• Press F5 in VS Code and choose Chrome
• This will create a launch.json with a default content. In this file change the url to http://localhost:4200, so it should have following content:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

• Let's check if the debugger works. Make sure that the app is up and running. (npm run start if it is not running.) Put a breakpoint somewhere and press F5.

So that's it on the client side. Let's continue with the server.

Set up Deno development tools

We are going to develop the Deno app in a separate VS Code window. Let's open Visual Studio Code from the angular-deno-stack-poc\server folder.

Install VS Code Extensions for Deno development

• Install Deno language service to support the development of Deno code.
• If the above extension is active in the VS Code of Angular, the Angular code will be full of red underlines as you can see below:

As a workaround I suggest to disable the Deno extension globally and enable it only in the workspace of the Deno server.

Set up live reloading for Deno

• To have a live reloading feature while developing the Deno server denon is needed. Install it using below command:

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

• After installing it, run denon --version command to check if the installation was successful.
• Stop the Deno server if it is still running and start it with denon:

denon run --allow-net --allow-read .\server.ts

• Let's check if the live reloading works for the server. Add console.log("Live reloading works!"); in the server code before app.listen({ port: 8080 }); save it and check the console:

The live reload is working. denon can be called with the same parameters as deno, so it can be used simply instead of deno command when live reload is needed.

Configure the debugger for Deno

In this section we enable the usage of breakpoints on the server side.

• To set up the debugger for Deno, create a default launch.json by hitting F5 and choosing Chrome in the VS Code. Change the content of the generated launch.json to following:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Deno",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "deno",
      "runtimeArgs": [
        "run",
        "--inspect-brk",
        "-A",
        "server.ts"
      ],
      "port": 9229
    }
  ]
}

• Let's check if it works. Make sure that the Deno server is running. Put a breakpoint somewhere in the code and press F5.

If it is configured fine the breakpoint is hit.

Conclusion

Now we have a development environment which is capable of using live reloading and debugging both on the frontend and backend side. This is very powerful since the feedback loops are kept tight while development.

I personally like to see the frontend and the backend code in two separate Visual Studio Code windows that's why I have set up the launch.json files separately. The disadvantage of this approach is that I have to open a third editor if the common code needs to be edited.

However if you would like to develop from the angular-deno-stack-poc root folder with one VS Code window, the Deno language service extension can not be used right now, because it would mess up the frontend code with the underlines. If you already have a solution for this open point please let me know.

The finished development environment is available on GitHub.