Documentation Overview
Overview of the documentation. Learn how to build accessible, production-ready apps step by step — from setup to deployment.
Get started
Hey indie ! Welcome ʕ•ᴥ•ʔ
Start a local server
In your terminal
Rename
.env.example
to.env
Open
http://localhost:3000
to see your dev mod appTo start preview server run
pnpm preview
commandOpen
http://localhost:8788
to see your preview mod app
File Structure
You may want to define several pages/ directories for what we call a domain-driven file structure (DDD).
- public
- components
- pages
- layouts
- database
- assets
- atoms
- .cursor
- server
- package.json
- wrangler.toml
- .env
- ...others
Config files
All there is to know about how Vike's config files work. Further more, These are key configuration files for your project. Rename them with your app name - same everywhere.
Environment Variables
Environment variables can be defined in .env
and .env.[mode]
files.
Features
Includes database integration, email handling, SEO optimization, error boundaries, customer support tools, payment support, analytics, and magic link authentication.
SEO
Add your root URL (e.g. https://yourdomain.com
) to baseUrl
in vite.config.ts
(located in the root folder). This will automatically generate a sitemap.xml
and robots.txt
during the build process.
Update your content files in the
/database
folder:schemaOrg.ts
,faq.ts
,glossary.ts
,legal.ts
,contact.ts
, etc. Customize them to reflect your business.Add your Google Analytics ID as
PUBLIC_ENV__GOOGLE_ANALYTICS
in your.env
file.Add your site URL as
PUBLIC_ENV__URL
in your.env
file.Create a newsletter in minutes using Beehiiv— with beehiiv page or your subdomain.
Add your RSS feed URL from beehiiv RSS as
PUBLIC_ENV__BEEHIIV_RSS_URL
in your.env
file.
All of the following SEO snippets are already integrated in the boilerplate. Simply reuse them when adding new pages.
Supabase
Copy these SQL queries from the root server/
folder.
- server
- templates
- users_table_setup.sql
- user_tos_acceptance.sql
- user_account_deleted.sql
- email_notifications.sql
- cyclic-coupon-batch.sql
- color_table.sql
- helpers.sql
Sending emails
A transactional email provider like Resend is required to send magic links, password resets, and system notifications. Ensure your provider supports SMTP or API integration.
Create a Resend account.
Navigate to Domains → + Add Domain. Use a subdomain like
resend.yourdomain.com
.Complete DNS verification, then click Verify DNS Records in Resend.
Go to API Keys → + Create API Key, then click Add.
Open your
.env
file and add yourRESEND_API_KEY
to enable email sending with React Email on the contact/support page.In Supabase → Edge Functions → Secret, store the API key
RESEND_API_KEY
.In Supabase → Authentication → Email settings, enable Custom SMTP and configure the following:
Sender details
SMTP Provider Settings
Send emails from a subdomain (e.g.,
resend.domain.com
)Add an SPF record for the subdomain
Add a DKIM record for the subdomain
Add a DMARC record for the subdomain
Include an unsubscribe link at the bottom of each email
Personalize emails using the recipient’s name
Avoid spam-trigger words like "free" or "earn money"
Avoid strange fonts, inconsistent layout, or excessive punctuation
Avoid linking to untrusted or suspicious websites
Payments
Copy these SQL queries from the root server/
folder.
- server
- templates
- stripe.sql
- edge-functions
- handleStripeWebhook.ts
Create a Stripe account and activate payments.
In [Settings] → [Public Details], add your website URL.
In [Settings] → [Branding], add your logo and colors.
Enable payment and refund emails in [Customer Emails].
Optionally enable the customer portal in [Customer Portal].
Under [Rules], enable 3DS and block on CVC failure.
Turn ON Test Mode.
Create a product and copy the price ID into
StripeBtn.tsx
.Add your API key to
.env.local
asSTRIPE_SECRET_KEY
.Add
PUBLIC_ENV__CUSTOMER_PORTAL_LINK
to your.env
file to allow users to manage their subscription and Stripe account via a dedicated portal.Use Stripe CLI:
stripe listen --forward-to localhost:3000/api/webhook/stripe
If using coupons, define them in
server/controllers/stripe.ts
In Supabase, enable Vault and the Stripe Wrapper extension.
Define a new schema and name it : Stripe in your wrapper.
In your Supabase edge function, include
STRIPE_SECRET_KEY
and add the secret.Deploy a new edge functions to handle Stripe webhook, past
handleStripeWebhook.ts
and deploy it.In Supabase editor run
stripe.sql
Magic links
Supabase automatically handles sending magic links when users sign in via email.
In your Supabase dashboard, navigate to Authentication → URL Configuration. Add the following:
https://your-domain.com
to Site URL and:https://your-domain.com/**
andhttp://localhost:3000/**
to Redirect URLs.Set up a custom SMTP server to send branded emails.
Configure email rate limits within your SMTP provider to avoid spam or abuse issues.
Consider using Resend for reliable and scalable transactional emails.
Go to Authentication → Attack Protection, enable Enable Captcha protection and choose Turnstile by Cloudflare.
Customer support
Integrate live chat into your website using Cloudflare without writing any code.
Create a Crisp account .
Go to the Crisp Cloudflare Integration page and click Install the App.
Enter your Crisp Website ID when prompted.
Once installed, the chat widget is automatically embedded across your website, with no code required.
Error handling
Error tracking is already integrated using Sentry and a global event listener. You just need to provide your Sentry credentials to enable reporting.
Fill in the required Sentry environment variables in your
.env
file.The function
sentryBrowserConfig()
is already invoked insentry.browser.config.ts
to initialize Sentry on the frontend.A global
window.addEventListener("error")
logs unhandled exceptions to the console.A custom error page is defined at
/pages/_error/+Page.js
. It’s automatically shown when an error occurs or whenthrow render(abortStatusCode)
is called.Developer tooling is pre-configured with
tsconfig.json
,eslint.config.js
, and.prettierrc
already set up for a clean DX.
Analytics
Paste the tracking Google tag in .env
files.
Security
Keep your a11yStart app secure from common threats — safety first!
Sending limit in Resend
Monthly budget in OpenAI
Rate limiting (Magic links)
Rate limiting (API Routes)
Security Headers
- server
Complete the following security headers according to your needs to improve your app’s security.
Schema Validation
Even in TypeScript, runtime validation matters. Use Zod to protect your API routes from invalid payloads.
Deployment
Build & deploy serverless functions, sites, and full-stack applications.
Workers & Pages
- Go to
Workers & Pages → Create
- Select
Pages
as your deployment target - Choose
Import a Git repository
→ Get Started - Follow the setup steps provided by Cloudflare
- Sync your local
.env
usingpnpm sync:env
in the terminal
Extras
Extra tools and tips
Setup
Learn more about the metadata file convention.
- Add your logo to the
/assets
folder asicon.svg
. - Create a 1200×660 image for social media previews. Name it
previewImage.jpg
and place it in the/assets
folder. - Generate your site favicon using a free favicon generator. Download the ZIP and extract its content into the
/public
folder.
Useful external ressources
Documentation
- Supabase
Realtime database and auth
- Vike
SSR and routing for React
- Stripe
Secure payment integration
- Resend
Email for developers
- Mailo
Private email provider
- Cloudflare
Edge functions, CDN, security
- React
UI library for building interfaces
- TypeScript
Typed JavaScript for better DX
- Mantine
Accessible UI components
- Hono
Tiny web framework for the Edge
- Sightengine
Image content moderation API
- IPQualityScore
Fraud and bot detection
- Sentry
Error monitoring and logging
- Jotai
Minimal atomic state management
Useful Resources
- Mantine UI
Component examples and recipes
- Mantine Hub
Component registry with props visualizer
- Tabler Icons
Open-source icon set
- Favicon Checker
Validate favicon configuration
- OG Validator
Test Open Graph metadata
- Rich Results Test
Validate schema.org data
- SEO Checker
Audit your site's SEO
- PageSpeed Insights
Performance and Core Web Vitals
- Security Headers
Test HTTP headers
Follow updates
Stay in the loop with the latest updates and news 🚀📢