Hi, my name is Luciana and in this demo I'm going to talk a
little bit about developing Django applications in dev containers.
We're going to use Visual Studio Code and three extensions, the Python
extension, Docker and Remote Containers.
So let's get this started.
So I'm going to start by opening Visual Studio Code, and I already have those
three extensions installed, but if you don't, you can just look for them here on
the Extensions view in Visual Studio Code.
So the Docker extension will give you support for managing
containerized applications.
The Python extension will give you support for Python development, including
editing features such as IntelliSense, syntax highlighting, linting, etc., as
well as debugging and many other things.
And the Remote Containers is the real star of the show today.
This will allow VS Code to run as a server inside the container.
So all your projects, dependencies, runtime, environment, everything
is running in the container itself.
And locally, you just have the UI.
So you get the best of the local experience, but you're
leveraging from this isolated and reproducible environment development.
Development environment, sorry.
Awesome.
So let's get this started.
Once you install the Docker extension, you're going to see this Docker icon
here on the activity bar, and we're more interested in the containers, but it will
give me a list of images and everything.
And for example, if I start one of these containers, suppose you have a
container running on your machine that you would like to attach Visual Studio
Code to, to start your development.
You can do so through the Docker extension and the Remote Containers extension.
So you can right click on the container you want and you can
attach Visual Studio Code to it.
This will open Visual Studio Code in this development
environment, in the container.
Once you do this for first time is going to take some time because it will build
a container for you and everything.
But you can see here that it opened the terminal and I'm
actually in the container itself.
So I have my folders, directories here, and I know that I am in
a container because here on the left hand side it's telling me it.
I can click here and see the features, some of the features
that it allows me to do.
So I can see the configuration file, I can open a folder on a workspace here in
the container and everything like that.
So that's really nice.
But I am going to show how you can containarize an application using
this extension in a very easy way.
So I'm going to do that.
First I'm going to just stop this and I'm going to open a folder.
So I have here this simple Django application that I have here.
We can see views.py, manage.py and everything.
Once I open the Python file, the Python extension will activate.
But in this case, I want to, I want to create a configuration for the container.
So I'm going to do that by first opening the command palette and I am
going to look for the commands from the Remote Containers extension.
Here, the one that I'm looking for is "Add Development
Container Configuration Files".
So once I click here it will ask me how would I like to create this configuration.
Do I want to use an existing Dockerfile or do I want to use predefined container
configuration definitions, which is what I'm going to select for this example.
And we can see here that there are many preset configurations that you can use.
I'm going to look for Python.
And even for Python we have a few options.
In this case, I'm going to just select this one.
And we can see here that Visual Studio Code created this
.devcontainer folder, with two files.
So one of them is Docker file, and this is going to be used to build my container.
And we have the devcontainer.json file, and this is actually going
to be used by Visual Studio Code.
So we have, for example, the path to the Dockerfile, adding a variance to update
the Python version that you want to use.
And it also copied all my settings from Visual Studio Code my local environment
to be replicated in this dev container.
So that's very nice.
And here I can also update this list to tell Visual Studio Code to install
extensions in the container as well.
In this case, we have the Python extension, but if I want to, for example,
add IntelliCode, I can come here to the Extensions view and look for IntelliCode,
which is an extension to provides AI-assisted development features such
as powerful auto-complete, for example.
Auto-completion features.
And I can copy the ID of this extension that is right
here, right next to its name.
And add it here.
Awesome.
So this will make these two extension be installed in that development environment.
Let me enable it.
So now that I have this, all I have to do is to reopen this folder in the container.
So I can open the command pallete again and click on "Reopen in Container".
Or I can also do it from this notification prompt that every time this folder is set,
Visual Studio Code is going to ask us if we want to reopen this in a container.
So that's really nice too.
Awesome.
So we can see here that I am in the dev container environment, I can
reopen this folder locally if I want to, if I want to review it as well.
And in this case, I forgot to uncomment a part of my Dockerfile
that installs the requirements, but because I had already built this
container before I already installed the dependencies for this application.
But if you're doing this on your own, you can just give this instruction so your
dependencies will be installed when the container after the container is built.
Awesome.
So I'm going to start by quickly running this application.
So first I am going to make sure I ran migrations by opening the terminal
and typing "manage.py migrate".
That's fine.
So I'm going to start debugging it here.
I can see that I already have a list of configurations here under the run view
for my debugger, but I can add a new one by clicking "Add configuration".
I'm going to select Python, and here I'm going to select Django, because this
is a list of preset configurations that the Python extension offers for you.
And I can see here that it's disabling the live reload feature from Django so that
the server will reload on every change.
I'm going to remove that because I want this functionality.
And awesome.
So I am going to select this new configuration and run it.
And I have my application running, so I'm going to open it by Ctrl clicking it.
Cool.
So we have here this web page that I can just navigate here.
And what's really nice about all of this is that the debbuger
is running in the container.
So if I, for example, want to see the platform, this is running on.
Once I hit save, the web server is going to reload to apply these changes.
I'm gonna come here.
I'm going to add first a breakpoint.
And once I come here step over, I will see that the platform is Linux.
It's the one that is in the container itself.
So that's nice.
So now that we've seen how to add configuration files to start
a dev container, I'm going to open an application that is
already set up with this folder.
It's a Django and React app.
And It has our own docker-compose files, so I'm going to open it
by clicking File Open Folder.
And here it's going to show me the list of folders that are in the container, but
I can also ask to show the local ones so we can open the one in my local machine.
I'm going to select the folder.
And what's really nice about all of this is that all the changes
that I make while I'm in the remote container are applied locally because
it's all done under a volume mount.
So I don't lose any changes once I make them.
And again, here I said that we have already this folder configured for
the Remote Containers extension.
So here on the devcontainers.json, I'm passing a docker-compose file as well.
And what I see here on docker-compose, I can see that there are two
services, one for the database, and then one for the application itself.
And in our Dockerfile.
It has a few commands to start up the container and
install a few of dependencies.
I am going to uncomment this line so that my requirements are also installed
once I am building this container.
So I'm going to reopen this into container.
Again, I can do it from here, or I can run the command from the command palette.
And once you're doing this for the first time, it may take some time because it
will build up the container, install the dependencies and everything there.
So I'm going to speed this up in the video.
Awesome.
So it opened my application here, I can see that I am in the dev container
environment here on the left hand side.
And I already have some Python files open, so it's going to activate the
Python extension, and I can see that it selected this environment for me.
I can click here and select a different one if I want to, but this is the one
that was used, to install my dependencies.
So I'm going to create a new terminal in VS Code.
I'm going to type "python --version".
And we can see that this is the one that it is linked to, and once I do "pip
freeze" I can see that it installed my dependencies here for me in the container.
Awesome.
So I have here a test file that is for my application, so I can
click here on the test view.
It will show me a list of all the tests that I have on my application.
I can run all of the tests at once or I can also run individual ones.
I can also debug tests and navigate to them through these icons.
And we can see here that all is passing.
So that's nice.
So I am going to make sure there are no migrations to apply and because this is
a React Django application with React frontend I can start a script that we
have here jto start up the frontend.
Awesome.
So I am going to run this application with the debugger.
I can see that I already have a configuration here.
If I want to edit it, I can open the configuration file and I'm
going to remove these arguments.
Because I want to enable all the live reload features.
So whenever I make changes the web server will reload
automatically and I'm going to run.
Let's see how it works.
Awesome.
So I open the application by "Ctrl clicking" on the link and I can make
changes, for example, under views.py.
"Ctrl P" just pulls up the list of files that are in my workspace, so
it is this quick open view in Visual Studio Code and then here I could,
for example, set up a break point when a tweet is going to be created.
So I can say "Hey there".
And we can see that the breakpoint was hit.
Once I step over, I can analyze the values so we can see that for this user
the is_anonymous property is "True".
So this will return True.
And then it will do, perform an update to the value.
And once I over over again, it will show me that it changed
the user to a different one.
So if I hit continue, we can see that it set the user to
Bob to tweet something there.
So in this demo we've seen how you can attach Visual Studio Code to a running
container if you want to, and how we can add dev container configuration files to
an application you wish to containerize.
And how you can open Visual Studio Code in this dev environment so
that you have this isolated and replicable development environment.
We've also seen how you can use the Python extension to debug Django applications
in the container, and you have all the features that you would locally.
So that was it.
You can try all of these out today.
You can get Visual Studio Code and the extensions through the following links.
Try it out, let us know how it goes.
Send us our feedback and your thoughts on how we can improve
this experience for you.
Thank you for watching.
Bye.