PyCharm and Docker Compose for Django and TypeScript development on Windows 10

Contents

A few days ago I switched my main development machine from a 2017 15″ MacBook Pro with a 4-core 2.9GHz 7820HQ i7, 16GB of RAM and 512GB of SSD to a Lenovo Thinkpad X1 Extreme with a 6-core 8750H i7, 32GB of RAM and 1.5TB of Really Fast SSD.

My reasons for the switch were:

• The fact that my upgrade path with the MacBook would have been much more expensive.
• The disappointing MacBook keyboard; the rest of the machine caused many sparks of joy over the past 1.5 years, but the keyboard managed to make me sad Every Single Time.
• The fact that I like to give my development environment a really good shake-up every few years.

Although the Thinkpad has solid Linux support, I have decided to venture out of my comfort zone to see if I could turn current generation Windows on a top-of-the-line workstation laptop into a productive development environment.

This post deals specifically with the development workflow for one of our main products, a web-app built with Django and React (TypeScript) that is deployed exclusively on Linux servers.

Requirements for the workflow

• Use of first-class IDE, such as PyCharm.
• First-class debugging using the above-mentioned IDE.
• Canonical version of source code remains on the Windows host, can be synced or shared with the Docker container.
• Auto-refresh has to work. When I make a change in the editor, those changes should be reflected automatically upon first reload of the browser.

Overview of the solution

• Docker for Windows and Docker Compose are used to configure and orchestrate the Linux container(s) for running the app and its components.
• The souce code directory on the host is exposed to the running container via bind mount.
• The front-end system is continuously built on the Windows side and exposed to the Docker container via the same bind mount.
• Because Docker for Windows currently does not support inotify on a bind mount, I use an ingenious little tool called docker-windows-volume-watcher which efficiently works around this problem.
• PyCharm has first-class support for both Docker and Docker Compose. I use this for developing and debugging.

Docker setup

I use Docker for Windows to setup and run the Linux containers required for the development of this project.

Ideally, I would have preferred to use the new Linux Containers on Windows (LCOW) functionality, but that’s currently unusable due to a bug resulting in the shutdown of containers taking up to 5 minutes.

Until LCOW is fixed, we make use of the default Moby VM. One of the implications of this is that our app runs as root inside of the container.

Dockerfile configuration

Below is the simplified and redacted Dockerfile for the main app image.

The following aspects are notable:

• The locale -dance shown here is the best way to ensure that the Ubuntu image is configured as UTF-8.
• Setting PYTHONBUFFERED is required if you would like to see the standard output of the Django app in the docker-compose console.
• The pipenv virtual environment is created and all dependencies are installed as part of the image building process.

Docker Compose configuration

Docker Compose enables us to coordinate more than just the image specified up above. Here we show a simplified version with just the app image.

Notable here is that we bind mount the source code directory (which also contains the docker configuration files) into the running container.

The pipenv command will run Django in the default WORKDIR specified in the Dockerfile .

Starting up the system without PyCharm

Start up the docker container, building any images that might be required:

If you’ve made changes to the Dockerfile , invoke with docker-compose up —build .

Any containers specified in the docker compose config are now up and running.

I tend to treat this whole invocation as a single command: I don’t detach with -d , because I prefer to watch the log output just there, and to press Ctrl-C when I want to stop the whole business.

Starting up continuous front-end building

I do all of the frontend transpilation on the Windows side using the usual suspects: Webpack for coordinating everything, Yarn for package management, and TypeScript (and a bit of Babel) for all of the transpilation.

In short, via a package.json script I keep webpack —watch running. As per usual, when any of the watched source files changes, webpack rebuilds the configured bundles.

This is running on the Windows side, so the usual efficient filesystem monitoring tools are used for this.

All of the built assets are exposed to the running docker container using the existing source code bind mount.

Ensuring that Django edits automatically restart the dev server

With the current Docker for Windows (pre-LCOW) setup, bind mounted host files are network shared to the Linux VM on which the docker containers are actually running.

As mentioned previously, one of the drawbacks of this system is that events on the Windows side are not propagated through to the container as filesystem events that can be detected with the efficient inotify system calls on the Linux side.

This Python tool (there are Go versions also) uses efficient filesystem events on the Windows host to detect changed files, and then performs no-op attribute changes on those files within the Linux container to have any inotify clients, such as the Django development server, detect these.

After pip install ing the tool, I use the following invocation on the Windows side:

PyCharm configuration

