feat: add dockerfile / envoy proxy with vue.js example

[markdoerr]

Hi @AMontagu, it would be nice, if we could dockerise everything, as you already proposed. And it would be even cooler, if we add an envoy proxy and a tiny vue.js application to the example, just how to demonstrate, how this works. (I would be more than happy - and you have quite some expertise on that ;)

[AMontagu]

https://github.com/socotecio/django-socio-grpc-example/pull/11/files

Here is your example. Going to make a first documentation in Django Socio grpc to explain my step and how I did it

[AMontagu]

Here is the coming doc: https://github.com/socotecio/django-socio-grpc/pull/230

[markdoerr]

This is great news @AMontagu ! your web how-to is very informative (I did not know, that ISTIO directly comes with a gRPC-web proxy, which is great, because I will very soon do the kubernates deployment of LARA and I might save the envoy container). I will test everything as soon as I manage locally - I have some nice plans with the books / bibliography example and vue.js (let's see, if I find the time).

[markdoerr]

btw. I also added an buf generated api folder to the example :) - we are thinking along the same lines (I hope, I did not break anything with the merge). In my case, you can just use buf generate proto in the api folder - it generates python, go and connect-es (which looks very cool from its features). When we are done with the basic example, we could set up the github actions to generate the api (I added a pyproject.toml there, so they are installable as separate package, so the installation of the django app locally will be not required to access the docker container via gRPC, just the api python package)

[markdoerr]

regarding the vue.js frontend in the DSG the example: what do you think about the aesthetics of this bootstrap example: https://www.youtube.com/watch?v=O_9u1P5YjVc ? I could imagine to build something similar with bootstrap5 / vue.js / gRPC-web (frontend) + DSG / django (backend) - just not a book shop, but a nice looking book/magazine library one could search and browse (a shop app would be also cool, but I think there is a lot more logic needed, which obfuscates the purpose of the example)

[AMontagu]

Okay I will look into the api folder see if I can avoid to duplicate it even if I am afraid that to use it simply we need to have it in the folder where node module are or install buf cli globally or mount a docker volume will see what the best.

For bootstrap, I personnaly prefere keeping the example the more agnostic possible. Ideally I should have use vanilla JS instead of Vue but didn't wanted to loose time on it. I also want it to be very simple so it's easily comprehensible.

Now that this is said I created a frontend folder for a reason: allow multiple front example (more advanced, React, Angular, ...) So you can create a new one with an explicit name saying that it's more complete.

In this scenario I would recommend your to use Vuetify instead of Vue-Bootstrap.

[markdoerr]

:) - very good (I also like Vuetify), @AMontagu. I agree with you that the examples should be very reduced to illustrate the core.