Skip to content

Instantly share code, notes, and snippets.

@beastycoding
Forked from ibqn/setup.md
Created January 12, 2023 20:10
Show Gist options
  • Save beastycoding/161bf6001eb0d92899fd63dd3fa4e65d to your computer and use it in GitHub Desktop.
Save beastycoding/161bf6001eb0d92899fd63dd3fa4e65d 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.

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