VS Code Live Server not working

Hi Trying to use VS Code Live Server, I’ve installed the extension. In the address bar I’ve entered: http://127.0.0.1:5500/plainkit-master/site/templates/oil-paintings/
I receive:
Cannot GET /plainkit-master/site/templates/oil-paintings/

In XAMPP http://localhost/plainkit-master/oil-paintings/ works fine.

What am i doing wrong?
Thanks for any help

The URLs after “plainkit-master” are different.
Delete the difference in the first URL

No change - I tried

http://127.0.0.1:5500/plainkit-master/oil-paintings/

and get: Cannot GET /plainkit-master/oil-paintings/

The path I used in the original url was the actual path structure.

What exactly have you installed? Keep in mind that you need either the Firefox or Chrome browser extensions to make this plugin (if that’s the one you mean) work with dynamic sites. You also need to run a local server.

Hi,

I think the problem is the page is composed of alot of modules - templates, snippets ect. so making changes in any of these changes the browser preview - and I’m not clear what the url should be. As I said in xampp the url is: http://localhost/plainkit-master/oil-paintings/ which transforms to http://localhost/plainkit-master/oil-paintings/oil-miniture-1

but the actual path is: plainkit-master\site\templaites\oil-paintings

I’m trying both in vsCode and Atom but so far no luck in bringing up a preview as I edit.

All examples use index.html, but in Kirby I don’t have an index.html, so how do I see a browser preview.

Thanks for any help

As I said, you need an additional browser extension to make the plugin work with PHP.

As a first step I would store a file test.php in the docroot of your new server and that file would look like

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test page with PHP</title>
  </head>
  <body>
    <h1>Test page with PHP</h1>
    <p>In the next line you should read the date and time and not <code>""</code>:</p>
    <p>This page is called at "<?php echo ( date('d.m.Y H:i:s') ); ?>".</p>
    <p>Good luck!</p>
  </body>
</html>

In the browser the adress should be http://127.0.0.1:5500/test.php .
The therefore called page should show with its date and time.

@HeinerEF Are you using this yourself and have tested this?

@mdavid This is really outside Kirby support. If the above doesn’t help you, please read the plugin documentation and the documentation for the browser extension carefully.

Hi Sonja, Really appreciate you taking the time to do this demo.

Seems I have other issues - “127.0.0.1 refused to connect.” Which I’ll sort.

Do have one question, you said “you need an additional browser extension to make the plugin work with PHP” is that in addition to Live Server, if so what?

Thanks for your time

David

The VS Code Live Server plugin only works with HTML files , that is what I was trying to say from the beginning. You need this browser extensions (available for Firefox and Chrome: https://github.com/ritwickdey/live-server-web-extension)

In the readme you will find the store links for the browser extensions as well as the setup tutorial. As you can see in my GIF, you have to call your original localhost server address in the browser after setting up the matching live server address in the browser extension settings.

In my example, the live server address is http://127.0.0.1:5501, while my Kirby project is by default available at http://325.test (I’m using Laravel Valet, so each project in my public_html folder is automatically available under foldername.test. In your setup, you would stick with http://localhost/plainkit-master.