Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/penberg/future-frontend-sqlite-demo
Future Frontend January 2024 meetup SQLite demo app
https://github.com/penberg/future-frontend-sqlite-demo
drizzle drizzle-orm edge edge-computing libsql sqlite sqlite3
Last synced: 3 months ago
JSON representation
Future Frontend January 2024 meetup SQLite demo app
- Host: GitHub
- URL: https://github.com/penberg/future-frontend-sqlite-demo
- Owner: penberg
- Created: 2024-01-25T08:38:55.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-28T10:49:12.000Z (11 months ago)
- Last Synced: 2024-02-28T11:48:49.986Z (11 months ago)
- Topics: drizzle, drizzle-orm, edge, edge-computing, libsql, sqlite, sqlite3
- Language: JavaScript
- Homepage:
- Size: 2.02 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Future Frontend: SQLite Demo
This is the source repository for the SQLite demo app presented at [Future Frontend January 2024 meetup](https://meetabit.com/events/future-frontend-january-2024/).
## Backend (Bun)
The app in [backend/bun-todo-api](./backend/bun-todo-api) directory is an API server implemented with Bun and Stric.
First install dependencies:
```console
bun i
```
Configure local SQLite:
```console
echo "DATABASE_URL=file:todo.db" > .env
```
Generate migrations:
```console
bun x drizzle-kit generate:sqlite --out migrations --schema db/schema.ts
```
Push the migrations to the database:
```console
bun x drizzle-kit push:sqlite
```
Inspect the database with Drizzle studio:
```console
bun x drizzle-kit studio
```
Or in the shell:
```console
sqlite3 todo.db
```
And start the server:
```console
bun run index.ts
```
The REST API server is now running on `http://localhost:3000`.
## Frontend
The app in [frontend/react](./frontend/react) directory is the frontend for a Todo app, forked from https://github.com/tastejs/todomvc/tree/master/examples/react
To get started, install dependencies:
```console
bun i
```
Start the server:
```console
bun run serve
```
Open the application in [your browser](http://127.0.0.1:7002).
## Moving your database to Turso
You can import a SQLite database file with the following command:
```console
turso db create --from-file todo.db todo
```
Run the following to generate configuration to access a remote Turso database:
```console
echo "DATABASE_URL=$(turso db show --url todo)" > .env.remote
echo "DATABASE_AUTH_TOKEN=$(turso db tokens create todo)" >> .env.remote
cp .env.remote .env
```
Run the following to access an embedded database with offline sync:
```console
echo "DATABASE_URL=file:local.db" > .env.sync
echo "SYNC_URL=$(turso db show --url todo)" >> .env.sync
echo "DATABASE_AUTH_TOKEN=$(turso db tokens create todo)" >> .env.sync
cp .env.sync .env
``````
## Backend (Cloudflare Workers)
The app in [backend/workers-todo-api](./backend/workers-todo-api) directory an API server implemented with Cloudflare Workers.
Start the server locally:
```console
npm start
```
To deploy it on Workers platform, you first configure database access credentials.
Update the `wrangler.toml` with a `DATABASE_URL` variable:
```console
[vars]
DATABASE_URL = ""
```
Then configure database access token in `.dev.vars`:
```
.dev.vars
DATABASE_AUTH_TOKEN=""
```
and configure it as a secret:
```console
npx wrangler secret put DATABASE_AUTH_TOKEN
```
Finally, deploy to the Workers platform:
```console
npm run deploy
```