weaponsforge/livereload-webpack repository overview

⁠livereload-webpack

Docker-based local development environment for static HTML, CSS, and JavaScript websites with live reload using Webpack 5 (webpack-dev-server).

GitHub Repository
https://github.com/weaponsforge/livereload-webpack⁠

Live Preview (Sample Website)
https://weaponsforge.github.io/livereload-webpack/⁠

---

⁠✅ Prerequisites

• Docker⁠ installed and running.
• Two terminal windows/tabs may be needed for the Build and Preview steps, since the docker run commands below run in the foreground.

---

⁠🧩 Development

1. Set up local static website development files following the Webpack project structure. At the very least, it requires having a root project directory with a Webpack-compatible "/src" directory consisting of:
   

   my-website-project/
   └── src/
       ├── index.html
       ├── index.js
       └── ...
   

   Copy

2. From the project directory, run:

   # On Linux OS
   docker run --rm -p 8080:8080 -v $(pwd)/src:/opt/app/src weaponsforge/livereload-webpack
   
   # On Windows OS
   docker run --rm -p 8080:8080 -v %cd%\src:/opt/app/src -e WATCHPACK_POLLING=true weaponsforge/livereload-webpack
   

   Copy

   WATCHPACK_POLLING=true is set on Windows because Docker Desktop on Windows doesn't reliably forward native filesystem change events into the container, so Webpack falls back to polling for file changes required for hot reload.

3. Load the localhost website at http://localhost:8080.

   Changes to files in "src" are automatically reflected in the browser.

   To explicitly pull the latest image:

   docker pull weaponsforge/livereload-webpack:latest
   

   Copy

4. To stop the container, press Ctrl+C in the terminal it's running in. Since it's started with --rm, it's removed automatically on stop.

---

⁠📦 Build

1. Mount the dist directory when starting the container.

   # On Linux OS
   docker run --rm -p 8080:8080 -v $(pwd)/src:/opt/app/src -v $(pwd)/dist:/opt/app/dist --name weaponsforge-localhost-webpack weaponsforge/livereload-webpack
   
   # On Windows OS
   docker run --rm -p 8080:8080 -v %cd%\src:/opt/app/src -v %cd%\dist:/opt/app/dist --name weaponsforge-localhost-webpack -e WATCHPACK_POLLING=true weaponsforge/livereload-webpack
   

   Copy

2. In a separate terminal, build the website:

   docker exec weaponsforge-localhost-webpack npm run build
   

   Copy

The generated files are available in the host dist directory.

---

⁠🌐 Preview

1. To preview the bundled website using the Express server, expose port 3000 when starting the container.

   # On Linux OS
   docker run --rm -p 8080:8080 -p 3000:3000 -v $(pwd)/src:/opt/app/src -v $(pwd)/dist:/opt/app/dist --name weaponsforge-localhost-webpack weaponsforge/livereload-webpack
   
   # On Windows OS
   docker run --rm -p 8080:8080 -p 3000:3000 -v %cd%\src:/opt/app/src -v %cd%\dist:/opt/app/dist --name weaponsforge-localhost-webpack -e WATCHPACK_POLLING=true weaponsforge/livereload-webpack
   

   Copy

   ⚠️ NOTE: As above, stop any previously running container named "weaponsforge-localhost-webpack" before running this command.

2. In a separate terminal, build and start the Express server:

   docker exec weaponsforge-localhost-webpack npm run build
   docker exec weaponsforge-localhost-webpack npm start
   

   Copy

3. Open http://localhost:3000 to preview the bundled website.