Codespaces developer environments support

[markweitzel]

No description provided.

[savannahostrowski]

Can we outline more specifically what does and does not work in Codespaces today? Is it just that you can't login via Azure? That's the problem I ran into. Is this the only issue?

[jongio]

1. You have to run az login --use-device-code
2. You can't run or debug the application in codespace

@v-xuto - Can you please do a full test pass on Codespaces and file any issues discovered? Thanks!

[v-xuto]

@jongio We have finished the manual tests in the codespace for the seven templates.

Test results in codespace for seven templates:

• todo-csharp-cosmos-sql :
  New issue: issue#552
  Deployment is not valid according to the validation procedure in todo-nodejs-mongo-swa-func.

• todo-nodejs-mongo-aca, todo-nodejs-mongo-swa-func, todo-python-mongo-swa-func,
  todo-python-mongo, todo-nodejs-mongo, todo-python-mongo-aca:
  Old issues: issue#246, issue#291

  When we directly use the templates to test, there is an old issue#246.
  But issue#246 fixed by PR #505 .
  So, when we update the code in these templates by PR #505, we will can't reproduce the issue#246, and our test encountered the old issue#291.

  After investigating, the code in the azure-dev repo is out of sync with the code in other templates.

Notes:
We will have an error when excute command bash ./test-templates.sh -c false: Host system is missing dependencies.
To solve this issue, we can excute this command based on comments:

sudo apt-get install -y gstreamer1.0-libav libnss3-tools libatk-bridge2.0-0 libcups2-dev libxkbcommon-x11-0 libxcomposite-dev libxrandr2 libgbm-dev libgtk-3-0

[danieljurek]

Goals:

• azd detects it's in codespaces and logs in with --use-device-code
• Foreach sample repo: codespaces scenarios work
  • La

Codespace scenario:

1. Create new codespace from template repo (possibly fork)
2. In terminal: curl -fsSL https://aka.ms/install-azd.sh | bash -s -- --version daily
3. In vscode extension:
   1. azd provision
4. Debugger Launch API works
5. Debugger Launch Web works in codespaces

Codespaces support matrix:

1. Debug API + Task launch web
2. Debug API + Debug Web
3. Task launch API + Debug Web
4. Deployed API + Debug Web

Repo List:

• Azure-Samples/todo-nodejs-mongo-terraform
• Azure-Samples/todo-nodejs-mongo
• Azure-Samples/todo-csharp-cosmos-sql
• Azure-Samples/todo-python-mongo-aca
• Azure-Samples/todo-python-mongo-swa-func
• Azure-Samples/todo-python-mongo-terraform
• Azure-Samples/todo-python-mongo
• Azure-Samples/todo-nodejs-mongo-aca
• Azure-Samples/todo-nodejs-mongo-swa-func
• Azure-Samples/todo-csharp-sql

Notes:

