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 thestart
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 runnpm run start
from the command line. - In
angular-deno-stack-poc\server
folder rundeno run --allow-net --allow-read .\server.ts
command to start the Deno server. - Open the browser on
http://localhost:4200/
. (Note that the port8080
serves the built app from thedist
folder, we have the live reloading feature of Angular on port4200
.) 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:
- In
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 theurl
tohttp://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 beforeapp.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 choosingChrome
in the VS Code. Change the content of the generatedlaunch.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.
Top comments (0)