DEV Community

Stevie G
Stevie G

Posted on

84 1 1 2

VSCode: LiveServer for PHP

A lot of developers have probably heard of the Live Server extension which is available in the Visual Studio Code Marketplace.

It primarily functions with static webpages like HTML but can also handle dynamic webpages such as PHP, NodeJs, and ASP.NET in a clever manner.

In the example below, I'll guide you through the installation of Live Server to work seamlessly with both types of webpages (static & dynamic).

  1. Install PHP Server and Live Server from the Visual Studio Code Marketplace.
  2. Create a PHP file, for instance, index.php, and place it in a sub-directory (let's say 'demo') under /var/www/html/, like /var/www/html/demo/
  3. Install the Live Server Chrome extension in your Chrome browser and customize it as follows: Extension Screenshot
  4. Click on the 'Go Live' button in the bottom right hand corner of the Visual Studio Code. VSCode Window Screenshot
  5. Next, open the index.php file located under /var/www/html/demo/ in Visual Studio Code. Right-click and select 'PHP Server: Reload Server', then 'PHP Server: Open file in browser'. VSCode Context Menu Screenshot
  6. In your browser, simply open the IP address http://localhost:3000/demo/index.php

You should not be able to use LiveServer for both static and dynamic websites :)

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (2)

Collapse
 
itsmestevieg profile image
Stevie G

Yes, you have to goto manage extensions, then allow extensions from other stores. Then grab the one from the chrome web store. New Edge runs on chromium so it will work. Hope this helps

Collapse
 
csimmons_dev profile image
Chris Simmons

Anyone find a way to use .htaccess locally with PHP Server?

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay