STCMS Documentation

Complete guide to building modern, secure React/PHP applications with STCMS framework

Get Started Learn Architecture

How To Use STCMS

Complete guide to building with STCMS - Hybrid PHP/React CMS

Table of Contents

1 Installation & Setup

Quick Start

1

Install STCMS

Terminal 
composer require gemvc/stcms
Tip: Requires Composer installed on your system.
2

Initialize Project

Terminal 
php vendor/bin/stcms init
Tip: Creates project structure and config files.
3

Install Frontend

Terminal 
npm install
Tip: Requires Node.js installed.
4

Build Assets

Terminal 
npm run build
Tip: Compiles React and Tailwind CSS.
5

Start Server

Terminal 
php -S localhost:8000 -t public
Tip: Open http://localhost:8000 in browser.

What You Get

Symfony Cache Modern caching (APCu/file)
Symfony Dotenv Environment management
Guzzle HTTP API integration
Twig Templates Server-side rendering
Vite Build React bundling
Security Headers Apache configuration

2 Project Structure

Directory Layout

Project Structure 
project-root/
├── assets/
│   ├── js/
│   │   ├── app.jsx           # Main React entry
│   │   ├── registry.js       # Component registry
│   │   └── components/       # React components
│   └── css/                  # Styles
├── pages/
│   ├── en/                   # English pages
│   │   └── index.twig        # Homepage
│   └── de/                   # German pages
├── templates/
│   └── default.twig          # Base layout
├── components/               # Twig components
├── public/
│   ├── index.php             # Entry point
│   └── assets/build/         # Built assets
├── .env                      # Environment config
└── vendor/                   # Dependencies
info: Pages are auto-routed based on file path. /en/about maps to pages/en/about.twig

3 Creating Pages

Basic Page Example

pages/en/about.twig 
{% extends "default.twig" %}

{% block title %}About Us{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold mb-6">About Our Company</h1>
    
    <div class="prose lg:prose-xl">
        <p>This is our about page content...</p>
    </div>
    
    <!-- React component mount point -->
    <div id="team-members-root"></div>
</div>
{% endblock %}

Page Best Practices

Extend Layout Always extend default.twig for consistent layout
Tailwind CSS Use utility classes for styling
React Mount Points Add unique IDs for interactive components
Content Focus Keep pages focused on content, not logic
Descriptive Names Use clear file names like contact.twig

4 Creating Templates

Base Layout Template

templates/default.twig 
<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
    <title>{% block title %}STCMS{% endblock %}</title>
    <link rel="stylesheet" href="/assets/build/app.css">
</head>
<body>
    {% include "navbar.twig" %}
    
    <main>
        {% block content %}{% endblock %}
    </main>
    
    {% include "footer.twig" %}
    <script src="/assets/build/app.js"></script>
</body>
</html>
Tip: Create reusable components in the /components folder using Twig macros.

5 React Components

Creating a Component

assets/js/components/Hello.jsx 
import React from 'react';

export default function Hello({ name }) {
    return (
        <div className="p-4 bg-blue-100 rounded">
            <h2>Hello, {name}!</h2>
        </div>
    );
}

Registering Component

assets/js/registry.js 
import Hello from './components/Hello';

export const registry = {
    'hello-root': {
        component: Hello,
        getProps: (el) => ({
            name: el.dataset.name || 'World'
        }),
    },
};
info: Use data-* attributes in HTML to pass props to React components.

6 Multi-Language Support

Auto-Detection

Languages are automatically detected from your pages/ folder structure:

Folder Structure 
pages/
├── en/           # English (auto-detected)
│   ├── index.twig
│   └── about.twig
├── de/           # German (auto-detected)
│   ├── index.twig
│   └── about.twig
└── fa/           # Persian (auto-detected)
    └── index.twig
Tip: Set DEFAULT_LANGUAGE=en in your .env file to set the default language.

You're Ready!

You now have all the knowledge to build amazing applications with STCMS!

Learn API Integration React Deep Dive