Once you have this sample opened, you'll be able to work with it like you would locally.
Some things to try:
-
Edit:
- Open
app.py
- Try adding some code and check out the language features.
- Make a spelling mistake and notice it is detected. The Code Spell Checker extension was automatically installed because it is referenced in
.devcontainer/devcontainer.json
. - Also notice that utilities like
pylint
and the Python extension are installed.
- Open
-
Terminal:
-
Press ctrl+shift+` to open a terminal window.
-
Type
python -m flask run --port 5000 --no-debugger --no-reload
to run the app.- The terminal will say your app is
Running on http://127.0.0.1:5000/
. Click on the link in the terminal to view your app running in the browser.
- The terminal will say your app is
-
Notice that the Python extension is already installed in the container since the
.devcontainer/devcontainer.json
lists"ms-python.python"
as an extension to install automatically when the container is created.Tip: If you use this container outside of VS Code via
docker run
with-p 5000
, you may need to append--host 0.0.0.0
to the command above. The-p
option "publishes" the port rather than forwarding it. It therefore will not work if the application only listens to localhost. TheforwardPorts
property indevcontainer.json
does not have this limitation, but you can useappPort
property instead if you want to mirror thedocker run
behavior.
-
-
Build, Run, and Debug:
- Open
app.py
- Add a breakpoint (e.g. on line 9).
- Press F5 to launch the app in the container.
- Once the breakpoint is hit, try hovering over variables (e.g. the app variable on line 7), examining locals, and more.
- Continue (F5). You can connect to the server in the container by either:
- Clicking on
Open in Browser
in the notification telling you:Your service running on port 5000 is available
. - Clicking the globe icon in the 'Ports' view. The 'Ports' view gives you an organized table of your forwarded ports, and you can access it with the command Ports: Focus on Ports View.
- Clicking on
- Notice port 5000 in the 'Ports' view is labeled "Hello Remote World." In
devcontainer.json
, you can set"portsAttributes"
, such as a label for your forwarded ports and the action to be taken when the port is autoforwarded.
- Open
-
Rebuild or update your container
You may want to make changes to your container, such as installing a different version of a software or forwarding a new port. You'll rebuild your container for your changes to take effect.
Open browser automatically: As an example change, let's update the
portsAttributes
in the.devcontainer/devcontainer.json
file to open a browser when our port is automatically forwarded.- Open the
.devcontainer/devcontainer.json
file. - Modify the
"onAutoForward"
attribute in yourportsAttributes
from"notify"
to"openBrowser"
. - Press F1 and select the Dev Containers: Rebuild Container.
- Open the
-
Install Node.js using a Dev Container Feature:
- Press F1 and select the Dev Containers: Configure Container Features... or Codespaces: Configure Container Features... command.
- Type "node" in the text box at the top.
- Check the check box next to "Node.js (via nvm) and yarn" (published by devcontainers)
- Click OK
- Press F1 and select the Dev Containers: Rebuild Container.