How to write a Blog App

Introduction

Since years I had the idea in my head to write some blogs about different topics like IT, Politics, Economy etc. There are some Blogging software like sand on the beach but for a former developer like me there is no other realistic option than to write an own software for it of course.
And by the way this gives me an opportunity to strengthen my practical skills not just talking about IT-Architecture but doing it practically.
On the other hand it shouldn’t be too stressfull as I have some other things to do as well within my limited times.

Requirements

Whatever the Blog software will look like in some months (I will find out with the time what really matter) there are some basic considerations:

• The blog itself should be able to create with a simple text editor, because that’s what I have typically available on all my business trips
• The syntax of the blog including all the fancy formatations should be easy as possible and there is no need for the last beauty effects
• For the deployment some extra master degree shouldn’t be needed

Design Considerations

There is always a solution to create HTML pages and present them as static content from any simple Web-server. OK, but to write HTML code, really?
No, a better idea is to use some techniques well known from GitHub and Medium: markdown (MD) files.
see e.g. Markdown Guide
This means:

• Create a blog as MD file
• Build some CMS functionality around
• Publish the HTML compiled MD files

Some challenges become visible very early on the way:

• How to handle Metadata for the CMS functionality?
• How to handle relative URL-links e.g. for embedded pictures?
• How to manage testing?

Solution Description

Very roughly I decided to use a Frontend - Backend solution and I selected the tools:

• Frontend: Angular
  I was inspired by a Medium blog: Add a blog to your Angular website using markdown files
  Thanks to: ngx-markdown
• Backend: Flask
  Because the file management is normally very quick and easy in Python

The Architecture for the first Version could be described as:

The ideas behind:

Prepare the MD files (the blogs) with some CMS like metadata, ignored by the MD interpreter
See an example of this blog:

[//]: # (Name: How to write a Blog app with Angular and Flask)
[//]: # (Description: A PoC about the creation of an Angular and Flask based blog software)
[//]: # (Creator: Detlef Winkelvoss)
[//]: # (Date: 23.05.2020)
[//]: # (Update: 23.05.2020)
[//]: # (Tag: Blog)
[//]: # (Tag: CMS)

These metadata will be managed by a REST service provided by the Flask framework.
The Frontend Angular application is using the REST service to create a CMS decorator and publish the MD files via the ngx-markdown NPM module.
Both - the Frontend and the Backend shar the file access for the MD files. They must be located in the assets folder of the Angular app.
In the src folder there are some examples of such MD-files (blogs)

Realization

The code can be found in my GitHub repository: hdwinkel/winkels-blog-app
It is a mono-repo, this means that all code for Frontend and Backend is in the same repository.

Some special considerations for the Flask Backend

The Flask framework allows to been used out of the box. But for security and QoS reasons the framework will be used in a Python server: gunicorn
As for the different environments the location of the assets folder have to be changed dynamically, the python script uses Environment variables, defined in the .env file.
For the Backend build process a Docker environment is recommended, see docker-compose and Dockerfile in the src and backend subfolder.

Some special considerations for the Angular Frontend

The frontend is a simple Angular application (and is in a PoC alpha state).
The tricky part is to manage the complexity with the MD-files located in the assets folder and the decorating CMS metadata.
see src code for the details
There are some considerations to deploy an Angular app in a web-browser and connect them to a backend in a dockerized environment.
This will be part of another blog.