Quick Start

npx create-catalyst-app@latest my-app

? Enter the name of your Catalyst application: my-app
? Enter a description: My first Catalyst app
? Enable TypeScript support? (Y/n) Y
? Include Tailwind CSS? (Y/n) n
? Add MCP support? (Y/n) n
? Choose a state management option: None

cd my-app
npm run start

Catalyst development server starting...
✓ Server running at http://localhost:3005
✓ Client bundle built successfully

export default function Home() {
  return (
    <div className="home-page">
      <h1>Welcome to Catalyst</h1>
      <p>Edit this file and save to see hot reload in action!</p>
    </div>
  );
}

export default function Home() {
  return (
    <div className="home-page">
      <h1>My First Catalyst App</h1>
      <p>This is server-side rendered and ready for mobile!</p>
    </div>
  );
}

// Fetch data on the server before rendering
export const serverFetcher = async () => {
  // This runs on the server during SSR
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await response.json();

  return { user };
};

// Component receives the fetched data
export default function Home({ data }) {
  return (
    <div className="home-page">
      <h1>Hello, {data.user.name}!</h1>
      <p>Email: {data.user.email}</p>
      <p>Company: {data.user.company.name}</p>
    </div>
  );
}

export default function About() {
  return (
    <div className="about-page">
      <h1>About</h1>
      <p>This is a universal React app built with Catalyst.</p>
      <ul>
        <li>Server-side rendering</li>
        <li>Hot module replacement</li>
        <li>Automatic code splitting</li>
        <li>Ready for iOS and Android</li>
      </ul>
    </div>
  );
}

import Home from '../pages/Home';
import About from '../pages/About';

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

export default routes;

import { Link } from 'react-router';

export default function Navigation() {
  return (
    <nav style={{ padding: '1rem', background: '#f0f0f0' }}>
      <Link to="/" style={{ marginRight: '1rem' }}>Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

import Navigation from '../../components/Navigation';

export default function Home({ data }) {
  return (
    <>
      <Navigation />
      <div className="home-page">
        <h1>Hello, {data.user.name}!</h1>
        {/* ... rest of your content */}
      </div>
    </>
  );
}

# For Android
npm run buildApp:android

# For iOS (macOS only)
npm run buildApp:ios

my-app/
├── config/
│   └── config.json        # App configuration
├── src/
│   ├── js/
│   │   ├── pages/         # Page components
│   │   ├── components/    # Shared components
│   │   └── routes/        # Route definitions
│   └── static/            # CSS, images, fonts
├── server/
│   ├── document.js        # HTML template
│   └── server.js          # Express server
├── client/
│   └── index.js           # Client entry point
└── package.json

# Development
npm run start              # Start dev server
npm run start:prod         # Start production server

# Building
npm run build              # Build for production
npm run analyze            # Analyze bundle size

# Universal Apps
npm run buildApp:android   # Build Android app
npm run buildApp:ios       # Build iOS app (macOS only)
npm run installApp:android # Install on Android device

npx create-catalyst-app@latest my-app --typescript

export const serverFetcher = async () => {
  const data = await fetchData();
  return { data };
};

import { lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

Home.serverFetcher = async () => ({ listing: await fetchListing() });
Home.clientFetcher = async () => ({ recommendations: await fetchRecommendations() });