Saasfly Documentation

The documentation site is built using Contentlayer and MDX. This allows you to write content in MDX format, which is then transformed and validated by Contentlayer.

Key features include:

• MDX components like <Callout /> and <Card />.
• Support for Table of Contents and custom navigation (prev/next pager).
• Syntax highlighting via shiki and rehype-pretty-code for enhanced code blocks.

To style unstyled HTML content (such as content from a CMS or Markdown files) without disabling Tailwind's base styles, use the @tailwindcss/typography plugin. This plugin provides a prose class that applies beautiful, well-formatted typography to any block of vanilla HTML content.

Apply the prose class to a wrapper element (like <article>) to automatically style headings, paragraphs, lists, and code blocks within it.

<article class="prose">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread
    with cheese to their children...
  </p>
  <p>
    But a recent study shows that the celebrated appetizer may be linked to
    a series of rabies cases springing up around the country.
  </p>
</article>

Alternatively, you can manually clone the repository and install dependencies using Bun.

git clone https://github.com/saasfly/saasfly.git
cd saasfly 
bun install

Alternatively, you can manually clone the repository and install dependencies using Bun.

git clone https://github.com/saasfly/saasfly.git
cd saasfly 
bun install  

Alternatively, you can manually clone the repository and install dependencies using Bun.

git clone https://github.com/saasfly/saasfly.git
cd saasfly
bun install

After installation, set up your environment variables by copying the example file. You must have a PostgreSQL database ready (e.g., Vercel Postgres or a local instance) before running the database push command. Use the POSTGRES_URL key in your .env.local file.

cp .env.example .env.local
# (you must have a database prepared before running this command)
bun db:push

After installation, follow these steps to configure your environment and synchronize your database schema:

1. Copy the example environment file to .env.local.
2. Ensure you have a PostgreSQL database ready (e.g., Vercel Postgres or a local instance).
3. Run the database push command to sync the schema.
4. Start the development server.

cp .env.example .env.local 
# Ensure POSTGRES_URL is set in .env.local before running the next command
bun db:push
bun run dev:web

The recommended way to start a new project with Saasfly is using the bun create command, which scaffolds the boilerplate for you.

bun create saasfly

After installation, follow these steps to set up your environment and start the development server:

1. Set up environment variables: Copy the example environment file to .env.local. Note that you must have a database ready before proceeding.

   cp .env.example .env.local 

2. Push database schema: Use the db:push command to sync your schema.

   bun db:push  

3. Start the development server: Run the web server.

   bun run dev:web

4. Access the app: Open http://localhost:3000 in your browser.

Optional: To view your Tailwind CSS configuration in the browser, run:

bun run tailwind-config-viewer

And visit http://localhost:3333.

The admin dashboard is currently in alpha and provides static pages. To access it:

1. Set the ADMIN_EMAIL environment variable in .env.local to your email (e.g., ADMIN_EMAIL="admin@saasfly.io,root@saasfly.io").
2. Access the dashboard at host:port/admin/dashboard.

The recommended way to start a new project with Saasfly is using the bun create command. This will scaffold a new project using the Saasfly template.

bun create saasfly

To start the development environment, run the dev:web command. The application will be available at http://localhost:3000.

bun run dev:web