Deno - Angular Development Environment
Tags: angular, deno
Published: 2020-06-05 05:24:35

---
series: Deno-Angular-PoC
---

[In a previous post](https://dev.to/milantenk/deno-angular-stack-proof-of-concept-1df2) 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](https://github.com/milantenk/angular-deno-stack-poc/tree/post_1). 

The folder structure that we are working with looks following:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1c5x3b63bwqcmvguoz13.jpg)
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](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) to make easier the editing of Angular code.
* Install [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.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`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hhua0qfzhbfegb6mfe4v.png)
* Add following content to it to have a proxy configuration to the Deno server that will listen on port `8080`.

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

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

```javascript
"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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u2hvlrdbvqaop2hb6fdi.png)
  * 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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1vn91frfvk63trxo0em6.png)

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`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1rho2q6xxiw72haijrk9.png)
* 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:

```javascript
{
    "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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3twonlxckag5u7a8eyjk.png)

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](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno) 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: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6nnsrt1baa8xnwl99mmw.jpg)

As a workaround I suggest to disable the Deno extension globally and enable it only in the workspace of the Deno server.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/59tg6app4re4ayffb8lf.png)
 
###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:

```powershell
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`:

```powershell
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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l7lx9oomglw6al8s6h2i.png)

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:

```javascript
{
  "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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0alnb3no01rdz8w27sgj.png)

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](https://github.com/milantenk/angular-deno-stack-poc/tree/post_2).