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.

beastycoding/setup.md