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
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:
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.
What do I need installed on my machine?
- Python 3.7 or 3.8
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.
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