Simple Website with Contentstack Launch

This architecture uses Contentstack Launch to manage deployment, hosting, and global delivery, while keeping content and code decoupled. It connects your Git-based application with Contentstack CMS to deliver content-driven experiences efficiently.

Before you begin, ensure the following requirements are met:

• Contentstack account
• Organization Owner or Admin permissions
• A Git provider account (GitHub, GitLab, or Bitbucket)
• Contentstack Launch enabled for your organization
• An application codebase built with a modern framework (for example, Next.js, React, or Vue)
• Access to a Delivery Token and familiarity with Environment Variables (CDA/CPA)
• Access to Contentstack Automate for cache invalidation setup

Click to enlarge

The following steps illustrate how content and code flow through the system during runtime:

1. Request Site: When a user requests the website URL, the request is handled by Contentstack Launch.
2. Fetch Content (CDA/CPA): Launch retrieves content from Contentstack CMS using the Content Delivery API (CDA) for published content and the Content Preview API (CPA) for draft or preview content.
3. Code Push Triggers Build: When developers push code to a Git repository, Launch automatically triggers a build and deploys the updated application.
4. Content Change Webhook: Contentstack Automate listens for publish and unpublish events in the CMS.
5. Cache Invalidation: When content changes occur, Automate triggers cache invalidation in Contentstack Launch to refresh affected pages and ensure the latest content is served.

The architecture is composed of multiple components that work together to manage content, code, infrastructure, and automation. Each layer plays a specific role in delivering a scalable and efficient digital experience.

1. Content Layer (Contentstack CMS)

   The Contentstack CMS manages structured content and provides APIs that developers use to fetch and preview content.

   • Content Modeling: Define your content types or import from prebuilt content models such as Homepage, Blog Post, or Product pages.
   • API Access: Use a Delivery Token to access public content via the Content Delivery API (CDA) for production and the Content Preview API (CPA) for draft content on development or staging.
2. Code Layer (Git)

   The application layer contains your frontend code.

   • Source Control: Store and manage application code in a Git provider such as GitHub, GitLab, or Bitbucket.
   • Environment Configuration: Use environment variables to switch between CDA and CPA endpoints based on the deployment environment (production, development, or staging).
3. Infrastructure Layer (Contentstack Launch)

   Contentstack Launch is the front-end hosting platform that handles build, deployment, and delivery, and replaces your third-party hosting and CI/CD tools.

   • Build Automation: Automatically triggers builds when code changes are pushed to connected Git branches.
   • Framework Support: Supports modern frameworks with SSR (Server-Side Rendering), SSG (Static Site Generation), and ISR (Incremental Static Regeneration).
   • Global Delivery: Deploys applications to edge locations for fast and reliable content delivery.
4. Automation Layer (Contentstack Automate)

   Contentstack Automate ensures content updates are reflected in the delivered experience.

   • Event-Based Triggers: Listens to CMS events such as publish and unpublish actions.
   • Cache Invalidation: Triggers cache invalidation in Contentstack Launch to ensure users see the latest content.

To set up and deploy your website, follow these steps:

1. Connect Source Code to Launch: Create a project in Contentstack Launch and connect your Git repository.
   • Branch Mapping: Map your main branch to the production environment and development or staging branches to a staging environment.
   • Build Configuration: Select your framework from the list, or define the build command (for example, npm run build) and output directory as needed.
2. Configure Environment Variables: Connect your Contentstack Stack to Launch to import the required environment variables.
3. Implement Preview Mode: Use Contentstack Live Preview to view draft and in-progress content. Configure it in your stack, connect it to your Launch Preview URL, and implement preview handling in your application. For more details, see Set Up Live Preview for your Website.
4. Automate Cache Invalidation: Configure Contentstack Automate to listen for CMS events (Publish or Unpublish) and trigger cache invalidation in Launch. For more details, see Automate Connector Launch.
5. Deployment and Validation: Push code changes to your Git repository to trigger a new build and deployment in Contentstack Launch.
   • Code Deployment: Launch detects the change, builds the application, and deploys it to the configured environment.
   • Content Updates: When content is published in the CMS, Contentstack Automate triggers cache invalidation to ensure updated content is served via ISR (Incremental Static Regeneration) or fresh SSR (Server-Side Rendering) requests.
   • Validation: Verify that both code and content updates are reflected correctly in the deployed environment.

• No Infrastructure Overhead: Manage deployment, hosting, and delivery without maintaining servers or managing complex build pipelines.
• Atomic Deployments: Each deployment is independent, allowing safe rollbacks if needed.
• Framework Agnostic: Works consistently across frameworks such as Next.js, Nuxt, and static site generators.