The landing page

We’ve got some landing page complexity, since we’re using the same codebase for three websites: https://b2bsaaskit.com, https://PromptsWithFriends.com, and the instructons on https://localhost:3000.

To replace all this with a single landing page:

• rm src/assets/free.svg src/assets/b2b7.svg
• rm src/components/landing/Prod.astro src/components/landing/B2B.astro src/components/landing/Dev.astro
• Replace src/pages/index.astro with:

---
import Layout from '../layouts/Layout.astro';

export const prerender = true;
---

<Layout title="Landing">
	<main class="container mx-auto my-8">
		<h1 class="text-4xl">Landing!</h1>
	</main>
</Layout>

Favicon

• Replace public/favicon.ico with your .ico file
• In src/layouts/Layout.astro, update <link rel="icon" type="image/svg+xml" href={pwf} /> with your .ico file

Faq page

• rm src/pages/faq.astro src/components/landing/faq.astro

Setup and Eject pages

• rm -r src/pages/setup src/pages/eject
• rm -r src/content/

Demos

• rm -r src/pages/demo
• rm -r src/pages/survey src/lib/trpc/routers/surveys.ts src/components/survey/Survey.tsx

TODO

These days, it’s pretty hard to imagine working on a project without Prettier! That said, if you’re not a fan, you can get rid of it in a few pretty simple steps:

• Open package.json, change the “fix” script to “yarn lint:fix,”, remove the “fmt” script
• In the terminal, run rm .prettierrc .github/workflows/prettier.yml
• In the terminal, run yarn remove prettier prettier-plugin-tailwindcss (you can’t remove prettier-plugin-astro because it’s a dependency of Astro)

If you don’t like Tailwind CSS, you can get rid of it in a few simple steps:

• Remove the line import '../styles/tailwind.css'; from src/layouts/Layout.astro
• In the terminal, run rm src/styles/tailwind.css tailwind.config.cjs
• In the terminal, run yarn remove tailwindcss @tailwindcss/typography prettier-plugin-tailwindcss

Keep in mind that you don’t have to remove Tailwind completely if you want to get rid of it just for particular pages. One approach we recommend is just to have two different layouts one with Tailwind and one without it. You can read more about advanced Tailwind configurations in this article.

While it’s technically possible to replace Astro with other meta-frameworks, we have no plans of offering alternatives to Astro as an option in this toolkit.

If your team is HTML-first, anti-JavaScript, take a look at the /setup and /eject pages that ship with almost no JavaScript and work with JavaScript disabled.

If your team is experienced with SPA apps like CRA or Vite, take a look at the /survey page - it has no SSR, no hassle with hydration, and no server bills.

If your team is experienced with SSR frameworks, Astro makes it easy to deliver modern SSR application development with client-side routing, data fetching, and more - this is what we have on the /app page.

If you must go with server components, Astro server components cover quite a bit of what’s possible in RSCs today, and the Astro team is on track to increase support in the near future.

If you end up porting this template to another meta-framework, please let us know!

React is a proven and battle-tested UI library with access to a huge ecosystem of tools and libraries - thanks to React, we have tools like react-router, react-query, and many others!

However, since the B2B SaaS Kit uses Astro, it’s possible to use multiple UI frameworks at the same time.

In practice, we recommend sticking to no more than a couple of frameworks, at most one per page. For example, your marketing page can be built with Svelte or SolidJS for fast load times, while your core application can be built with React for optimal development velocity.

TODO

TODO

TODO

TODO

It’s straightforward to remove Doppler from your project:

• Download secrets doppler secrets download --format env --no-file > .env.local or manually fill in .env.local with your secrets
• Open package.json, change the “full:check” script to “yarn fix && yarn ci:check”
• Set production secrets in your hosting provider

We use Supabase just as a database, so it’s fairly easy to replace it with something else. We chose Supabase because of the combination of stability, ease of use, and price.

It’s easiest to replace Supabase with another cloud Postgres database:

• Change DATABASE_URL to a new URL provided by your database provider (this could be a local instance of Postgres)
• Remove RLS-specific code from migrations:

- ALTER TABLE your_table_name ENABLE ROW LEVEL SECURITY;
- CREATE POLICY "service" ON "public"."prompt_likes" AS PERMISSIVE FOR ALL TO your_table_name USING (true);

If you’d like to use a different database that is supported by Drizzle ORM - like PostgreSQL, MySQL, SQLite, including local and services - change src/db/schema.ts and src/db/db.ts according to documentation.

To completely remove the database, see the bottom of the “Replacing Drizzle ORM” section.

We chose PropelAuth because it’s basically the only service focused on solving authentication for B2B SaaS companies.

We have a lot of files depending on PropelAuth, so removing it is not easy if you want to reuse our code.

High-level steps:

• Remove dependencies with yarn remove @propelauth/base-elements @propelauth/node @propelauth/react
• Remove PropelAuth-specific files, like rm src/components/propelauth.ts src/lib/propelauth.ts
• Remove PropelAuth-specific environment variables from src/t3-env.ts
• And replace it with something else

The two main benefits of Vercel is that it’s free to start and its industry-leading DX in terms of deployment ease and deployment speed. However, costs could scale unfavorably as your project grows, which might lead you to consider alternatives. B2B SaaS Kit doesn’t rely on any Vercel-specific services, so switching from Vercel is as easy as changing an Astro adapter.

To remove the Vercel adapter, follow these steps:

• yarn remove @astrojs/vercel
• Edit astro.config.mjs and remove two lines of code:

import react from '@astrojs/react';
- import vercel from '@astrojs/vercel';
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
	integrations: [react()],
-	adapter: vercel(),
	// eslint-disable-next-line no-undef
	site: process.env.SITE_URL,

NOTE that you can use regular Astro without SSR adapters (once you remove the adapter: vercel({}), line). This can be a good option if you already have your own backend, but the Kit has some routes that will only work in SSR so you'll have to remove those yourself.

Instead, you can add another Astro SSR adapter from the ones available on https://docs.astro.build/en/guides/server-side-rendering/#adding-an-adapter.

Be careful when switching to non-Node.js runtimes, like Deno Deploy or Cloudflare Workers: since we do not test against other adapters, some of our dependencies may not work.

TODO

TODO

TODO