Quick Start Guide

This guide teaches you how to integrate a Laravel application with dotCMS and use the Universal Visual Editor to manage content rendered in your Laravel application.

Overview

dotCMS integrates with Laravel to support all of dotCMS's features:

• Build pages using the Universal Visual Editor (UVE)

• Edit content directly on your website with real-time previews

• Preview pages before publishing with full-website previews

Prerequisites

• Laravel: PHP 8.1+ and Composer installed

• Node.js: Required for building frontend assets

• dotCMS instance: Either a dotCMS demo instance or your own local instance

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

Step 1: Access the dotCMS Backend and Generate an API Access Token

Before setting up your Laravel application, you'll need to access a dotCMS instance and generate an API Access Token:

Option A: Use the dotCMS Demo Instance

1. Access the dotCMS demo instance:

   • URL: https://demo.dotcms.com/dotAdmin

   • Username: admin@dotcms.com

   • Password: admin

   • Note: The demo instance is reset twice per day

2. Generate an API Access Token:

   • Navigate to Settings > Users

   • Select the Admin User

   • Click the API Access Tokens tab

   • Click the Request New Token button

   • Save this token for use in your application

Option B: Set Up a Local dotCMS Instance

For production use, we recommend setting up your own dotCMS instance. Refer to the dotCMS installation guide at https://dev.dotcms.com/docs/installation

Step 2: Get the dotCMS Laravel Example

Use the official dotCMS Laravel example from our repository:

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 checkout
cd examples/dotcms-laravel

Step 3: Install Dependencies

Install PHP and Node.js dependencies:

composer install
npm install
npm run build

Step 4: 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 in Step 1.

2. Generate the Laravel application key:

php artisan key:generate

Step 5: Run Your Laravel Application Locally

php artisan serve

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

Step 6: Configure the Universal Visual Editor

Now, configure the Universal Visual Editor (UVE) in your dotCMS instance to recognize your local Laravel application:

1. In your dotCMS instance, navigate to Settings > Apps

2. Click on "UVE - Universal Visual Editor"

3. Click the + (plus) button next to your site

4. In the Configuration field, add the following JSON:

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

1. Click Save

2. Navigate to Site > Pages > Home to see your Laravel application integrated with dotCMS!

Step 7: Editing Content in the Universal Visual Editor

Let's edit the "Home" page:

Drag and Drop Content

1. Remove existing content by clicking the 'X' icon

2. Open the content panel on the right

3. Drag content items from the panel onto empty containers on the page

Step 8: View Your Changes in Your Laravel Application

Refresh your Laravel application in the browser to see the changes you made through the Universal Visual Editor.

Congratulations! You're now up and running with dotCMS and Laravel, with the ability to visually edit content through the Universal Visual Editor.

Learn More

• dotCMS Content Types

• dotCMS REST API

• Universal Visual Editor

• Laravel Documentation