Is it possible to use Live-server for PHP with autoreload on save?

Question

I tried to use the Live-Server extension on VS Code for PHP, but it only opened the "root" of the "served" project folder and showed the index.php as a downloadable file link.

Then I read about the Live-Server Web Extension and installed it, but it still did not work.
(Yes, I did enable the web extension inside Live-Server config settings in VS Code).

I've also tried to use the PHP Server extension, which does good job for serving the project, instead of using Apache in XAMPP, but I have not found a way to reload when saving.

Is there even a way to autoreload PHP on PHP Server?

Does the Live-Server Web Extension require something else other than the Live-Server installed in VS Code and enabling the web extension in Live-Server config settings?

I've seen that it works for some people in gifs/videos, but I didn't manage to work it out.

Imbue

Answer 1

First of all, I want to tell you that Live Server which is available in visual code market place is the solution to your problem. It works mainly with the static webpage like HTML but also works with dynamic webpages like PHP, NodeJs and ASP.NET in a tricky way. In the following example I will guide you to install a live server which works with both webpages (static & dynamic).

1. Install PHP Server and Live Server from VS Code market place.
2. Create a PHP file, example index.php and place it in any sub-directory(say, demo) under /var/www/html/, like /var/www/html/demo/
3. Install the live server extension in the chrome browser and edit like this.
4. Now click on the "Go Live" button in the VS Code. 5.Now open the index.php file which is placed under /var/www/html/demo/ in VS Code and right click and select "PHP Server: Reload Server" then "PHP Server: Open file in browser".
5. In the Browser just open the IP address

http://localhost:3000/demo/index.php

you will see that it is working in a live server with a dynamic webpage like PHP. When you edit and save the index.php file with the running VS Code, it will automatically updated on that IP address.

Eastnortheast

OK. Have to take a look at this later. I'm currently focusing on JavaScript so maybe later if I get an inspiration about PHP again. – Imbue

Just create autohotkey refresh script. EX ) (^s :: chrome.refresh) – Wiseacre

Thanks, does it also work without php, just static? I cannot get it to work, do I need the Chrome Web extension? In VsCode I see bottom right port 5500 and in chrome 127.0.0.1:5500/index.html. But no refresh, I use autosave. – Unspotted

having PHP server extension is optional, you can use localhost path url in actual server field – Aksoyn

thanks my king, very helpful your answer – Peremptory

@Shyam I have followed your directions and it is not working for me. One issue that I have is I get a notification that "Live Reload is not possible without a head or body tag." My script is all PHP. All my html files are included throughout the php logic flow. I'm assuming that in my case, VS Code is not the way to go? – Kimbro

@Cavalier, Yes. The extension is programmed in a way that it will look for a head and body tag to work. So what you can do is that you can place a simple/blank head and body tag in your index.php file with nothing inside it/any PHP you want to set inside the tags and use this beautiful extension. When you are done and ready to deploy just comment out those two tags. – Eastnortheast

Answer 2

