Dockerizing a WIP Django-React App

As a student at Make School I get to learn a lot of technologies I wouldn’t have at my previous universities. One of these is Docker, which is super exciting because I’ve never even heard of a DevOps class or anything like it at other schools.

Anyway, here’s how I deployed an unfinished Django-React project using Docker.

STEP 1: Dockerfiles for both apps

Although I called it a “Django-React App” in the title, both the Django project and the React project are their own apps and “live in” separate folders — the React project in “frontend”, appropriately, and the Django in “JAMIE” — I did not plan ahead.

The Dockerfile in the root of the Django project (same level as manage.py)

There are line-by-line notes on what the Dockerfile does.

The Dockerfile in the root of the React project (same level as package.json)

Your react project may have to include a “COPY package-lock.json” command as well.

STEP 2: docker-compose.yml

Since my approach was to make these two files into a monolithic project by just keeping them in two folders within one project, I could make a docker-compose.yml outside of the inner projects that would run both to make it easier to develop them.

Here’s my docker-compose.yml (in the root of the project directory):

Like I said, my backend folder was called JAMIE, yours might be backend, just switch out the names.

What is a docker-compose file?

A docker-compose file lets you build services for a monolithic app (or even a simple app — you might have a docker-compose for a vanilla html-css-js app) and run them simply and consistently on multiple development environments.

How do you run a docker-compose file?

You can run docker-compose up to run projects. Many times this didn’t work for me, I had a change in dependencies and had to rebuild the Dockerfiles. You can do this all at once using docker-compose build.