How to use the Universal Visual Editor in development mode

As a developer using dotCMS, you know how crucial it is to integrate your local environment with the Universal Visual Editor (UVE). The challenge has always been getting real-time feedback on localhost while ensuring content authors can access the live site. We’re excited to introduce a new feature that allows you to override the UVE configuration for your development needs, solving this issue.

The Developer's Dilemma: Solved

Previously, pointing the UVE to your localhost for immediate feedback would block content authors from accessing the web app. This created a tension between development speed and content creation workflow. Our new feature eliminates this problem, allowing you to work efficiently without disrupting your team's productivity.

Overriding UVE Configuration: A Two-Step Process

We've developed a secure method for you to overwrite the UVE APP configuration exclusively for your development environment. Here's how it works:

Step 1: Add Your Local Instance to the UVE App Configuration

Introduce a new options property in your app configuration settings:

{

  "config": [

    {

      "pattern": ".*",

      "url": "https://my-webapp.com",

      "options": {

        "allowedDevURLs": ["http://localhost:3000", "http://localhost:4200"]

      }

    }

  ]

}

The allowedDevURLs array acts as a whitelist, ensuring security by restricting which URLs can override the original configuration.

Step 2: Override the Original URL in the UVE

When editing a page in the UVE, simply add a query parameter to the URL: &clientHost=http://localhost:4200

Your full URL will look like this:

http://yourdotcms.cloud/dotAdmin/#/edit-page/content?url=index&language_id=1&device_inode=&com.dotmarketing.persona.id=modes.persona.no.persona&clientHost=http://localhost:4200

This override directs the UVE to your local environment, but only if the URL matches one in the allowedDevURLs list.

Key Benefits

1. Rapid Development Cycle: See your changes in real-time within the UVE.

2. Non-Disruptive Workflow: Content authors can continue working on the live site uninterrupted.

3. Enhanced Security: The whitelist approach prevents unauthorized URL overrides.

4. Seamless Integration: Easily switch between local and production environments.

Best Practices

1. Keep Your Whitelist Updated: Regularly review and update the allowedDevURLs list to ensure it includes all necessary development URLs.

2. Use Unique Ports: Assign unique ports to different projects to avoid conflicts when working on multiple dotCMS projects simultaneously.

3. Clear Communication: Inform your team when you're using a local override to avoid confusion.

4. Regular Testing: Periodically test both local and production URLs to ensure smooth transitions between environments.

Troubleshooting Tips

• If your local environment isn't loading in the UVE, double-check that your URL is included in the allowedDevURLs array.

• Ensure your local server is running before adding the clientHost parameter.

• Clear your browser cache if you're experiencing persistent issues after configuration changes.

Conclusion

This new feature marks a major improvement in the dotCMS development process. It lets developers easily connect their local environments with the Universal Visual Editor, promoting efficiency, collaboration, and productivity. 

We look forward to seeing how this will speed up your projects and enhance teamwork between developers and content authors. We also welcome your feedback and experiences with this feature.