Pixies, part 12: Ship It!

Environment values in the browser So we want dynamically specify the api URL in the frontend application running in the container, preferably taken from the environment values. The thing is that the frontend application runs in the browser on the user’s machine. You wouldn’t want (and couldn’t) to hijack the user’s browser to set some environment value there, obviously. So what do we do? Remember, when we made our nginx to listen on the PORT specified with the environment variable - we essentially modified the nginx’s config in the boot. [Read More]

Pixies, part11: Connect the Frontend to the Backend

Where at are we now All right, at this point we have containerized the frontend, the backed and also, for the development purposes, we are using the Postgres container. Sadly, our frontend uses hardcoded data, not the data which the backend is happy to serve us. In this module we are going to fix that. But first, let’s makes sure we have our containers running. In the backend directory do: [Read More]

Pixies, part 10: Serving Static Files

collectstatic Django serves the static files only during the development, i.e. when you run python manage.py runserver. In the production, it is assumed that the static files are being served by something more suitable, like a regular Web server. Having said that, in interest of keeping our backend self-contained, there is a way to serve them by using the package called whitenoise Either way, the first step is to collect the static files from all Django apps we have (remember, our application is made of several Django apps, namely photos, admin and rest_framework). [Read More]

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]