> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thepublive.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Decoupled Frontend Infrastructure

> Build fully custom websites on top of Publive CMS using a decoupled, scalable architecture

## What is Decoupled Frontend Infrastructure?

Publive's Decoupled Frontend Infrastructure lets you build **your own website** (Next.js, custom UI, custom logic) while using **Publive CMS** solely for content management and publishing.

### Why Use Decoupled Infrastructure

* **Full Control** — Complete ownership over frontend code, UI/UX, and infrastructure
* **No Template Lock-in** — Build custom layouts and branding without shared templates
* **Independent Deployments** — Deploy frontend changes without touching the CMS
* **Optimized Performance** — SSR, Edge rendering, and custom performance optimizations

### Problems This Solves

* **Custom Layouts & Branding**: Design unique experiences tailored to your brand
* **Publisher-Specific Workflows**: Implement workflows that match your editorial process
* **Performance Requirements**: Leverage SSR, Edge computing, or custom caching strategies
* **Independent Scaling**: Scale frontend and CMS independently based on traffic patterns

## What Can You Build?

Decoupled Frontend Infrastructure is ideal for:

* **📰 News & Media** — High-traffic news websites with real-time updates
* **🏷️ Brand Websites** — Marketing and corporate websites with custom designs
* **📖 Editorial Platforms** — Blogs and content-rich publishing platforms

<Info>
  If you can build it with Next.js, you can power it with Publive CMS.
</Info>

## Architecture Overview

```mermaid theme={null}
graph LR
    A[Editor] -->|Publishes| B[Publive CMS]
    B -->|Content API| C[Your Next.js App]
    C -->|Deployed| D[Live Website]
    
    style B fill:#3B82F6
    style C fill:#10B981
```

### Data Flow

1. **Content Creation**: Editors publish content in Publive CMS
2. **API Exposure**: CMS exposes content via REST/GraphQL APIs
3. **Frontend Rendering**: Your Next.js app fetches and renders content
4. **Deployment**: Changes pushed to GitHub trigger automatic deployments

## Publisher Lifecycle

```mermaid theme={null}
graph LR
    A["Onboarding<br/>(Publive Engineer)"] -->|"Publisher ID<br/>API Key & Secret"| B["Custom App Development<br/>(You Own This)"]
    B -->|"Fully Built App"| C["Deployment<br/>(Publive Engineer)"]
    C -->|"Deployed App<br/>DNS Configuration"| D["Live App"]

    style A fill:#3B82F6,color:#fff
    style B fill:#10B981,color:#fff
    style C fill:#6366F1,color:#fff
    style D fill:#F59E0B,color:#fff
```

<Steps>
  <Step title="Onboarding">
    Publive engineers provide:

    * Publisher credentials (API keys and secrets)
    * GitHub repository access with target branches
    * Live app URL for production environment

    ```bash theme={null}
    # Credentials provided during onboarding
    PUBLISHER_ID=<PUBLISHER_ID>
    API_KEY=<API_KEY>
    API_SECRET=<API_SECRET>
    ```
  </Step>

  <Step title="Custom Development">
    Build your custom website with full ownership of:

    * Code and business logic
    * UI/UX design
    * Application structure
    * Feature implementation
  </Step>

  <Step title="Deployment">
    Push changes to GitHub → CI/CD automatically deploys to your live environment

    <Note>
      Full CI/CD documentation available in [Deployment Guide](/dxp/documentation/guides/deployment)
    </Note>
  </Step>

  <Step title="Go Live">
    Your website is accessible via the provided URL and ready to serve traffic
  </Step>
</Steps>

## Starter Kit

### What's Included

* **Next.js Foundation** — Pre-configured Next.js workspace with best practices
* **CMS Integration** — Content Delivery SDK configured and ready to use
* **Basic Fetching** — Sample content fetching patterns and examples
* **Production Ready** — Configured for local development and production deployment

### Prerequisites

Before you begin, ensure you have:

* **Node.js**: LTS version (18.x or higher)
* **Next.js Knowledge**: Basic understanding of React and Next.js
* **Publive Access**: Valid publisher credentials from onboarding
* **Git**: Familiarity with Git workflow

## Quick Start

<Steps>
  <Step title="Clone the Repository">
    ```bash theme={null}
    git clone <STARTER_REPO_URL>
    cd <WORKSPACE_NAME>
    npm install
    ```
  </Step>

  <Step title="Configure Environment">
    Copy the sample environment file:

    ```bash theme={null}
    cp .env.sample .env
    ```

    Update `.env` with your onboarding credentials:

    ```bash theme={null}
    NEXT_PUBLIC_PL_PUBLISHER_ID=<PUBLISHER_ID>
    NEXT_PUBLIC_PL_PUBLISHER_API_KEY=<API_KEY>
    NEXT_PUBLIC_PL_PUBLISHER_API_SECRET=<API_SECRET>
    ```
  </Step>

  <Step title="Start Development Server">
    ```bash theme={null}
    npm run dev
    ```

    Your decoupled website is now running at `http://localhost:3000`
  </Step>
</Steps>

<Check>
  You now have a working decoupled website running locally and connected to Publive CMS!
</Check>

## Deploying Changes

### Development Workflow

<Steps>
  <Step title="Create Feature Branch">
    ```bash theme={null}
    git checkout -b feature/your-feature-name
    ```
  </Step>

  <Step title="Make Changes">
    Develop your features locally and test thoroughly
  </Step>

  <Step title="Commit & Push">
    ```bash theme={null}
    git add .
    git commit -m "feat: your feature description"
    git push -u origin feature/your-feature-name
    ```
  </Step>

  <Step title="Create Pull Request">
    Open a PR to your target branch (e.g., `main` or `production`)
  </Step>

  <Step title="Auto-Deploy">
    Once merged, CI/CD automatically deploys to your live URL
  </Step>
</Steps>

<Warning>
  Always test changes locally before pushing to production branches. Merged PRs trigger immediate deployments.
</Warning>

## Next Steps

Choose a path based on your use case:

<CardGroup cols={2}>
  <Card icon="newspaper" href="/dxp/documentation/guides/decoupled-frontend/build-news-media" title="Build a News Website">
    Learn how to build a high-performance news/media website
  </Card>

  <Card icon="palette" href="/dxp/documentation/guides/decoupled-frontend/build-brand-website" title="Build a Brand Website">
    Create a custom brand website with dynamic sections
  </Card>
</CardGroup>

## Support & Resources

<CardGroup cols={2}>
  <Card icon="book" href="/dxp/api-reference" title="API Reference">
    Complete API documentation for content fetching
  </Card>

  <Card icon="code" title="SDK Documentation" href="/dxp/documentation/sdks/javascript">
    JavaScript SDK reference and examples
  </Card>

  <Card icon="rocket" href="/dxp/documentation/guides/deployment" title="Deployment Guide">
    CI/CD configuration and deployment best practices
  </Card>

  <Card icon="life-ring" href="mailto:support@publive.com" title="Get Help">
    Contact our support team for assistance
  </Card>
</CardGroup>