• In the Docker for Windows General settings, ensure that “Expose daemon on tcp://localhost:2375 without TLS” is checked. PyCharm requires this at the moment.
• In PyCharm, open the source directory on your Windows machine.
• Under Settings | Project | Project Interpreter add an interpreter of type Docker Compose . After configuring and selecting the docker server, you will need to select the correct docker-compose.yml file and the our_product service. After this, PyCharm will do its usual detection and listing of all installed packages.
• Finally create a Run / Debug configuration at the top right of the UI. Here it’s important that you use the “Django Server” template and not the “Docker-compose” like I first did. The latter will work for running, but not debugging.

Conclusions

Once you’ve taken care of all of the above, you should have a fairly usable development workflow for a Django / React web-app.

Working auto-refresh is one of the most important components of iterative development. Here, the combination of building the frontend on the Windows side, and the docker-windows-volume-watcher for relaying backend editing events, was a life saver.

I am looking forward to Docker for Windows LCOW one day working even more smoothly than this setup, and obviating the need for additional moving, although quite clever, parts such as the volume watcher.

Configure an interpreter using Docker Compose

Prerequisites

Make sure that the following prerequisites are met:

You have a stable Internet connection.

Ensure that you have a stable Internet connection, so that PyCharm can download and run busybox:latest . Once you have successfully configured Docker, you can go offline.

Docker is installed. You can install Docker on the various platforms, but here we’ll use the Windows installation.

Note that you might want to repeat this tutorial on different platforms; then use Docker installations for macOS and Linux (Ubuntu, other distributions-related instructions are available as well).

Before you start working with Docker, make sure that the Docker plugin is enabled. The plugin is bundled with PyCharm and is activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings/Preferences dialog Ctrl+Alt+S as described in Manage plugins.

If you are using Docker for Windows, enable the Expose daemon on tcp://localhost:2375 without TLS option in the General section of your Docker settings.

Note that you cannot install any Python packages into Docker-based project interpreters.

Preparing an example

We could have actually repeated the same example as was used for Docker, but for Docker Compose it makes no sense — too simple.

To show a realistic example of a Docker Compose application, we’ll use a Django application with a PostgreSQL database running in a separate container. Get the project from GitHub, and open it in PyCharm ( File | Open ).

For this Django application, we should create two containers: one for a database, and one for the application itself. We’ll use the Docker Compose to link the two containers together.

Adding files for Docker and Docker Compose

In the Project tool window, right-click the project root and choose New | File Alt+Insert , enter the filename (here Dockerfile ) and enter the following code:

Next, repeat the same steps for the docker-compose.yml file and enter the following code:

Let’s look at the docker-compose.yml file. This file defines 2 services: web and db , and links them together.

Configuring Docker

Now that we’ve prepared our example, let’s configure Docker.

To do that, open Settings dialog ( Ctrl+Alt+S or click on the main toolbar) and click the Docker page under the Build, Execution, Deployment node. Click to create a Docker server.

Accept the suggested default values:

For macOS, select Docker for Mac to connect to the Docker daemon.

The Path mappings settings are not available on Linux. So, if you want to map some directories on a virtual machine to some path on your local Linux machine, you will have to do it manually.

Next, apply changes.

Configuring Docker Compose as a remote interpreter

Let’s now define a remote interpreter based on Docker-Compose.

Ensure that you have downloaded and installed Python on your computer.

Open the Add Python Interpreter dialog by either way:

When you’re in the Editor , the most convenient way is to use the Python Interpreter widget in the . Click the widget and select Add Interpreter .

If you are in the Settings/Preferences dialog Ctrl+Alt+S , select Project

| Python Interpreter . Click the icon and select Add .

In the dialog that opens, select the Docker Compose option, from the drop-down lists select the Docker server, Docker Compose service (here web ), configuration file (here docker-compose.yml )and image name (here python ).

Why we’ve chosen web ? This choice is explained by the fact, that after configuring a Docker-Compose-based interpreter, we’ll be able to create regular run configurations that will alter the behavior of the container we selected. Therefore, if we want to debug the code in a container, that’s the one we should select here. All other containers in the compose file will always be started together with this one, but you won’t be able to affect their behavior from PyCharm — they’ll always behave as if you started them with the command docker-compose up from the command line.

Next, wait while PyCharm starts your Docker-Compose configuration to scan and index:

Using the Docker tool window

Since we’ve configured Docker, the Services tool window button appears at the bottom of PyCharm’s main window. Click this button and see your container running:

Configuring database credentials

Modify the DATABASES section of the settings.py file in your Django project to add database configuration details:

Running your application under Docker-Compose

First, as we are executing a Django application, we must run a migration.

