Welcome To Svelte App Fast

Run Svelte App Fast

To run your app, open up two terminal windows or tabs. In the first one, run the frontend development server:

In the second terminal, create the pocketbase admin user:

Use your own credentials for the admin user above. Pick an email that you have access to and a secure password that resists brute force attacks. Next, you can serve pocketbase like so:

Svelte App Fast is configured to automatically detect development and produciton environments and will use the local pocketbase default settings out of the box. It is now running. Happy developing!

Configuring Your Environment Variables in .env

To configure your environment variables, create a .env file in your frontend folder. This file is needed to run the application. It contains secrets that are only known to you and nobody else, which is why you need to create it yourself. THere is an example file shipped with Svelte App Fast that has the neeeded variables in it. You can work of the example file and modify it to your needs. The example file is called .example.env

To work off it, copy it and rename it to .env.

In the .env file, you need to configure the following variables:

• To use pocketbase as a superuser on your server, you need to configure these variables with your settings:
  PRIVATE_PB_ADMIN_EMAIL PRIVATE_PB_ADMIN_PASSWORD
• To use stripe payments in your application, you need to configure these variables with your settings:
  PUBLIC_STRIPE_PUBLIC_KEY PRIVATE_STRIPE_SECRET_KEY PRIVATE_STRIPE_WEBHOOK_SECRET
• Finally, to useresend in your application, the following variables are needed:
  PRIVATE_RESEND_API_KEY PRIVATE_RESEND_AUDIENCE_ID

Folder Structure of Svelte App Fast

Application Structure

Our application follows a well-organized structure:

Route Groups

