create-freedom-stack

Freedom Stack

A modern, type-safe web development stack using Astro, TypeScript, HTMX, Alpine.js, and more.

[!TIP] 💡 Turso has a generous free tier for database hosting and management. And, when it's time to scale, use the code FREEDOMSTACK for a discount on paid plans.

Get Started 🚀

1. Create Your Project

You can create a new Freedom Stack project using npm:

# Create a new project
npx create-freedom-stack my-app

# Navigate to the project directory
cd my-app

# Set up your database
npm run db:setup

# Start the development server
npm run dev

Your development server will be running on localhost:4321.

2. Environment Variables

The project will automatically create a .env file with a generated BETTER_AUTH_SECRET. You'll need to set these additional variables:

# Astro DB - LibSQL (required) - Your database
ASTRO_DB_REMOTE_URL=""    # Added by npm run db:setup
ASTRO_DB_APP_TOKEN=""     # Added by npm run db:setup

# Better Auth (required)
BETTER_AUTH_SECRET=""     # Auto-generated during setup
BETTER_AUTH_URL="http://localhost:4321"

3. Have fun!

Create because you love creating. Make development fun again!

What's Included

• 🚀 Astro - The web framework for content-driven websites
• 🎨 TailwindCSS + DaisyUI - Utility-first CSS
• ⚡ HTMX - High power tools for HTML
• 🗄️ Astro DB - Built-in database with type safety
• 🔒 Better Auth - Simple, secure authentication
• 🏃‍♂️ Alpine.js - Lightweight JavaScript framework

Freedom Stack • Full-Stack Starter Kit

An Astro-based full-stack starter kit that feels freeing, and is free. Make development fun again. See the demo site.

I wanted to provide a stack that's powerful like Ruby on Rails ("The One Person Framework"), but with the ease and "vanilla" web dev feel of Astro.

Learning Resources 📚

The Frontend Layer

If you want to learn more about the frontend layer, I recommend the Astro Web Framework Crash Course by freeCodeCamp.

The Interactivity Layer

If you want to learn more about Alpine.js, I recommend Learn Alpine.js on codecourse.

The Database Layer

If you want to learn more about the database layer, I recommend learning from High Performance SQLite course, sponsored by Turso.

The Philosophy Layer

A starter kit like this can save hours, days, or even weeks of development time. However, it's not enough just to have the baseline. You will need to have a philosophy around building a site or web app, so that you can make the most of the tooling and minimize wasting time. I recommend reading Getting Real by 37signals. It's free to read online. (While the book says a few choice words, it's a great, practical resource for building great software.)

Here's What's Included 🔋🔋🔋

Ogres have layers. Onions have layers. Parfaits have layers. And, Freedom Stack has layers!

UI Layer

• Astro - A simple web metaframework.
• Tailwind CSS - For styling.
• Preline UI - Tailwind-based HTML components.
• Daisy UI - For a Bootstrap-like UI CSS component library, built upon Tailwind.
• Lucide Icons - For a beautiful icon library.

Interactivity Layer

• TypeScript - For type safety.
• AlpineJS - For state management and interactivity.
• HTMX - For sending HTML partials/snippets over the wire.

Backend Data Layer

• Astro DB - Astro DB is a fully managed SQL database that is fast, lightweight, and ridiculously easy-to-use.
• Drizzle ORM - Use your database without having to know or worry about SQL syntax.
• Better Auth - For authentication.

Bonus Layer

• A well-prompted .cursorrules file for Cursor's AI IDE to be a friendly guide helping you using this stack easier.

Host Your Project ☁️

Host your site with Netlify in under a minute.

First, you must login to Netlify:

npm run host:login

Then, you can deploy your site with:

npm run host:deploy

[!IMPORTANT] Remember to set the environment variables in Netlify so that it builds successfully.

Learn more about hosting Astro sites on Netlify.

Vision ❤️

I dream of a lightweight, simple web development stack that invokes a fun web experience at the cheapest possible maintainance, backend, and server cost. As close to free as possible.

Core Principles

• Approachable — I want those new to web development to feel comfortable using this stack. Things like database management should feel intuitive. Remove barriers of traditional JavaScript frameworks, such as excessive boilerplate code or intense state management. Go back to the basics of web development. (While this is not vanilla, the dev experience will feel very natural.)
• Flow-able — Use an HTML-first approach, where almost all of the work is done on the DOM layer: styling, structuring, and interactivity. An opinionated stack helps you avoid analysis paralysis of trying to decide what tooling to pick or how to put things together. Instead, spend your thinking time building. This simple stack helps you focus and get in the flow of code faster. Fast setup. Fast building. Fast shipping.
• Pocket-friendly — Using this stack will be financially maintainable to anyone, especially indie hackers and those creating startup sites / web apps.

Showcase 🏆

• faith.tools
• freedom
• Be Still
• kit

Have a project that uses Freedom Stack? Open a PR to add it to the list!

Available Scripts ⚡

Command	Description
npm run dev	Start the development server
npm run dev:host	Start development server accessible from network
npm run build	Build the production site with remote database
npm run preview	Preview the built site locally
npm run format	Format all files using Prettier
npm run packages:update	Update all packages to their latest versions
npm run db:update-schemas	Push database schema changes to remote database

Contributions 🤝

Contributions welcomed. Please open an issue if you'd like to contribute.

Made with contrib.rocks.

License 📜

This project is licensed under the MIT License - see the LICENSE file for details.

Code of Conduct 📜

See the CODE_OF_CONDUCT.md file for details.

Freedom Stack is made with 🕊️ by Cameron Pak, brought to you by faith.tools.