Landing Page & SEO

Overview

The boilerplate includes a high-performance landing page built with TanStack Start. This serves as the marketing site for your Flutter application, optimized for SEO and performance.

You have two options for your landing page:

1. Integrated: Located within the docs/ directory (shares the same domain as your documentation).
2. Standalone: Located in the landing-page/ directory (perfect for a dedicated marketing site).

Customization

Integrated Landing Page

The integrated landing page is built with Fumadocs and TanStack Start.

• File: docs/src/routes/index.tsx
• Components: Found in docs/src/components/landing/

Standalone Landing Page

The standalone version is a clean TanStack Start project.

• File: landing-page/src/routes/index.tsx
• Styles: Tailored with Tailwind CSS 4.0.

Building for Static Hosting

To host your landing page on static services like Cloudflare Pages, GitHub Pages, or Netlify, you need to generate a static build (SSG).

1. Configure Nitro for Prerendering

Update your vite.config.ts (in either docs/ or landing-page/) to enable prerendering. This tells TanStack Start to crawl your routes and generate static HTML files.

// vite.config.ts
import { defineConfig } from 'vite'
import { nitro } from 'nitro/vite'

export default defineConfig({
  plugins: [
    nitro({
      prerender: {
        crawlLinks: true,
        routes: ['/'],
      },
    }),
    // ... other plugins
  ],
})

2. Generate the Build

Run the build command from your project root:

# For Standalone
cd landing-page
bun run build

# For Integrated
cd docs
bun run build

The static files will be generated in the .output/public directory.

Hosting on Cloudflare Pages

Cloudflare Pages is the recommended way to host your static landing page.

Option A: Wrangler CLI (Fastest)

1. Install Wrangler: npm install -g wrangler
2. Login: wrangler login
3. Deploy:

   wrangler pages deploy .output/public --project-name your-project-name

Option B: Git Integration (Continuous Deployment)

1. Go to the Cloudflare Dashboard.
2. Navigate to Workers & Pages > Create application > Pages > Connect to Git.
3. Select your repository.
4. Configure Build Settings:
   • Project Name: your-project-name
   • Production branch: main
   • Framework preset: None
   • Build command: cd landing-page && bun install && bun run build (Adjust path if using docs)
   • Build output directory: landing-page/.output/public
   • Root directory: /

Features

• SEO Optimized: Pre-rendered HTML for better search engine indexing.
• Lightning Fast: Zero-JS initial load options and optimized hydration.
• Responsive: Built-in support for all screen sizes using Tailwind CSS.
• Dark Mode: Seamless transition between light and dark themes.