42

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.

Improve this question

10 Answers 10

Reset to default
65

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.

Improve this answer
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
    Commented Oct 31, 2020 at 20:12
  • 1
    Just create autohotkey refresh script. EX ) (^s :: chrome.refresh)
    – Gobrisebane
    Commented Nov 18, 2020 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
    Commented Nov 19, 2020 at 17:45
  • having PHP server extension is optional, you can use localhost path url in actual server field
    – Ganesh Patil
    Commented Sep 23, 2021 at 11:17
  • thanks my king, very helpful your answer
    – jonathasborges1
    Commented Oct 9, 2022 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!

Improve this answer
5
  • 7
    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.
    – Nils Lindemann
    Commented Jul 22, 2020 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
    Commented Mar 4, 2021 at 7: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
    Commented Feb 22, 2022 at 9:17
  • @user192148 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?
    – Cavalier
    Commented Sep 21, 2023 at 23:05
  • @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?
    – shea
    Commented Mar 25 at 0:03
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.

Improve this answer
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>
Improve this answer
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"

Improve this answer
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.

Improve this answer
0

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

Click to see imagen configuration

Improve this answer
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.
    – Community Bot
    Commented Dec 7, 2022 at 1:30
0

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

<meta http-equiv="refresh" content="10">
Improve this answer
0
0

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

Improve this answer
-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

Improve this answer
1
  • 1
    Your linked video is spoken in Hindi.
    – Gregory Bologna
    Commented Feb 18, 2022 at 13:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.