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.

Solution 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.

Solution 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!

Solution 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.

Comments

[Nils Lindemann]

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.

[K4R1]

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.

[Gobrisebane]

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

[Timo]

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.

[user2513484]

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.

[Ganesh Patil]

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

[Gregory Bologna]

Your linked video is spoken in Hindi.

[Martzy]

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.