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.
-
Visit the following URL to access the Light Modules repository:
-
Download the folder
spa-lm
. -
Locate the
light-modules
directory within your local Magnolia instance. -
Copy the downloaded
spa-lm
folders and paste them directly into your Magnolialight-modules
folder.The
light-modules
directory is where Magnolia looks for custom modules, and by placing thespa-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:
-
Navigate to the
spa-lm/templates/pages/
directory. -
Open the
basic.yaml
file. This file contains the necessary configuration for your "Vercel Magnolia" page. -
In the
basic.yaml
file, where thebaseUrl
property is defined.baseUrl: http://localhost:3000 (1)
1 The baseUrl
property is typically found at the top of the file around Line 4. -
The
baseUrl
is initially set tohttp://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 tolocalhost:3000
. Once you are ready to deploy and have your Vercel application hosted publicly, you need to update thisbaseUrl
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.