Visual Editor not working on localhost

[rowild]

Describe the Bug

I have installed Directus with the command line instruction presented on the Directus startpage:
npx directus-template-cli@latest init

Setup worked, but when going to the Visual Editor causes an error:
localhost refused to connect

The setup used Directus v11.7.[something], I updated it to 11.9.3. Same behaviour.

Here is a video: https://dl.rowild.at/directus-11-visual-eidtor-not-working.mp4

The link in the address bar takes on a strange format and something is looking at port 3000, which is not active

Reproduced in Firefox and Vivaldi. Chile I use AddBlockers in Chrome (which I turned off), there were none neither in Firefox nor in VIvaldi.

To Reproduce

Just install Directus as per the command line on the Directus start page.

Directus Version

v11.9.3

Hosting Strategy

Self-Hosted (Docker Image)

Database

PostGres

[linear]

CMS-1111 Visual Editor not working on localhost

[rowild]

OK; the problem is that I didn't run the frontend. Which seems to be a requirement to make that Visual Editor work. But – guys! When somebody is new, why should that person know that? All I see is an error and I think "stupid CMS"! Why don't you at least not provide better messages? Like: "Is your frontend app running on localhost:3000 or not?"

You provide such a quick entry:

• a command right on the start page – great! I try that right away, without even reading on!
• everything starts! Success!
• Next day: I start up the docker part of the app – and then I encounter that error.

Don't forget: I am new! I don't even know how to work with these to 2 apps now, because there is no instructions in the readme files! I look around the internet, watch Brain's youtube tutorials – but man, you jump over so many important steps that a newcomer MUST know or must be explained! That is not good for Directus! And myself! And don't say "Read up", because you have no readups nor instructions nor anything similar available for how to handle this double setup (which is great! but it still needs guidance!) and its errors. This takes away sooo much time and destroys the initial feeling of "Wow! Great!" completely! I really don't understand, why you do that! Once installed via that command line from the startpage – how do I handle this setup the next day? After a reboot? When all the automatically started servers are gone? Do I have to start each part o those apps separately or is there a magic command coming along that spins up both servers? No info at all. Nothing. And I searched for many hours! Not just a couple...

[ComfortablyCoding]

Thanks for the feedback! As this is a documentation issue I'll go ahead and move it to the appropriate repo.

[linear]

EDU-423 Visual Editor not working on localhost

[rogrile]

Hah, I am struggling with this right now. What does it even mean to start the frontend?

[AlexGaillard]

Hi @rogrile,

By "start the frontend" we mean that you have to build and run the website you are planning to use using our Visual Editor Frontend Library through the use of data attributes placed onto your website's html elements. This establishes the connection between Directus and your website.

In short, a website that you are intending to use with the Visual Editor will not work out of the box without some effort on the part of the frontend developer. We will work to make this more clear in the future.

The steps are essentially:

• Build your website using the frontend library, adding the applicable data attributes where necessary
• Set up data model in Directus to match the data you wish to display on your website
• Configure the Visual Editor settings (Ie: adding the urls) within Directus to establish the connection
• Run your website frontend and Directus at the same time. You will now be able to edit your website's data using the Visual Editor within Directus and see the changes reflect instantly.

You can see documentation regarding the Visual Editor on our docs page.