Pixies, part 9: Let's containerize the Backend

Remember when we create a neat compact Docker image for the frontend? Now we are going to do the same thing for the backend. Allowed Hosts Before we start working on the Dockerfile for the backend, we need to take care of one thing. Because we are not going to run the backend app in the Docker in the DEBUG mode, Django will require that the ALLOWED_HOSTS setting is set. This setting is a security measure which prevents certain types of the security attacks. [Read More]

Pixies, part 8: The Rest Service

Django Rest Framework Once we have the data in our backend, we want to expose it to be consumed by our React frontend. Django, per se, is a traditional Web framework, it produces the html files, not json documents. There is this amazing library, called Django Rest Framework (DRF), which allows to easily add the ability to add the Rest API to the Django application. At the moment, DRF is not technically a part of Django and must be installed separately [Read More]

Pixies, part 7: Django Apps

Photos app Django encourages to encapsulate the related things into so called apps. It provides several built-in, like an admin app we’ve already seen. And, of course you create your own. We will create one app called ‘photos’. Create a new directory inside the backend/pixies directory and add an empt file __init__.py which, if Python is not your forte, turns the directory into a module mkdir pixies/photos touch pixies/photos/__init__.py The next step is to declare that this is Django app. [Read More]

Pixies, part 6: Lean Django

The approach Django is a relatively large framework. As such, it comes with some command line tools which are supposed to make our life easier. Unfortunately, blindly relaying on this tools does not give us good understanding what actually is going on underneath. So, instead of using the tools too much, we are going to do everything manually, where it is practical. Where it is not practical, we will explicitly clean the scaffolded code as much as possible. [Read More]

Pixies, part 5: Easy PostgreSQL setup

Why Postgres? As our backend is going to be Django-based, we will need a relational database to store the data. Most Django tutorials assume sqlite which is a simple, one-file database which works just fine for the tutorials. The problem, however, begins when you want to deploy your application to production: because of its limitations, it might not be such a good idea. PostgreSQL (a.k.a. Postgres) is a production grade database, with a widespread use. [Read More]

Pixies, part 4: A Bit of React

ES6 ES6(ECMAScript 6) is the latest standard of the Javascript language. It has much cleaned, modernized syntax. It is less confusing from the people coming from other environments and, generally, a pleasure to work with. There is on problem though If you write your app with ES6, there is no guarantee that it will work on all (especially old) browsers. The community came up with Babel, a javascript “compiler” which takes modern Javascript, like ES6 and produces the classical javascript which should be consumed by all, even old browser. [Read More]

Pixies, part 3: Go Live

Source control Now it is a good time to add everything to the git repository if you haven’t done that yet. Create a .gitignore file which contains the stuff you don’t want to check in. Her’s mine: node_modules build .vscode Now check in your project. You know the drill: git init git add -A git commit -m "initial commit" Heroku In this module we are going to deploy our frontend application so the whole world can admire our doing-nothing application. [Read More]

Pixies, part 2: What you wanted to know about Docker but were afraid to ask

Docker in a nutshell Docker allows you to create self-contained turnkey images which contain everything one needs to run your application. These can be copied, shared, uploaded and deleted, when not needed anymore. When I need to run PostgreSQL or, say, Redis on my box I do not bother anymore installing this software and pollute my hard-drive. I just pull corresponding image and run it on my box. When I don’t need the image anymore I simply delete it and my hard-disk is back to the state it was before. [Read More]

Pixies, part 1: Just Enough Webpack

What is this Webpack thing, anyway? Your typical front-end project is made of a bunch of html, css and javascript files. Also, your javascript code undoubtedly calls into various third party libraries to accomplish its purpose, these, in turn, have their own dependencies and so on. You provide necessary <script> links in your html files, carefully making sure that these are included in the right order, so the dependencies are satisfied. [Read More]

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. [Read More]