dotCMS logodotCMS logo

Laravel

This guide teaches you how to integrate a Laravel application with dotCMS, and then manage its content with the Universal Visual Editor.

Overview

dotCMS integrates with Laravel to support a wide assortment of features. We'll be focusing on:

  • Creating and authenticating a Laravel front end for use with the dotCMS back end

  • Configuring your site to integrate with the Universal Visual Editor (UVE)

  • Editing page layout and content with the UVE

Prerequisites

  • Laravel: PHP 8.1+ and Composer installed

  • Node.js: Required for building front-end assets

  • Basic Knowledge: Familiarity with Laravel fundamentals and REST/API concepts

Step 1: Clone the Laravel Example Application

Use the official dotCMS Laravel sample site to create a local application. You can perform a sparse checkout of the example without cloning the entire dotCMS core repository as follows:

git clone -n --depth=1 --filter=tree:0 https://github.com/dotCMS/dotcms-php-sdk
cd dotcms-php-sdk
git sparse-checkout set $(git sparse-checkout list) --no-cone examples/dotcms-laravel
git pull origin main
cd examples/dotcms-laravel

Step 2: Configure and Run

Generate an API Token

Before setting up your Laravel application, access the demo.dotcms.com instance (or your local instance) and generate an API Access Token for the Admin User:

  • If accessing the dotCMS demo instance:

  • Create an API Access Token: 

    • Navigate to Settings > Users

    • Select the Admin User

    • Click the API Access Tokens tab

    • Click the Request New Token button.

Install Dependencies

Install PHP and Node.js dependencies, and run the Vite client:

composer install
npm install
npm run build

Configure Your Connection to dotCMS

  1. Copy the .env.example file to .env:

cp .env.example .env

  1. Update the .env file with your dotCMS credentials:

DOTCMS_HOST=https://demo.dotcms.com
DOTCMS_API_KEY=your-token-here

  1. Replace your-token-here with the API token you generated at the top of Step 2.

  2. Generate the Laravel application key:

php artisan key:generate

Run Your Laravel Application

Finally, run the following command:

php artisan serve

Ensure both processes — PHP and Vite — are running simultaneously.

Your application will be available at http://localhost:8000

Step 3: Universal Visual Editor

The DotCMS Universal Visual Editor (UVE) provides a seamless editing experience directly on your Laravel website. This editor offers a powerful way to build pages, with features including, but not limited to:

  • In-context editing: Edit content directly on your website

  • Drag-and-drop interface: Easily arrange components on the page

  • Responsive design tools: Preview and edit for different screen sizes

Enabling the Universal Visual Editor

Next, configure the Universal Visual Editor application within your dotCMS instance. This will allow it to recognize the Laravel application and render it in the UVE.

  • In dotCMS, navigate to Settings > Apps and click on “UVE - Universal Visual Editor”

  • Click the plus button at the right of the site we're integrating (i.e., demo.dotcms.com).

  • In the Configuration field, add the following JSON object, which contains the URL for your local Laravel application:

{
  "config": [
    {
      "pattern": ".*",
      "url": "http://localhost:8000"
    }
  ]
}

Click Save.

Now, navigate to Site > Pages > Home to check out the Laravel application integrated with dotCMS!

Editing Content in the Universal Visual Editor

Now, let’s perform a few quick editing exercises on the Home page.

Drag and Drop Content

  • Click on the X icon at the top right of the Explore the World banner

    • This will remove the banner once you Accept the change.

      • You will now see an empty container on the page.

  • In the Content Palette, on the right, browse into the Banner content type by clicking its corner arrow.

  • Drag a new Banner contentlet into the empty box on the page. 

  • The new banner will render and the page will be saved.

Adjust Layout of the Page

  • Click on the Layout tool in the rightmost panel.

  • Drag a Row from the toolbar and drop it below the first existing row.

  • Grab two more Box items and drag them into the new row.

  • Resize them all to be equal widths.

  • Click the Content button in the right panel, and see the four empty containers.

Add Content

  • Let’s fill the new boxes! Click on the Product content type on the Content Palette.

    • If you can't find it, use the search field at the top.

  • Drag some Products into the empty slots.

  • Click the mode dropdown in the top left, and select Preview to see how it looks without UVE controls.

  • Click back to Draft to get back to Edit Mode.

  • Click the blue Publish button on the top right corner of the screen.

Check Your App

Now refresh the browser window that has the Laravel application running (localhost:8000), and you will see the changes you made through the Universal Visual Editor.

Step 4: Whatever You Want!

Your Laravel front end is now fully integrated with dotCMS and its Universal Visual Editor — go hog wild!

Learn More

Previous: AstroNext: Symfony