To do that, choose Tools | Run ‘manage.py’ task and enter migrate :

Next, create an ordinary Django server run/debug configuration. To do that, from the main menu choose Run | Edit Configurations. ; in the dialog that opens click and select Django Server :

The only thing you should pay attention to, is that Host field must be set to 0.0.0.0 — to make sure that we listen to requests coming from outside the Docker container.

Launch this configuration ( Run | Run ‘RunDjangoApp’ ):

To see output in your web browser, go to http://localhost:8000 (in the address bar, change 0.0.0.0 to localhost ):

If you are using the Docker Machine, use the machine’s IP address instead.

Summary

Let’s summarize what has been done with the help of PyCharm:

We downloaded a Django application from GitHub and opened it.

We added specific Docker Compose files to our project.

We configured a remote interpreter based on Docker Compose.

We ran our Django application in the Docker Compose container.

Configure an interpreter using Docker

Introduction

PyCharm integration with Docker allows you to run your applications in the variously configured development environments deployed in Docker containers.

Prerequisites

Make sure that the following prerequisites are met:

Docker is installed, as described on the page Docker Docs. You can install Docker on the various platforms, but here we’ll use the Windows installation.

Note that you might want to repeat this tutorial on different platforms; then use Docker installations for macOS and Linux (Ubuntu, other distributions-related instructions are available as well).

You have a stable Internet connection.

Ensure that you have a stable Internet connection, so that PyCharm can download and run busybox:latest . Once you have successfully configured Docker, you can go offline.

Before you start working with Docker, make sure that the Docker plugin is enabled. The plugin is bundled with PyCharm and is activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings/Preferences dialog Ctrl+Alt+S as described in Manage plugins.

If you are using Docker for Windows, enable the Expose daemon on tcp://localhost:2375 without TLS option in the General section of your Docker settings.

Also, for Windows, right-click the Docker whale icon, choose Settings from the context menu, and in the General page select the Expose daemon. checkbox:

Note that you cannot install any Python packages into Docker-based project interpreters.

Preparing an example

Create a Python project QuadraticEquation , add the Solver.py file and enter the following code:

Configuring Docker as a remote interpreter

Now that we’ve prepared our example, let’s define a Docker-based remote interpreter.

Ensure that you have downloaded and installed Python on your computer.

Open the Add Python Interpreter dialog by either way:

When you’re in the Editor , the most convenient way is to use the Python Interpreter widget in the Overview of the user interface. Click the widget and select Add Interpreter .

If you are in the Settings/Preferences dialog Ctrl+Alt+S , select Project

| Python Interpreter . Click the icon and select Add .

In the dialog that opens, select the Docker option, from the drop-down lists select the Docker server (if the server is missing, click New. ), and specify the image name.

Python interpreter path should have the default value:

As a result, in the Settings dialog, you should see something like this:

Click OK to apply changes and close the dialog.

Running your application in a Docker container

In the left gutter, next to the main clause, click the button, and choose Run ‘Solver.py’ command. You see that your script runs in the Docker container:

As you can see, the prefix in the Run tool window shows the container ID.

Debugging your application in a Docker container

Next, let’s debug our application. For that, let’s put a breakpoint on the line that calculates d , then click and choose Debug ‘Solver’ .

As you see in the Console tab of the Debug tool window, the debugger runs also in the Docker container:

But now this container has a different id, and hence — different name. You can see it in the Terminal: type the docker ps command and see the container id and name:

It’s important that PyCharm creates a new container, when an application is executed in any way. Whether it’s running, debugging, running with coverage, testing — each execution requires a new container!

Docker tool window

But is it possible to see all the containers without the Terminal? PyCharm says — yes. You can use the Docker tab in the Services tool window as the UI for the Docker command-line client.

If you have configured Docker as a remote interpreter, you will see the Services tool window button at the bottom side of the main PyCharm window. Click this button and see the docker containers:

Let’s look at this tool window more attentively. What do we see here?

First, we are connected to a Docker daemon:

Second, if we open the Run tool window, we’ll see that the Docker prefix corresponds to the container ID in the Properties tab of the Docker tool window:

Third, if we open the Debug tool window, we’ll see that the Docker prefix (another one!) corresponds to the another container ID in the Properties tab of the Docker tool window:

And finally, we see the strange names of the containers — they are human-readable and generated by Docker itself.

Summary

Let’s summarize what has been done with the help of PyCharm:

We created a project and added a Python script.

We configured the remote interpreter.

We ran and debugged our script in the Docker containers.

Finally, we launched the Docker tool window and saw all the details visible in the Terminal.