It is a attempt to find the best way to build fast and scalable web applications, while not beeing afraid of new technologies.
Feel free to ask questions, throw new ideas and propose changes. Any contribution is also welcome, especially some ux/ui redesigns.
Also, a little bit of self-promotion, i am building an application using this stack. Its goal is to take care of files, images, and emails for you. Feel free to give it a try, as it's free :)
- Telemetry
- Markdown
- TESTS!
- Build in gRPC auth
- Comment whole codebase
- Any other feature You will request :)
https://directus-cms.fly.dev | Login: admin@example.com
| Password: d1r3ctu5
- Backend
- Modules - Some people might call them microservices. Splitted into smaller parts, very easy to scale, and allows using any combination of languages and databases.
- Go - Very easy to work with while still having an amazing performance. Out of the box support for gRPC. Recommended to start with.
- Rust - For more complex services use Rust, hard but amazing language. Almost impossible to write code that will not start.
- gRPC - Connection between services using gRPC, which is very fast and gives an option for bi-directional streaming. For Rust using great Tonic create, with first class support of async/await.
- Typesafety - Thanks to protobuf, amazing typesafety across the whole project, no matter the language (not only for TS, hi tRPC).
- Sql Pools and Transactions - Using the best practice for the best performance and error handling.
- Sql Streams - Stream data directly from Sql into the gRPC stream.
- Dockerized - Every service is dockerized. Local build ready with one command.
- Security - In addition to the default GCP auth flow, connections are also secured by an additional layer: bearer token validation. This allows for securing connections between services outside of GCP as well.
- Frontend
- SvelteKit - Once You try it, it's hard to go back to any other framework.
- Typescript - Fully written in typescript with the strict rules enforced. No any or unknown in code.
- Form actions - Forms are handled by server, which force You to seperate view and logic. This is a great pattern and makes the logic unaccesible by the browser.
- Zod validation - Every data if validated. Errors are returned and used by client to view them on forms.
- Streaming - Important data is loaded and rendered first, after that all the rest are returned as promises and rendered when they resolve.
- PWA with service workers - Turn off the internet and check how resiliant the app is.
- Firebase SSR Authentication - Battle-tested OAuth, Magic Link, Phone Number. And by doint it on Svelte server, it's much more secure.
- TailwindCSS - Used for styling, no other UI library needed.
- Minimal external libraries - With Svelte animation and stores out of the box the dependency list is very small.
- Deployment
- Github Action - Ready to use github actions for deployment, each service is linted and checked. Possible to deploy all services or a single one.
- Google Cloud Platform - Easy to deploy, easy to scale, easy to maintain, and still cheap.
- Google Cloud Run - Thanks to dockerized application, it's very easy to deploy. Scaling done automatically, can set the min. instances to 1 to reduce cold start.
- Google Cloud Storage - Working files upload, download and delete.
- Google PubSub - Asynchronus data sending.
- Additional features
- Stripe - Fully working subscription flow.
- HeadlessCMS - Headless cms via Directus.
- WYSIWYG - Wyswig text editor thanks to TipTap.
- Client setup
cp client/.env.example client/.env
npm i --prefix client
- Run proto generation
Be sure to have
protoc
,protoc-gen-go
andprotoc-gen-go-grpc
libs installed.
sh proto.sh
- Fill in missing firebase secrets in
client/.env
- STRIPE_API_KEY
- PUBLIC_API_KEY
- PUBLIC_AUTH_DOMAIN
- SERVICE_ACCOUNT
Getting the SERVICE_ACCOUNT
key is a bit tricky.
- Start databases:
sh start.sh db
- Start app:
sh start.sh app up --build
- Access:
Application - http://localhost:3000
CMS - http://localhost:8055 | Login: admin@example.com
| Password: d1r3ctu5
-
Go through each
deploy-***.yml
and changeenv
acording to Your project. -
Add secrets to github
- GCP_CREDENTIALS
- POSTGRES_DATABASE_URL
- STRIPE_API_KEY
- SENDGRID_API_KEY
- PUBLIC_API_KEY
- PUBLIC_AUTH_DOMAIN
- SERVICE_ACCOUNT
- Add proper IAM permissions
Bonus: Three ways to shows notes. Not implemented in application, but all the code is there to try it.
This project shows how flexible the gRPC + SvelteKit setup is, using the newest SvelteKit streamed
feature. There are three ways to display notes:
svelte server
callsnotes service
->notes service
selects all notes -> for each note it callsusers service
for user -> the note with the user is returned as streamsvelte server
callsnotes service
->notes service
selects all notes and return them -> for each notesvelte server
callsusers service
for user -> not waiting for users to resolve, he dispaly the notes, and after that await users asstreamed
datasvelte server
callsnotes service
->notes service
selects all notes and return them -> for each notesvelte server
add userId to set -> then, in one request he callsusers service
for all users -> not waiting for users to resolve, he displays notes and after that await users asstreamed
data