Application routing is organized via route groups. All routes can be found in /src/routes/*. By default, we have the following routing in place:

• / - The main home page
  • /src/routes/+layout.svelte is the layout file for all pages in the application.
  • /src/routes/+page.svelte handles the main home page
  • /src/routes/+page.server.ts handles SEO values for the main home page
  • /src/routes/+error.svelte is the error file for all handling all errors.
  • /src/routes/+layout.ts handles application wide JavaScript code.
• (app) - Core application routes and features
  • +layout.svelte is the layout file for all pages in this route group, it only affects these:
  • /app
  • /dashboard
  • /support
• (auth) - Authentication related routes
  • +layout.svelte handles the authentication layout with:
  • /login
  • /logout
  • /signup
• (docs) - Documentation pages
  • +layout.svelte provides documentation-specific layout for:
  • /docs
  • /docs/[slug]
• (legal) - Legal pages
  • +layout.svelte provides the layout for these routes:
  • /cookie-policy
  • /privacy-policy
  • /terms-of-service

  The content for these pages is markdown and can be found in /src/content/legal It is injected into each route using the /src/routes/+layout.server.ts file of the route group

• (payments) - Payment and subscription routes
  • +layout.svelte handles payment flow layout for:
  • /checkout
  • /billing
  • /plans
• (user) - User profile and settings
  • +layout.svelte provides user settings layout for:
  • /profile
  • /settings
  • /notifications
• /api - API endpoints
  • Server-side API routes:
  • /api/email/add-to-audience
  Adds users to your resend audience.
  • /api/stripe/webhooks
  • /api/stripe/create-checkout-session
  • /api/stripe/create-subscription
  • /api/support
  • /api/users
• humans.txt - Serves a humans.txt file for your project.

  Read more about humans.txt here: https://humanstxt.org/

• llms.txt - Serves a llms.txt file for your project.

  Read more about llms.txt here: https://llmstxt.org/

• robots.txt - Serves a robots.txt file for your project.

  Read more about robots.txt here: https://en.wikipedia.org/wiki/Robots.txt

• sitemap.xml - Serves the sitemap.xml file for your project.

  Read more about sitemap.xml here: https://www.sitemaps.org/protocol.html

Component Library

This application uses components in a modular way. You can find the component library in /src/lib/components/*. Below, the components are explained to you and they are grouped by functionality:

• /src/lib/components/analytics - Analytics tracking components
  • Components for tracking user behavior and analytics:
  • GoogleAnalytics.svelte
    Component for injecting GA code. Only works if it is configured in appConfig .
• /src/lib/components/app - Core application components
  • Essential app-wide components:
  • Explainer.svelte

    the component you are currently reading

  • App.svelte

    the main application component where you will import subcomponents

  • AppNavigation.svelte

    the navigation component for the app. This navigation is separate from landing page navigation and to be used inside your core app.

  • DemoGame.svelte

    Is a memory game just to show how you can quickly drop in a component into App.svelte and change the app that way.

  • NotLoggedInMessage.svelte
    Shows that users are not logged in if they go to the app and do not have a valid authentication token.
• /src/lib/components/auth - Authentication related components
  • Authentication UI components:
  • LoginForm.svelte

    The form for app Logins

  • SignupForm.svelte

    The form for app signups

  • OAuthButton.svelte

    Handles your oAuth logins and signups

• /src/lib/components/common - Shared utility components
  • Reusable utility components:
  • ErrorBoundary.svelte
  • LoadingSpinner.svelte
• /src/lib/components/dashboard - Dashboard specific components
  • Dashboard interface components:
  • DashboardLayout.svelte
  • Sidebar.svelte
• /src/lib/components/ui - The shadcn-svelte components

  SvelteAppFast uses shadcn-svelte components, which are installed in this folder.

Configuring Your Application

You can configure the application in src/lib/appConfig.ts

• Set your brand name:
  

  {
    "brandName": "Your Brand Name"
  }

• Set your domain name (including top level domain):
  

  {
    "domain": "yourdomain.com"
  }

• Configure your hosted domain (where your app will be deployed):
  

  {
    "hostedAt": "https://yourdomain.com"
  }

• Configure Pocketbase endpoints:
  

  {
    "development": {
      "url": "http://127.0.0.1:8090"
    },
    "production": {
      "url": "https://pb.yourdomain.com"
    }
  }

• Set up your SEO defaults:
  

  {
    "defaultSEO": {
      "title": "Your App Title",
      "description": "Your app description",
      "ogImage": "URL to your social media preview image",
      "twitterHandle": "@yourhandle"
    }
  }

• Configure your email settings:
  

  {
    "transactionalEmailFrom": "noreply@yourdomain.com",
    "notificationEmail": "your@email.com",
    "supportEmail": "support@yourdomain.com",
    "usersNeedToVerifyEmail": true
  }

• Set up analytics (Google Analytics and PostHog):
  

  {
    "googleAnalyticsEnabled": true,
    "googleAnalyticsId": "your-ga-id",
    "posthogAnalyticsEnabled": true,
    "posthogAnalyticsId": "your-posthog-id"
  }

• Configure footer and other apps:
  The footerHiddenOn variable hides the footer on the defined routes in the array, because you probably do not want to display your website footer on some of these pages and you can adjust to your own preferences by simply editing the array.

  {
    "showOtherApps": true,
    "otherApps": [
      {
        "name": "App Name",
        "url": "https://app-url.com"
      }
    ],
    "footerHiddenOn": [
      "/app",
      "/dashboard",
      "/login",
      "/signup",
      "/logout",
      "/support",
      "/payment-success",
      "/subscription-success"
    ]
  }

• Configure dark mode settings:
  The setting allows you to configure the dark mode in your application. You can turn dark mode off by setting switchable to false. You can also choose between "toggle" or "dropdown" to have two different styles.

  {
    "darkMode": {
      "switchable": true,
      "kind": "toggle"
    }
  }

• Set your menu breakpoint for responsive design:
  Available break points are "sm" for small, "md" for medium and "lg" for large.

  {
    "menuBreakpoint": "sm"
  }

• Set up your About Me section:
  

  {
    "aboutMe": {
      "sectionText": "Your introduction text here",
      "avatar": "/path/to/avatar.jpg",
      "links": [
        {
          "name": "Platform Name",
          "url": "https://your-url.com",
          "icon": "platform-icon"
        }
      ]
    }
  }

• Configure pricing tiers (if using e-commerce):
  

  {
    "oneTimePurchaseTiers": [
      {
        "id": 1,
        "name": "Tier Name",
        "price": 99,
        "priceId": "stripe-price-id",
        "description": "Tier description",
        "features": [
          "feature1",
          "feature2"
        ]
      }
    ],
    "subscriptionTiers": [
      {
        "name": "Tier Name",
        "price": 9,
        "priceId": "stripe-price-id",
        "features": [
          "feature1",
          "feature2"
        ],
        "highlighted": true
      }
    ]
  }

• Configure dynamic presale prices:
  

  {
    "dynamicPresalePrices": {
      "development": [
        {
          "price": 99,
          "stripePriceId": "stripe-price-id"
        }
      ],
      "production": [
        {
          "price": 99,
          "stripePriceId": "stripe-price-id"
        }
      ]
    }
  }

SEO Configuration

Default SEO Configuration

Svelte App Fast comes with built-in technical SEO optimization features managed through a centralized configuration and dynamic store system. Here's how it works:

The default SEO settings are configured in src/lib/appConfig.ts. You can set your brand's default SEO values:

Dynamic SEO Store

A Svelte store (src/lib/stores/seo.ts) manages dynamic SEO updates. It automatically:

• Appends your brand name to page titles
• Ensures canonical URLs use the correct domain
• Maintains consistent image paths
• Handles Twitter card configurations

Per-Route SEO

Update SEO for specific routes using the +page.server.ts files. The SEO store provides a simple API:

SEO Types

The SEO system supports different content types through the type property:

• website - For general pages
• article - For blog posts or articles
• profile - For user profiles

robots.txt sitemap.xml

The boilerplate includes additional SEO optimizations:

• Configurable robots.txt for search engine crawling control. The file is dynamically generated at src/routes/robots.txt/+server.ts. Routes to disallow can be configured in appConfig.ts.
• Server-side rendering (SSR) for improved indexing is configured out of the box.
• The sitemap is generated at src/routes/sitemap.xml/+server.ts

Stripe Integration

API Keys Configuration

The application comes with built-in Stripe integration for handling payments and subscriptions. Configure your Stripe API keys in your environment file:

You can find your test API keys in the Stripe Dashboard under Developers → API keys.

Available Endpoints

The application provides several Stripe API endpoints under /api/stripe/:

• Create Checkout Session (/api/stripe/create-checkout-session)

  Handles one-time payments using Stripe Checkout. Supports coupon codes and custom success/cancel URLs.

• Create Subscription (/api/stripe/create-subscription)

  Sets up recurring subscriptions with configurable trial periods and metadata.

• Webhooks (/api/stripe/webhooks)

  Handles Stripe events like successful payments, subscription updates, and more.

Webhook Configuration

Testing Payments

For development testing, use Stripe's test cards:

• Success: 4242 4242 4242 4242
• Requires Authentication: 4000 0025 0000 3155
• Declined: 4000 0000 0000 9995
• Any future date for expiry, any 3 digits for CVC

Email Configuration

The application uses Resend for sending transactional emails and managing email audiences. Resend provides both SMTP and API capabilities, making it easy to integrate with Pocketbase's SMTP support.

API Key Configuration

Configure your Resend API keys and audience ID in your environment file:

Sending Transactional Emails

The application provides two ways to send emails:

import { sendEmail } from '$lib/email/sendEmail';

// After a successful payment
await sendEmail(
  'support@yourdomain.com',
  "customer@email.com",
  'Payment Received',
  '<h1>Thank you for your payment!</h1>'
);

# In your Pocketbase admin dashboard:
# like http://localhost:8090/_/#/settings/mail
SMTP server host: smtp.resend.com
PORT: 25, 465, 587, 2465, or 2587
USERNAME: resend
// can be the same as in .env or can be a second api key
PASSWORD: re_your_resend_api_key 

# send a verification request email:
await pb.collection('users').requestVerification('test@example.com');	
# password reset email:
await pb.collection('users').requestPasswordReset('test@example.com');	
# email change email:
await pb.collection('users').requestEmailChange('test@example.com');	

Managing Email Audiences

Add subscribers to your Resend audience using the addToAudience function:

import { addToAudience } from '$lib/email/addToAudience';

// Add a new subscriber
await addToAudience(
  'user@example.com',
  'John',
  'Doe'
);

Integration with Stripe Webhooks

Send transactional emails in response to Stripe events. Here's an example of sending a welcome email after a successful subscription:

// In your webhook handler
if (event.type === 'customer.subscription.created') {
  const customer = event.data.object;
  
  await sendEmail(
    'welcome@yourdomain.com',
    customer.email,
    'Welcome to Premium!',
    '<h1>Welcome to our premium plan!</h1>'
  );
  
  // Optionally add to your newsletter audience
  await addToAudience(
    customer.email,
    customer.name,
    null
  );
}

Analytics Setup

The application supports both Google Analytics and PostHog out of the box. Configure your analytics in $lib/appConfig.ts:

Google Analytics Configuration

Enable and configure Google Analytics:

// In appConfig.ts
export const appConfig: AppConfig = {
  // ... other config
  googleAnalyticsEnabled: true,
  googleAnalyticsId: 'G-XXXXXXXXXX', // Your GA4 Measurement ID
  // ... other config
}

PostHog Configuration

Enable and configure PostHog analytics:

// In appConfig.ts
export const appConfig: AppConfig = {
  // ... other config
  posthogAnalyticsEnabled: true,
  posthogAnalyticsId: 'phc_XXXXXXXXXX', // Your PostHog Project API Key
  // ... other config
}

Favicon & App Icons

The application supports modern favicon and app icon standards for both web and mobile devices. All icons should be placed in the /static directory.

Basic Favicon

Replace the default favicon in /static/favicon.png. This is used as the basic browser tab icon:

• Use a PNG format for best quality
• Recommended size: 32x32 pixels
• Keep the file size small (under 100KB)

Apple Touch Icon

For iOS devices, provide an Apple Touch Icon in /static/apple-touch-icon.png:

• Required size: 180x180 pixels
• No need for rounded corners (iOS adds them automatically)
• Used when users add your site to their home screen

PWA Icons

For Progressive Web App support, provide two sizes of icons in the /static/icons directory:

• logo-192.png

  192x192 pixels, used for app icons on Android

• logo-512.png

  512x512 pixels, used for splash screens and larger displays

Web App Manifest

The /static/manifest.json file configures how your app appears when installed:

{
  "name": "Your App Name",
  "short_name": "App",
  "description": "Your app description",
  "start_url": "/app",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/logo-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/logo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Landing Page Components

SvelteAppFast comes with a comprehensive set of modular landing page components that you can use to build your landing page quickly. These components are located in src/lib/components/landing-page and can be imported into your main home page in the src/routes/+page.svelte file.

Available Components

• Hero.svelte
  ➡️ A hero section with customizable headline, subheadline, and CTA buttons
• Features.svelte / FeaturesNew.svelte
  ➡️ Display your product features in an attractive grid layout
• PainPoints.svelte
  ➡️ Highlight the problems your product solves
• WithWithout.svelte
  ➡️ Compare scenarios with and without your product
• TimeSaved.svelte
  ➡️ Showcase time-saving benefits
• Pricing.svelte
  ➡️ Display your pricing tiers
• FAQ.svelte
  ➡️ Add frequently asked questions
• EmailCollection.svelte
  ➡️ Collect email addresses from interested users, to grow your wait list.
• AsSeenOn.svelte
  ➡️ Display logos of media mentions or partnerships
• DocsCTA.svelte
  ➡️ Call-to-action for documentation

If you can think of a component that you would like to have added, please let me know about it by leaving a feature request.

How to Use Landing Page Components

To use these components in your landing page, import and add them to your src/routes/+page.svelte file. Here's an example:

<script>
  import Hero from '$lib/components/landing-page/Hero.svelte';
  import Features from '$lib/components/landing-page/Features.svelte';
  import Pricing from '$lib/components/landing-page/Pricing.svelte';
  import FAQ from '$lib/components/landing-page/FAQ.svelte';
</script>

<Hero 
  headline="Your Compelling Headline"
  subheadline="A clear value proposition that resonates with your audience"
  ctaText="Get Started"
/>

<Features />

<Pricing />

<FAQ />

Customizing Components

Each component is designed to be easily customizable. You can modify the content, styling, and behavior by passing props or editing the component files directly:

1. Content Customization: Most components accept props for text, images, and other content. Check each component's source code for available props.
2. Styling: Components use Tailwind CSS classes. You can override styles by adding your own classes or modifying the existing ones in the component files.
3. Structure: Feel free to copy and modify any component to match your specific needs. The components are meant to be a starting point, not a constraint.