34

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.

K4R1
  • 745
  • 1
  • 10
  • 20

9 Answers9

57

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. Live Server Web Extension
  4. Now click on the "Go Live" button in the VS Code. Go Live 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".PHP server
  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.

Shyam Bhattacharyya
  • 745
  • 6
  • 7
  • 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. – K4R1 Oct 31 '20 at 20:12
  • 1
    Just create autohotkey refresh script. EX ) (^s :: chrome.refresh) – Gobrisebane Nov 18 '20 at 10:47
  • 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. – Timo Nov 19 '20 at 17:45
  • having PHP server extension is optional, you can use localhost path url in actual server field – Ganesh Patil Sep 23 '21 at 11:17
  • thanks my king, very helpful your answer – jonathasborges1 Oct 09 '22 at 18:06
10

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!

user192148
  • 145
  • 1
  • 9
  • 5
    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](https://addons.mozilla.org/de/firefox/addon/live-server-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. – Nils Lindemann Jul 22 '20 at 13:11
  • 1
    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. – user2513484 Mar 04 '21 at 07:44
  • 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. – Martzy Feb 22 '22 at 09:17
6

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.

JAC
  • 950
  • 1
  • 7
  • 11
1

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>
DrGregoryHouse
  • 510
  • 5
  • 12
0

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"

ZenMan16
  • 9
  • 3
0

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

enter image description here

That's it.

Martzy
  • 85
  • 12
0

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

<meta http-equiv="refresh" content="10">
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Dhamith Kumara
  • 499
  • 5
  • 9
0

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

Click to see imagen configuration

JuanJota
  • 1
  • 1
  • 1
    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](/help/how-to-answer). – Community Dec 07 '22 at 01:30
-3

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

Seun Tunde
  • 1