Getting Started

Getting Started with MicroSaaS Template

Customize and extend the template for your specific SaaS product

Your First Customization

Let's make a simple change to see the development workflow in action:

  1. Modify the landing page

    Edit src/templates/landing.index.html and change the hero section text

  2. Save and see changes

    The development server automatically reloads - no need to restart

  3. Build for production 
    npm run build

Project Structure Overview

Key directories and their purpose:

  • client/ React frontend (Vite + TypeScript + Tailwind)
  • src/ Express backend and services
  • src/templates/ Static marketing pages (HTML/HBS) and partials
  • assets/ Private and public assets
  • scripts/ Dev/CI utilities (zip, copy-to-backend, tests)
  • docs/ Developer documentation (not web-accessible)

Customizing Your Template

Changing the Product Name

  • Update client/public/robots.txt and client/public/index.html
  • Modify src/templates/landing.index.html and other marketing pages
  • Update README.md with your product details

Configuring Stripe

  • Set up your Stripe account and create a product/price
  • Update .env with your Stripe keys and price ID
  • Customize checkout flow in client/src/pages/Calculator.tsx

Extending the Template

Adding a New Feature Page

  1. Create src/templates/features/new-feature.hbs
  2. Add navigation link in src/templates/partials/navbar.hbs
  3. Implement frontend components in client/src/components/

Hot-Deploying Changes

Use the copy-to-backend feature to deploy changes to a running server:

npm run ci:copy-templates
# Or interactive mode:
npm run ci:copy

Next Steps