Running a flask app in a docker containers with VS Code docker extension

Docker is a very popular container platform that lets you easily package, deploy, and consume applications and services. It has gained a lot of traction in the. Recent years. VS Code’s docker extension helps in making a basic Dockerfile along with its corresponding image. The extension also generates other necessary files such as docker-compose.yml, .dockerignore file based on the language selected. The generated files are great to get an initial app in docker up and running in no time.

TLDR

Getting the extension

Code

Creating requirments.txt file

Adding the docker image

Building the image

Creating a container

Testing the app

Lets get started

gif from giphy

Getting the extension

In the VS Code market place search for docker and download the extension choose the one developed by Microsoft. Just like any other extension after downloading it restart your VS Code

extension to be installed

Code

Clone this repository for finished project.

To follow along create a basic flask app with a template to render.

In my app I have a single route ‘/’ which renders hello.html

Creating requirments.txt file

Docker uses the requiments.txt file to download all the necessary libraries for the app to run

Change to the project folder

cd <app folder>

Now create the requirment.txt file

touch requirements.txt

Or Click on create new file icon in VS Code and name it requirements.txt

Add all the dependencies in this file in my case only ‘flask’ will do as I have not used any other library.

content in requiremets.txt

Adding the docker image

Open command pallet with ctrl+shift+p on windows or cmd+shift+p on mac

Type the following command in the command pallet

>docker: add

adding docker image

Choose the language (in this case it is python)

Choose a port for the app to run on. I choose port 5000.

Make sure no other application is running on the specified port an if not an error would be thrown during the execution

The Dockerfile is created

It would look something like this

Along with the Dockerfile 3 other files have been created

• docker-compose.yml
• docker-compose.debug.yml
• .dockerignore

There is no need to edit them for this demo application

Changes to made in the generated Dockerfile

Change the default CMD line to

CMD [“python3”,”<python file with flask server code.>”]

In my case:

CMD[“python3”,”server.py”]

Building the image

Open command pallet and enter the. Following command

>docker: build image

Name your image.

It could be left with the default name too.

The integrated terminal in VS Code will something like this when the image is built.

terminal screenshot after building image

To check if the image is created in the terminal/cmd/integrated VS Code terminal type the following command.

docker image ls

The image created must be visible.

Creating a container

In the command pallet type the following command.

>docker:run

screenshot of the corresponding command

Enter the image name to be used to run the container on.

corresponding screenshot

If you have ran all the commands successfully this is how you terminal will look like terminal.

the container which it created

Testing the app

open a web browser.

Copy the port number found in the -p tag.

-p has the following parameters.

-p <local machine host>:<port in docker container>

this should be url: Localhost:<local machine port>.

In my case the port is 5000

screenshot of browser

congratulations YOU DID IT

Thanks for sticking till the end

Join our community Slack and read our weekly Faun topics ⬇

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author! ⬇