Skip to main content

​
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
If you can build it with Next.js, you can power it with Publive CMS.

​
Architecture Overview

​
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

1

Onboarding

Publive engineers provide:
  • Publisher credentials (API keys and secrets)
  • GitHub repository access with target branches
  • Live app URL for production environment
# Credentials provided during onboarding
PUBLISHER_ID=<PUBLISHER_ID>
API_KEY=<API_KEY>
API_SECRET=<API_SECRET>
2

Custom Development

Build your custom website with full ownership of:
  • Code and business logic
  • UI/UX design
  • Application structure
  • Feature implementation
3

Deployment

Push changes to GitHub → CI/CD automatically deploys to your live environment
Full CI/CD documentation available in Deployment Guide
4

Go Live

Your website is accessible via the provided URL and ready to serve traffic

​
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

1

Clone the Repository

git clone <STARTER_REPO_URL>
cd <WORKSPACE_NAME>
npm install
2

Configure Environment

Copy the sample environment file:
cp .env.sample .env
Update .env with your onboarding credentials:
NEXT_PUBLIC_PL_PUBLISHER_ID=<PUBLISHER_ID>
NEXT_PUBLIC_PL_PUBLISHER_API_KEY=<API_KEY>
NEXT_PUBLIC_PL_PUBLISHER_API_SECRET=<API_SECRET>
3

Start Development Server

npm run dev
Your decoupled website is now running at http://localhost:3000
You now have a working decoupled website running locally and connected to Publive CMS!

​
Deploying Changes

​
Development Workflow

1

Create Feature Branch

git checkout -b feature/your-feature-name
2

Make Changes

Develop your features locally and test thoroughly
3

Commit & Push

git add .
git commit -m "feat: your feature description"
git push -u origin feature/your-feature-name
4

Create Pull Request

Open a PR to your target branch (e.g., main or production)
5

Auto-Deploy

Once merged, CI/CD automatically deploys to your live URL
Always test changes locally before pushing to production branches. Merged PRs trigger immediate deployments.

​
Next Steps

Choose a path based on your use case:

Build a News Website

Learn how to build a high-performance news/media website

Build a Brand Website

Create a custom brand website with dynamic sections

​
Support & Resources

API Reference

Complete API documentation for content fetching

SDK Documentation

JavaScript SDK reference and examples

Deployment Guide

CI/CD configuration and deployment best practices

Get Help

Contact our support team for assistance