Integrate Vercel

Welcome to the Magnolia Vercel integration guide. Follow these instructions to enhance your Magnolia instance with Vercel’s powerful capabilities.

Download Light Modules

Once you have your Magnolia instance up and running, you will need to incorporate some specific Light Modules to leverage the full potential of the Vercel integration.

  1. Visit the following URL to access the Light Modules repository:

    https://github.com/magnolia-cms/magnolia-vercel-light-modules

  2. Download the folder spa-lm.

  3. Locate the light-modules directory within your local Magnolia instance.

  4. Copy the downloaded spa-lm folders and paste them directly into your Magnolia light-modules folder.

    The light-modules directory is where Magnolia looks for custom modules, and by placing the spa-lm folders there, you’re integrating new functionality into your Magnolia CMS.

Configure the Vercel Magnolia page

The spa-lm light module contains template definitions that allow you to create a "Vercel Magnolia" page within your Magnolia CMS. To configure this page:

  1. Navigate to the spa-lm/templates/pages/ directory.

  2. Open the basic.yaml file. This file contains the necessary configuration for your "Vercel Magnolia" page.

  3. In the basic.yaml file, where the baseUrl property is defined.

    baseUrl: http://localhost:3000 (1)
    1 The baseUrl property is typically found at the top of the file around Line 4.

  4. The baseUrl is initially set to http://localhost:3000. This should point to the domain where your Vercel application is accessible.

    While you are developing locally, you can leave the baseUrl set to localhost:3000. Once you are ready to deploy and have your Vercel application hosted publicly, you need to update this baseUrl with your public Vercel domain name.

    After setting up the baseUrl, you can proceed to create a "Vercel Magnolia" page in the Magnolia AdminCentral. Your new page will utilize this configuration to connect with your Vercel deployment, enabling a seamless development and testing experience.
Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia Vercel App docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules