Setup VSCode with Live Server and a Docker container

setup.md

Setup VSCode with Live Server and a Docker container

In this I will shortly describe how to setup

• LiveServer Webextension
• LiveServer VSCode Extension
• with a php-apache docker instance.

I used a docker-compose.yml file although I only created one container with no other dependencies. This works with a regular Dockerfile as well.

If you have problems understanding what Docker, Live Server or VSCode are and don't know what's going on here, please search the web for more informations about this tools. I will not go into much detail and keep the steps as short as possible.

Prerequisites

• VSCode installed
• VSCode LiveServer Extension installed
• Docker installed
• Chrome or Firefox with LiveServer Extension installed

Folder Structure

.
+-- .vscode
|   +-- settings.json
+-- docker-compose.yml
+-- index.php

Steps to do

1. Create a index.php file with the following test content

<?php

echo "Hello World";

2. Create a docker-compose.yml file which will hold our configuration

version: '3'

services:
  web:
    image: php:7.3-apache
    ports: 
    - "9999:80"
    volumes:
    - .:/var/www/html/

run

docker-compose up

to create the docker container (If you dont have the image, docker will download it)

Now we can go to http://127.0.0.1:9999 in the browser and should see "Hello World".

3. Configure the Live Server

In order to get the live reload we need to map our localhost to the liveserver. To do that we need to create a .vscode folder and in it a settings.json file with the following content.

{
    "liveServer.settings.proxy": {
        "enable": true,
        "baseUri": "/",
        "proxyUri": "http://127.0.0.1:9999"
    }
}

Next, enable Live Server in your browser. (do NOT activate "I don't want proxy setup (recommended)")

Start the Live Server within VSCode. This should open a new tab at http://127.0.0.1:5500/ and show the "Hello World" message again. Congrats! You now have a docker container with live reload enbaled! If you edit the index.php your browser should now automatically reload the page.