Codespaces config for .NET Angular project
After creating a working dev container configuration for an ASP.NET Core with Angular project, I wanted to also try it out with GitHub Codespaces. I had to do additional changes to the configuration to get it working.
To open the code from the repository in a codespace, I clicked the Code dropdown on the GitHub repository page, switched to the Codespaces tab and clicked the Create codespace on main button.
Once the codespace was ready, it opened in Visual Studio Code for the Web. I prefer using my local copy of Visual Studio Code, so I clicked on the Open in VS Code Desktop item in the hamburger menu to switch. For this to work, I had to install the GitHub Codespaces extension in Visual Studio Code.
The initial experience was more or less identical to using a dev container. I could start the project with dotnet run in the terminal and open the page in the browser. However, once the Angular application was ready, the browser failed to redirect to it. Looking at the Ports View, provided an explanation:
The Angular port (44433) is auto-forwarded, which in GitHub Codespaces only works for HTTP protocol. Adding the port to the list of forwarded ports in devcontainer.json and setting its protocol to HTTPS solves this problem:
"forwardPorts": [5001, 5000, 44433, 49153],
"portsAttributes": {
"5001": {
"protocol": "https"
},
"44433": {
"protocol": "https"
}
},
Now, the page opens but results in a Bad Gateway error after a while:
The reason for this is Angular CLI. By default, the ng serve command only listens on localhost, therefore it doesn't respond to incoming connections from outside the container. To make it work, the --host=0.0.0.0 option must be added to the command in package.json
"start:default": "ng serve --port 44433 --host=0.0.0.0 --poll 500 --ssl --ssl-cert \"$HOME/.aspnet/https/${npm_package_name}.pem\" --ssl-key \"$HOME/.aspnet/https/${npm_package_name}.key\"",
With this change, the Angular application running in GitHub Codespaces can finally be accessed from outside the container via its assigned external URL. Hot reload unfortunately still doesn't work, and I don't think it can be made to work. However, the code gets automatically rebuild for every change, so you just need to refresh the page in the browser manually.
You can find the working project in my GitHub repository, and you can create your own codespace for it to try it out. The last commit shows the changes I made to my working dev container configuration to make it work in GitHub Codespaces.
GitHub Codespaces is a development environment in the cloud that's compatible with the dev container specification. Not all dev container configurations work in the cloud as well as locally, although making them work shouldn't require a lot of changes. And the resulting configuration should still work in a local dev container.
