Skip to content

Instantly share code, notes, and snippets.

@ibqn
Created January 31, 2020 19:47
Show Gist options
  • Save ibqn/bba314fe2b1652df314b056b143ecba2 to your computer and use it in GitHub Desktop.
Save ibqn/bba314fe2b1652df314b056b143ecba2 to your computer and use it in GitHub Desktop.
Setup VSCode with Live Server and a Docker container

Setup VSCode with Live Server and a Docker container

In this I will shortly describe how to setup

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.

@sbb3
Copy link

sbb3 commented Apr 3, 2022

Thank you very much you saved me a lot of time

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment