Pixies, part 0: Build an app with Django, React and Docker: Introduction

Why this tutorial?

I assume you are competent enough software developer. Maybe at your work you are involved with building some enterprise-y Java Spring application or, maybe Asp.Net application or something equally boring. Obviously you are not living in vacuum, so you are hearing all those terms Docker, React, Single Page Application, 12 factor methodology and so on. They sound cool but, in part, a little frightening. Your skills seem kind of obsolete. You’d like to catch up but do not know where to start. Even worse, you probably Googled a little bit, maybe tried some tutorials, but often they are like, click here, click there and voila, your super awesome app is done. I bet you understood pretty quickly that these toy applications have very little which the reality and are more a sort of a marketing gimmick

One good way to describe when you know something is when you reach Docker (or React or Haskell) Nirvana. Surely, there is a lot of details about the topic you still don’t know yet, but the thing has already clicked in your brain and you will be able to fish the answer for your concrete question from Google, Stack Overflow or just by looking at the source code. My ultimate goal would be to help you reach that clicked state in at least a few of these topics. Most of my career I spent writing C++, Java and C# code. But this tutorial is mostly about Python and Javascript. So, in a sense, I wrote it for myself.

What are we going to build?

We are going to build a simple, but complete “single page” web application and deploy it live. It will not be super sophisticated but will have all moving parts: frontend and backend, both containerized and deployed separately. We will also use a production grade database (PostgreSQL)

The application is going to be a simple kiosk-style image gallery. It is my belief though, that, for now, it is not that important what kind of application it is. The hard part is to connect different pieces together to achieve an end-to-end result. Later you can drill into concrete topics if you want. Guided by this principle, we are going to ship (deploy live) our app as soon as possible, even if it does not do much initially.

What technologies we will be talking about in the tutorial

We We will try to teach you to fish with these:

  • Webpack

  • React

  • Django

  • DRF

  • Docker

  • Postgres

  • Nginx

  • Heroku

    Do not expect to know everything about these once you complete the tutorial. But you will know enough to be dangerous.

What do I expect from you?

  • You know how to program, so there will be no explanations what the variable and the loop is.
  • You have access to the Internet and either Mac, Windows or Linux box. Interestingly, many tutorials lately assume that you work from the Mac. Don’t get me wrong, Mac is a good computer (I work with one myself) but we are not going to do anything Mac-specific, so Windows or Linux machine should be just fine.
  • You are comfortable with the command line. We will assume that you have a bash-style command line (zsh on the latest Mac OS X is good enough). For Windows, I suggest trying git bash, although it will be pretty straightforward to adapt the commands to cmd or PowerShell.
  • You have some, possibly vague and/or obsolete, idea what Javascript and Python are.

What do I need installed on my machine?

  • Python 3.7 or 3.8
  • npm
  • docker

if typing each of these give you some sane answer, you are pretty much ready to go:

python3 --version
npm --version
docker --version
``

I will not insult your intelligence by providing instructions how to install these. There is plenty of resources available on the Web.

You’ll also need a code editor. I realize this is a matter of personal preference. If you are not settled yet though, I can suggest Visual Studio Code (not to be confused with the Visual Studio). All the software mentioned above is available for Mac, Windows or Linux systems.

Project structure.

In fact, these are going to be two projects, one for the frontend and one for the backend. We will keep this separation of concerns so both parts are as independent one of another as possible. Later, if you want, later you can easily replace React in the frontend with something like Vue or Angular. In the same manner it will be not hard to replace Django backend with Asp.Net Core or Spring Boot backend.

But finish the tutorial first.

You can start with the following:

mkdir pixies
mkdir pixies/frontend
mkdir pixies/backend
tutorial 

See also