The Lo-Fi Stack

The lowest-friction way to create a web app with great user experience and developer experience.

Features

• 🚀 Server-side rendering
• ⚡️ Hot Module Replacement (HMR)
• 📦 Asset bundling and optimization
• 🔄 Data loading and mutations
• 🔒 TypeScript by default
• 🎉 TailwindCSS for styling
• 💾 SQLite + DrizzleORM
• 📖 React Router docs

Getting Started

Installation

Install the dependencies:

npm install

Development

Copy .env.example to .env and provide a DATABASE_URL with your database file path. The default is "./src/database/db.sqlite3", which aligns with the Fly.io deployment configurations.

Start the development server:

npm run dev

Your application will be available at http://localhost:4321.

Building for Production

Create a production build:

npm run build

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience.

Deployment

This template includes deployment configuration for deploying using Bun and LiteFS on Fly.io.

Install flyctl:

# macOS
brew install flyctl

# Linux
curl -L https://fly.io/install.sh | sh

# Windows
pwsh -Command "iwr https://fly.io/install.ps1 -useb | iex"

Create your Fly app:

fly apps create

Attach Consul for LiteFS:

fly consul attach

Deploy your app:

fly deploy

Before using GitHub Actions, you'll need to add an Actions secret named FLY_API_TOKEN. You can get a value for this by running:

fly tokens org <ORG NAME>

---

Built with ❤️ using React Router.