Skip to main content

​
Installation

Get started with COSMOS RSC by setting up your development environment and installing the necessary dependencies.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js LTS - COSMOS RSC requires Node.js Long Term Support version
You can verify your Node.js installation by running: 
node --version

​
Install dependencies

After cloning or downloading the COSMOS RSC template, navigate to the project directory and install the required dependencies: 
npm install
This will install all necessary packages including:
  • React 19 (Canary) - The latest React with Server Components support
  • Webpack - Module bundler for building client and server bundles
  • Tailwind CSS - Utility-first CSS framework
  • Express - Web server framework
  • React Server DOM Webpack - React Server Components runtime
COSMOS RSC uses React 19 canary releases to access the latest Server Components features. These are stable for production use in the Server Components context.

​
Project structure

Once installed, your project will have the following structure: 
cosmos-rsc/
├── app/
│   ├── pages/          # Your application pages (file-system routing)
│   │   └── index.js    # Home page
│   ├── components/     # Reusable components
│   ├── actions/        # Server actions
│   └── root-layout.js  # Root layout component
├── core/
│   ├── client/         # Client-side framework code
│   ├── server/         # Server-side framework code
│   └── build/          # Build configuration
├── package.json
└── tailwind.config.js

​
Key directories

  • app/pages/ - Create your pages here. The file structure maps directly to routes (e.g., pages/about.js → /about)
  • app/components/ - Shared components used across your application
  • app/actions/ - Server actions for handling forms and mutations
  • app/root-layout.js - Root layout that wraps all pages
  • core/ - Framework internals (you typically won’t need to modify these)

​
Development server

Start the development server to begin building your application: 
NODE_ENV=development npm start
This command will:
  1. Build your application with webpack
  2. Start the Express server
  3. Serve your application with hot module reloading
Your application will be available at http://localhost:3000 (or the configured port).
The npm start script runs both npm run build and npm run server sequentially. For faster iteration during development, you can run them separately in different terminals.

​
Production build

To build your application for production: 
NODE_ENV=production npm run build
Then start the production server: 
NODE_ENV=production npm run server

​
Next steps

Quick start

Learn how to create your first page with React Server Components

Build docs developers (and LLMs) love

Get started for freeTalk to us