• Observed crash when running both API and Web simultaneously (in todo-nodejs-mongo)... Use a 8GB RAM instance instead of one with 4GB
• The vscode plugin is installed in the codespaces environment by default but we still get a recommendation to install it ([codespaces] vscode plugin is installed by default but still get prompt to install it #916)
• Should we ensure that provision has been run on each launch? (what's the hang time for deploying if everything's already been deployed?) ([codespaces/vscode] When launching "debug" for API we should ensure that azd provision succeeded #915)
• Do we care about updating the env variable after a deploy? (we do care. changes to .env can break deployed apps)
• The react app fails when it hits a 302 when attempting to contact the API hosted in Codespaces with a PRIVATE port. Ideally the react app would somehow transparently follow some set of 302s to get correct authentication. ([codespaces] Web app does not follow redirects from "private" port #914)

[savannahostrowski]

Are we still investigating getting azd included in the Codespaces image? I think it'd be amazing if we could eliminate the install step - that's be the goal, IMO.

[danieljurek]

These are mostly notes to myself. I'm installing daily which is the latest of what's in main and hasn't yet been released. Once we do the next release we can eliminate that step.

[savannahostrowski]

Sweet - thanks Daniel!

[danieljurek]

Further discussion with @philliphoff on Friday yielded a few more pieces of information.

• dotenv tasks cannot presently "end" when a nested background task reaches an "end" ... this means that for frontend debugging we'll never launch the browser because the the Web npm start task never completes. (One-step debug experience for Web projects #917)
• We can't launch a browser from codespaces inside the browser, this appears to be a limitation of vscode when running in the browser.

To fix this we'd need to: (#918)

• Implement a task which can run commands like the Web npm start task, but with a dotenv file (location dynamically determined). This task would need to use matchers so that it could pass control back to the task system.
• Implement a teardown task which ends tasks associated with a debug run. After debugging ends the task would end associated Web tasks.

[danieljurek]

When validating "deployed API" scenarios in at least app service (and probably others) there are CORS policies set which prevent the possibility of running the web app in GH codespaces against an API that has been deployed to app services.

[weikanglim]

@savannahostrowski With all the recent fixes by @danieljurek and myself, here's what works and doesn't work:

Codespaces (Desktop and Web)

1 outstanding issue: #922 - Python debugging doesn't work. This happens on local devcontainer as well.

Codespaces on Desktop

Working:

• All azd commands.
• All debugging activities for Web.
• All debugging activities for API.

Not working:

• None known at this point (except for the outstanding Python issue)

Codespaces on Web

Working:

• All azd commands.
• All debugging activities for API.

Not working:

• Launching web with VSCode debugging does not work -- this is due to "VSCode in browser" limitation. It's a browser, and it's unable to launch another browser process with JS source map attached.
• Launching web without VSCode debugging. This currently requires the following manual-steps unless we address [vscode] Support Codespaces web launch without debugger experience #918
  • Change API visibility to public (This exposes your developer-box instance on the public web)
  • Change the setting for web to point to the public API endpoint

Without VSCode debugging for front-end JS, the Codespaces in browser experience still feels like an incomplete experience. Thus, I would rather not do #918 and tell users the story that:

• If you are doing development that doesn't require launching a web browser, go ahead with Codespaces in browser.
• Otherwise, we recommend Codespaces in Desktop as a better development experience

There's also other considerations about supporting VSCode in browser that gives me pause:

• Less secure. The user needs to open up the API instance inside their codespace to be Public on the internet -- they wouldn't need to do this in the Desktop experience
• Cost of integration. We would have to introduce codespace specific integration points to configure the magic -- which we haven't done up to this point (except for the one-line device code detection in azd).

[savannahostrowski]

Also leaving a note here for the record. I think Codespaces is ready to announce in January (when we have our next big monthly release). The issues noted here are not, IMO, azd issues but rather issues/limitations with Codespaces in the browser all up. See https://code.visualstudio.com/docs/remote/codespaces ...notably, the limitations section where they denote that "Code running in a browser cannot launch another browser instance in debug mode for security reasons.". They encourage users to use Codespaces running locally in VS Code for that use case.

[savannahostrowski]

One last thing: the plan of record is still to include azd in the Codespaces image right? So that a user doesn't have to install the tool and things just work ™️ (e.g. I can fork a template, open in a Codespace and go right to right-click azure.yaml to run azd up)?

[jongio]

That works today.

[savannahostrowski]

Are you sure? I just tried it out and was still prompted to install azd (I got a toast notification) before azd up could run (and then subsequently prompted to install az, which is being remedied in another way)

[jongio]

Screenshots pls

[rajeshkamal5050]

Tried with,
- todo-java-mongo, seems to be working fine with no manual steps.

- todo-python-mongo, not working. Azd seems to be installed. Looks like Az CLI has some installation issues.

[weikanglim]

Are you sure? I just tried it out and was still prompted to install azd (I got a toast notification) before azd up could run (and then subsequently prompted to install az, which is being remedied in another way)

@savannahostrowski I think you're likely hitting microsoft/vscode#165292. I believe VSCode has race conditions when initially launching the devcontainer in Codespaces. It's a false-positive prompt that is a bug in VSCode.

[savannahostrowski]

@weikanglim Ah yeah, I just tried again on another template and I didn't run into it again. Seems like I can azd up right from the get-go without install.

However, I did run into an interesting error. On todo-python-mongo I was able to fork the template and then open the Codespace. But when I just tried that same flow with todo-python-mongo-aca, I ran into this error on GitHub:
.

I tried removing the description when I create the fork but this persists. It's likely a GitHub bug but not sure where that's coming from. I was able to just open a Codespace directly on the template to get around this.

[weikanglim]

@savannahostrowski That's odd. I was able to create a fork and open in Codespace.

If I needed to guess, that error is indeed from our GitHub repository's descriptions being over the validated length -- this either is a new requirement, or we had created this through our innersource Portal which may have bypassed the requirements.

The repository description on https://github.com/Azure-Samples/todo-python-mongo-aca is:

A complete ToDo application that includes everything you need to build, deploy, and monitor an Azure solution.
This application uses the Azure Developer CLI (azd) to get you up and running on Azure quickly, React.js for the Web application, Python (FastAPI) for the API, Azure Cosmos DB API for MongoDB for storage, and Azure Monitor for monitoring and logging.

Length = 361

I wonder if we can shorten the description to the thing that is different about this repository vs. others. The full description is still in the readme file.

A complete ToDo application that includes everything you need to build, deploy, and monitor an Azure solution.
This application uses the Azure Developer CLI (azd) to get you up and running on Azure quickly, Python (FastAPI) for the API on Azure Container Apps, Azure Cosmos DB API for MongoDB for storage.

[savannahostrowski]

Filed a bug on template description: #1199

This is ready for announcing in January. I've tagged with newsworthy.

[danieljurek]

This can be closed. New issue to document login behavior changes: #1216