/future-frontend-sqlite-demo

Future Frontend January 2024 meetup SQLite demo app

Primary LanguageJavaScript

Future Frontend: SQLite Demo

This is the source repository for the SQLite demo app presented at Future Frontend January 2024 meetup.

Backend (Bun)

The app in backend/bun-todo-api directory is an API server implemented with Bun and Stric.

First install dependencies:

bun i

Configure local SQLite:

echo "DATABASE_URL=file:todo.db" > .env

Generate migrations:

bun x drizzle-kit generate:sqlite --out migrations --schema db/schema.ts

Push the migrations to the database:

bun x drizzle-kit push:sqlite

Inspect the database with Drizzle studio:

bun x drizzle-kit studio

Or in the shell:

sqlite3 todo.db

And start the server:

bun run index.ts

The REST API server is now running on http://localhost:3000.

Frontend

The app in 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:

bun i

Start the server:

bun run serve

Open the application in your browser.

Moving your database to Turso

You can import a SQLite database file with the following command:

turso db create --from-file todo.db todo

Run the following to generate configuration to access a remote Turso database:

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:

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 directory an API server implemented with Cloudflare Workers.

Start the server locally:

npm start

To deploy it on Workers platform, you first configure database access credentials.

Update the wrangler.toml with a DATABASE_URL variable:

[vars]
DATABASE_URL = "<YOUR_DATABASE_URL>"

Then configure database access token in .dev.vars:

.dev.vars
DATABASE_AUTH_TOKEN="<YOUR_AUTH_TOKEN>"

and configure it as a secret:

npx wrangler secret put DATABASE_AUTH_TOKEN

Finally, deploy to the Workers platform:

npm run deploy