A Web App Framework
This is documentation, for me essentially, on how to deploy a web application. It's opinionated and will change over time. Here are the buzz words:
- Progressive Web App (PWA)
- Google Cloud Run (Serverless)
Nextjs make react simple and configurable to set up. Docs are here.
Docs are here
You will want to install the types as dev dependencies:
npm install --save-dev typescript @types/react.
Progressive Web Apps. Docs are here.
The important part is the local
/api redirect for developement.
This redirects all
/api calls to your local backend service.
Docs are here.
You need to create the
I recommend to keep the global
styles.css so you can still bundle classes together.
Support for dark mode is nice.
next-themes provides this out of the box.
tailwind.config.js adds support via the darkmode class:
color-scheme support to your
styles.css. More info on web.dev
Firebase is a useful application framework. It has good support for mobile apps to. The web sdks are nice. The main benefit I see is for authentication.
I'm a big fan of protobuffers and gRPC. It's well defined and simple with a lot of best practises built in. However it's typically not been usefull for any front end work as the internal protocol of gRPC is based on binary HTTP2 with trailing headers that aren't supported in the browser. Although now there are a couple options:
- gRPC Web
- REST Transcoding
My preferred is transcoding. It gives a nice RESTful style api that doesn't feel like a generated API.
Larking is my transcoding project.
It uses the new protobuf apiv2 to
parse the http options, generating the REST bindings.
The best part is that it does this on the fly.
protoc options or dealing with the generated runtime code.
It can do this via server side reflection too, making it a proxy that adapts to the server changes without having to reboot.
Although the most useful case I've had is for the server to run both the gRPC service and the http REST service.
Below is my function that serves on the listener until failure:
Protoc build command:
To keep the frontend in-sync with the backend I use a typescript integration from
One unsolved problem is the generation of calling code.
I don't have autogenerated handlers for calling the API yet.
I like flat layouts. Specially for small projects. I think it greatly simplifies it. Everything is visible, nothing is hidden away in the depths. It's realy not a big deal how things are laid out but it helps to have a structure. Web app projects are tightly integrated between the frontend and backend. The API is used to "decouple" the two, but if you want to change the API you need to ensure both still work. I've found it nice to have the backend/frontend code living close together.
ko is great!
One command deployment to gcloud run:
I've used bazel before and wanted to reuse it in projects.
However, most of the time I find it gets in the way more than anything.
It doesn't play nicely with the localy tools so editors and bazel constantly rebuild your code.
Protoc support works, but I've had it break constantly on multiple upgrades.
Bazel server isn't light either.
I'm working with an older mac that needs all the ram it can get.
So for now I've been happy with
For projects that require
cgo I use
I've then been using bazel for only building the container iamges and deploying them.
This is sub optimal.
So I have a new project
laze is a local tool friendly, build graph exectutor.
It tries to be a simple version of bazel.
Docs for it here.
I'll do a writeup once I get some more core features added.
For the frontend:
Firebase code need to know about the proxy.