Create docs and diagram of dev/production server communication

[effa]

It would be extremely useful for quick understanding of how it works, because it gets complicated. Some quick notes:

---

There are 3 different settings/modes/environments:

1. local development mode
2. local testing mode
3. staging and production

Local development

• ./manage.py webserver
• runs django-dev-server (port 8000) and webpack-dev-server with hot reloading (port 8080)
• django-dev-server serves: app (index.html), backend api, 3rd parties' static assets
• webpack-dev-server serves: our js modules and assets
• static files: frontend/static/ (collected and built by webpack according to webpack.dev.config.js)
• index template: flocsweb/templates/index.html (uses webpack_loader to point to correct JS bundle)

The fact, that 3rd parties' static assets are server by django-dev-server was just a hack to make it work, because we weren't able to change the port for these 3rd party assets (but there is probably no problem with this approach - hot reloading is only needed for our JS modules).

Local testing

• ./manage.py runserver
• runs django-dev-server (port 8000)
• django-dev-server serves: app (index.html), api and all static files
• static files: frontend/static/ (collected and built by webpack according to webpack.config.js)
• index template: flocsweb/templates/index.html (uses webpack_loader to point to correct JS bundle)

Staging and production

• git push staging|production
• runs nginx server which serves static files directly and app (index.html) and api calls through Django
• static files: ../static/ (collected and built by webpack according to webpack.config.js and then copied by Django`s collectstatic)
• index template: flocsweb/templates/index.html (uses webpack_loader to point to correct JS bundle)

[effa]

Btw, I have found that webpack offers a flexible proxy settings, which could be probably used to avoid the above mentioned hack with serving some static assets by django-dev-server and some by webpack-dev-server (see the examples in their docs).