I was having a similar issue and I think I have found a workaround. With php server and live server installed, go to the web extension for live server and check "I don't want a proxy setup". For the actual server address put in your php server address (for me the default was http://localhost:3000/) and for live server address type in http://127.0.0.1:5500 if you kept the live server default address and port. In my settings.json I had "liveServer.settings.useWebExt" set to true, but setting it to false didn't make a difference for me for some reason.

I couldn't figure out how to get it to open the php server address rather than the live server address when pressing "go live". It still brings up the directory structure and I think the issue lies with live server not being in the working directory of the php server, if that makes sense. However, if you go to the php server address (localhost:3000/) the php pages worked for me and pressing ctrl+s to save updated the page correctly.

I hope this helps!

Codie

Thanks! I use the PHP internal development server (run php -S localhost:8000 in the root of the project directory, where the index.php is located). Then I click the web extension button, set Actual Server Address to http://localhost:8000/. Then, in VSCode, when index.php is open and active, I click 'Go Live' in the status bar. Then it indeed wrongly auto opens a file listing, but when going to http://localhost:8000/ autoreloading will work. – Darien

I can confirm this. I was about to give up and realized that in fact it is as @NilsLindemann describes. I use XAMPP and my project address was http://projectdomain/ and the live server would launch http://127.0.0.1:5500/ and just show the project's folder structure. But just browsing to the proper server name, http://projectdomain/ works perfectly. – Videlicet

From what I understand, the npm start server does not know about PHP. I did the same, I run npm start and php artisan serve at the same time. – Blankly

@Codie I had tried to use the localhost:3000 as well, but It can't find the page. With the localhost:5500 it shows the file structure and wants me to download them when I click on an item. Any other suggestions? – Kimbro

@NilsLindemann this is a magical fix... does anyone know how this works? maybe the plugin uses refreshes on Live Server Address as a trigger to refresh Actual Server Address? – Foe

Answer 3

For having auto reload in PHP files in Visual Studio Code:

1. Install Live Server extension.
2. Install PHP Server extension.
3. Config PHP Server: (PHP Config Path), (PHP Path).
4. Install Google Chrome Live Server extensions.
5. Open your PHP file in Visual Studio Code and 'Click to run Lie Server'.
6. Copy the opened page address and past it in "Live Server Address" in live server chrome extension and click Apply.
7. Switch again to Visual Studio Code and right click on your PHP file and click on "PHP Server: Reload server", it will open your PHP file in browser and just copy IP and port (for example: http://localhost:3000) and paste it on "Actual Server Address" in live server of Google Chrome extension and click apply.
8. Turn On live Reload in live server of chrome extension. Now whenever you run your PHP file with "PHP Server: Reload server", it will reload automatically on each saving.

Note: For having good experience of automatically reload active Autosave and set 400ms for its delay.

Burgle

Answer 4

There is a improved version of live-server for vs-code, which is called five-server. This extension does support PHP. You have to place a fiveserver.config.js into the root directory of your project, this could be an example configuration:

module.exports = {
  php: "/usr/bin/php", //php executable
  root: 'www', //root directory of your project, where the liveserver looks
  open: 'index.php', //entrypoint of your php project
  injectBody: true //enable live reloading
}

Also be sure to add a HTML tag into your index.php, otherwise it won't work (404 Error). A sample index.php which works for me:

   //index.php
<!DOCTYPE html>
<html lang="en">
    
    <body>
        <?php
    echo "The Force is strong with you";
    ?>
    </body>
    
</html>

Purgatorial

Answer 5

This solution works for me but i had to install a local copy of php-7.4.24, and configure the PHP_Server extention to look at that, then I kept getting mysqli and curl errors until I edited the php.ini and added the full paths to the extensions in my local install of php7

extension="C:\php-7.4.24\ext\php_mysqli.dll"

extension="C:\php-7.4.24\ext\php_curl.dll"

just using the following didn't work:

extension="php_mysqli.dll"

extension="php_curl.dll"

Deceptive

Answer 6

I did all from the first answer, but what I found is all I had to do was to

Install the Live Server plugin for Firefox and VSCode For Laravel I ran php artisan serve --host 192.168.0.104 --port 8001 Go in VSCode bottom right -> Go Live, then a page opens, I close it In Firefox plugin I changed the links, Actual server address as http://192.168.0.104:8001 and Live server address as those pages that don't work, which was http://127.0.0.1:5500

That's it.

Blankly

Answer 7

Put the following meta tag in your code; that works for me:

<meta http-equiv="refresh" content="10">

Seafarer

Answer 8

After a lot of trial and error I got it working with these settings.

Click to see imagen configuration

Isabeau

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Gam

Answer 9

in my case i was able to configure live server to work with php localhost server by configuring the proxy setting in live server, "without the need for a browser extension", but the problem is the auto reloading on save is not working, thats the only remaining problem

my config in "settings.json": "liveServer.settings.proxy": { "enable": true, "baseUri": "/", //"proxyUri": "http://localhost/ws/development/${workspaceFolderBasename}" "proxyUri": "http://localhost/ws/development/saleh" },

also as you see in the commented code, i was not able to use settings variable, it is not working

Octaviaoctavian

Answer 10

Download the chrome extension- You'll also have to add the live server extension on VS code

Actual server address = http://localhost/(insert_folder_name_here)/ Live server address = http://127.0.0.1:5500/(insert_php_file_name).php

Use a sample html file to find the Live server address if this doesn't work for you, OR

OR Watch this video to setup it up

Shannonshanny

Your linked video is spoken in Hindi. – Recha