whatgotdone
Architecture
Overview
What Got Done has a simple architecture consisting of the following parts:
- What Got Done Backend: A Go HTTP service that handles all HTTP requests, datastore requests, and user authentication (via UserKit).
- What Got Done Frontend: A Vue2 app that renders pages in the user's browser.
- SQLite: What Got Done's storage provider.
- Litestream: (optional) Syncs What Got Done's SQLite database to cloud storage.
- UserKit: A third-party service that manages What Got Done's user authentication.
Page Rendering Flow
What Got Done uses a somewhat unusual system for rendering pages. The Go backend first pre-renders the page server-side to populate tags related to SEO or social media that need to be set server-side. The Vue2 frontend renders the remainder of the page client-side. To avoid conflicts between the two systems' template syntax, Go uses [[
, ]]
delimiters, while Vue uses {{
, }}
delimiters.
The Go backend handles all of What Got Done's /api/*
routes. These routes are What Got Done's RESTful interface between the frontend and the backend. These routes never send HTML, and instead only send JSON back and forth.
User authentication
What Got Done uses UserKit for user authentication. For user signup, user login, and password reset, What Got Done loads the UserKit UI widgets in JavaScript. On the backend, the auth
package is responsible for translating UserKit auth tokens into What Got Done usernames.
Contributing to What Got Done
Interested in contributing code or bug reports to What Got Done? That's great! Check our Contibutor Guidelines for more details.
QuickStart
To run What Got Done in a Docker container, run
docker-compose up
What Got Done will be running at http://localhost:3001.
Dev-mode authentication uses UserKit dummy mode. You can log in with any username using the password password
.
Development notes
Pre-requisites
- Node.js (18.x or higher)
- Go (1.19 or higher)
- Docker (for E2E tests)
- Google Cloud SDK
- screen
Start hot reloading server
Run the following command to start a What Got Done development server:
./dev-scripts/serve
- Builds the Vue frontend.
- Starts a hot reloading server for the Vue frontend.
- Starts a hot reloading server for the backend.
- The backend server will run on http://localhost:3001.
- The frontend server will run on port http://localhost:8085.
Quirks of the dev environment
Because the production What Got Done server runs both the frontend and the backend on a single port, there are a few hacks to make a development version work:
- CORS is enabled in dev mode so that the frontend can make CORS requests to the backend from a different HTTP port.
- CSRF protection is disabled in dev mode because the Vue dev server doesn't know how to render the
<meta name="csrf-token" />
tag. - Page titles don't work properly in dev mode because the Vue dev server doesn't know how to render the
<title>
tag. - The Content Security Policy header in dev mode needs
unsafe-eval
andunsafe-inline
, whereas we disable this in production.
Optional: Run backend unit tests
Unit tests run in normal Golang fashion:
go test ./...
Optional: Run e2e tests
End-to-end tests run all components together using UserKit dummy mode as authentication:
dev-scripts/run-e2e-tests
Optional: Enable image uploads
What Got Done optionally allows image uploads from users. To enable this:
- Create a Google Cloud Storage bucket
- Choose uniform permissions for the bucket
- Add to the bucket permissions for the
allUsers
user with the role "Storage Object Viewer"
- This makes all images in the bucket world-readable.
- When launching What Got Done, set the environment variable
PUBLIC_GCS_BUCKET
to the name of your GCS bucket.
When users paste images into their What Got Done entries, they will upload to your GCS bucket and auto-link from the entry editor.