Installation Guide

This guide will walk you through installing SaaSKit and setting up your development environment.

Prerequisites

Before you begin, make sure you have the following installed:

• Node.js (v18 or higher)
• pnpm (v8 or higher) - Recommended package manager
• Git - For version control

Installing Node.js

Download and install Node.js from nodejs.org. Verify your installation:

node --version
npm --version

Installing pnpm

Install pnpm globally:

npm install -g pnpm

Or using Homebrew (macOS):

brew install pnpm

Verify installation:

pnpm --version

Installation Steps

1. Clone or Download

If you have the template from a repository:

git clone <repository-url>
cd astro-saas-landing-kit

Or extract the downloaded ZIP file and navigate to the directory.

2. Install Dependencies

Install all project dependencies:

pnpm install

This will install:

• Astro framework
• React and React DOM
• Tailwind CSS
• TypeScript
• All other dependencies

3. Environment Setup

Create a .env file in the root directory (if needed):

# Site Configuration
PUBLIC_SITE_URL=https://yourdomain.com

# Optional: API Keys
PUBLIC_API_KEY=your_api_key_here

4. Start Development Server

Start the development server:

pnpm dev

The site will be available at http://localhost:4321

5. Build for Production

When you’re ready to deploy:

pnpm build

This creates an optimized production build in the dist/ directory.

Verification

After installation, verify everything works:

1. ✅ Development server starts without errors
2. ✅ Site loads at http://localhost:4321
3. ✅ No console errors in the browser
4. ✅ Hot reloading works when you edit files

Common Installation Issues

Issue: pnpm: command not found

Solution: Install pnpm globally or use npm instead:

npm install
npm run dev

Issue: Node version mismatch

Solution: Use a Node version manager like nvm:

nvm install 18
nvm use 18

Issue: Port already in use

Solution: Change the port in astro.config.mjs or kill the process using port 4321.

Next Steps

• Configuration - Configure your project
• Project Structure - Understand the codebase
• First Customization - Make your first changes

Installation complete! You’re ready to start building. 🎉