{"id":22341784,"url":"https://github.com/weaponsforge/livereload-webpack","last_synced_at":"2025-03-26T09:28:07.290Z","repository":{"id":40566083,"uuid":"276463344","full_name":"weaponsforge/livereload-webpack","owner":"weaponsforge","description":"Localhost static website development environment for plain HTML, CSS, and JavaScript files with live reload using Webpack 5","archived":false,"fork":false,"pushed_at":"2024-12-11T11:44:44.000Z","size":637,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2025-01-31T10:44:41.313Z","etag":null,"topics":["live-reload","static-site","webdevelopment","webpack","webpack-dev-server"],"latest_commit_sha":null,"homepage":"https://hub.docker.com/r/weaponsforge/livereload-webpack","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weaponsforge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-01T19:21:04.000Z","updated_at":"2024-12-11T11:44:48.000Z","dependencies_parsed_at":"2024-12-11T12:38:39.747Z","dependency_job_id":null,"html_url":"https://github.com/weaponsforge/livereload-webpack","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Flivereload-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Flivereload-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Flivereload-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Flivereload-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weaponsforge","download_url":"https://codeload.github.com/weaponsforge/livereload-webpack/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245625232,"owners_count":20646118,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["live-reload","static-site","webdevelopment","webpack","webpack-dev-server"],"created_at":"2024-12-04T08:08:12.948Z","updated_at":"2025-03-26T09:28:07.270Z","avatar_url":"https://github.com/weaponsforge.png","language":"JavaScript","readme":"## livereload-webpack\n\nLocalhost static website development environment for plain html, css and javascript files with live reload.\nUses **webpack** + **webpack-dev-server**.\n\n\n\u003e [!NOTE]\n\u003e A simpler alternative that also serves plain HTML, CSS, and JavaScript files with live-reload for local development is available at https://github.com/weaponsforge/livereload-basic\n\n\u003e [!TIP]\n\u003e Are you using **VSCode** and **want to do live reload** but **do not want to install livereload-webpacks's Node dependencies** or **run it using Docker**?\n\u003e [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) might be the tool for you. Check it out from from the Visual Studio Marketplace.\n\n### Content\n\n- [Dependencies](#dependencies)\n- [Installation](#nstallation)\n- [Usage](#usage)\n- [Available Scripts](#available-scripts)\n- [Usage with Docker](#usage-with-docker)\n   - [Using the Pre-Built Docker Image](#using-the-pre-built-docker-image)\n   - [Local-Built Development Image](#local-built-development-image)\n- [Building Docker Images](#building-docker-images)\n- [Other Notes](#other-notes)\n   - [Debugging Webpack Apps in VSCode](#debugging-webpack-apps-in-vscode)\n- [Deployment with GitHub Actions](#deployment-with-gitHub-actions)\n- [References](#references)\n\n\n### Dependencies\n\nThe following dependecies are used for this project. Feel free to experiment using other dependencies and versions.\n\n1. Windows 64-bit OS\n2. NodeJS\n\t- node version 20.15.0\n\t- npm version 10.7.0\n3. NodeJS webpack modules (installed via npm)\n\t- webpack 5.95.0\n\t- webpack-dev-server 5.1.0\n\t- webpack-cli 5.1.4\n\t- css-loader 7.1.2\n\t- style-loader 4.0.0\n\n\n## Installation\n\n1. Clone this repository.\u003cbr\u003e\n`https://github.com/weaponsforge/livereload-webpack.git`\n\n2. Install dependencies.\u003cbr\u003e\n`npm install`\n\n## Usage\n\nThese steps use **Node** to run the development app. Alternate development usage steps using Docker are available under the [Usage with Docker](#usage-with-docker) section.\n\n1. Run the localhost static website development environment.\u003cbr\u003e\n`npm run dev`\n\n2.  Edit the existing static files from the **./public** directory and wait for live reload. Your updates will reflect on the web browser.\n\n3. To include new static website files on live reload:\n\t- Stop the localhost **dev** server.\n\t- Create new static (.js, .css) files inside the **./src** directory.\n\t\t- Import the new **.js** and **.css** files in **./src/index.js**\n\t\t- Javascript events may need to be attached to HTML DOM elements using `.addEventListener()` when using raw HTML files.\n\t\t- Encode new HTML files inside `new HtmlWebpackPlugin({ ... })` in **webpack.config.js**\n\t\t- Specific specific file types other than CSS and image files may need to have their node module dependency installed and included in **webpack.config.js**'s `module -\u003e rules` part.\n\t- Re-start the **dev** server.\u003cbr\u003e\n`npm run dev`\n\n4. Build the project for the production environment. Webpack generates static files in the **/dist** directory.\u003cbr\u003e\n`npm run build`\n\n5. Run the production static website (does not use live reload).\u003cbr\u003e\n`npm run start`\n\n## Available Scripts\n\n### `npm start`\n\nStarts a simple ExpressJS web server serving the static website app from is static middleware.\n\n### `npm run dev`\n\nRuns the webpack-dev-server, launching the app for development mode.\n\n### `npm run build`\n\nBuilds the static website output using webpack into the **\"/dist\"** directory.\n\n## Usage with Docker\n\n### Using the Pre-Built Docker Image\n\nThis project deploys the latest **development** Docker image to Docker Hub on the creation of new Release/Tags. It is available at:\n\nhttps://hub.docker.com/r/weaponsforge/livereload-webpack\n\n1. Pull the pre-built development Docker image using any of the two (2) options:\n   - Open a terminal and run:\u003cbr\u003e\n\t    `docker pull weaponsforge/livereload-webpack:latest`\n   - Navigate to the livereload-webpack root project directory, then run:\u003cbr\u003e\n\t    `docker compose -f docker-compose.dev.yml pull`\n\n2. Run the development image.\u003cbr\u003e\n   - Using only Docker (1st option):\n\n      \u003e **INFO:** This option requires having the webpack web development app files inside a `\"/src\"` directory, consisting of at least:\n\n      ```\n      ├─ my-website-project\n      │   ├─ src\n      │   ├─── index.html\n      │   ├─── index.js\n      │   ├─── ...\n      ```\n\n      Navigate to the website project directory (for example, `\"my-website-project\"`) using a terminal, then run:\n\n      ```\n      # On Linux OS\n      docker run -it --rm -p 8080:8080 -v $(pwd)/src:/opt/app/src weaponsforge/livereload-webpack:latest\n\n      # On Windows OS\n      docker run -it --rm -p 8080:8080 -v %cd%\\src:/opt/app/src -e WATCHPACK_POLLING=true weaponsforge/livereload-webpack:latest\n      ```\n\n   - Using Docker compose (2nd option):\u003cbr\u003e\n      - `docker compose -f docker-compose.dev.yml up`\n      - \u003e **INFO:** Uncomment the following lines in the `docker-compose.dev.yml` file when working in a Windows host.\n         ```\n         # Enable WATCHPACK_POLLING if working in Windows WSL2 to enable hot reload\n         environment:\n           - WATCHPACK_POLLING=true\n         ```\n\n\n3. Refer to the [Usage](#usage) section **steps # 2 - # 4** for local development.\n\n### Local-Built Development Image\n\n1. Build the Docker image for local development.\u003cbr\u003e\n   - `docker compose -f docker-compose.dev.yml build`\n\t    \u003e **INFO:** Do this step only once or after installing new packages in the package.json file.\n   - Refer to the [Development Image](#development-image) section for more information.\n\n2. Run the development image.\u003cbr\u003e\n`docker compose -f docker-compose.dev.yml up`\n\n3. Refer to the [Usage](#usage) section **steps # 2 - # 4** for local development.\n\n4. Stop and exit the development container.\u003cbr\u003e\n`docker compose -f docker-compose.dev.yml down`\n\n## Building Docker Images\n\n### Development Image\n\nThe **development** Docker image contains Node runtime, Webpack dependencies, and the latest repository source codes for local development. Build it with:\n\n`docker compose -f docker-compose.dev.yml build`\n\n### Production Image\n\nThe **production** Docker image contains the Webpack app's static build output running in an nginx container for minimal production website build. Build it with:\n\n`docker compose -f docker-compose.prod.yml build`\n\n## Deployment with GitHub Actions\n\nThis repository deploys the local development Docker image to Docker Hub on the creation of new Release/Tags. It also deploys the sample static website built with Webpack to GitHub Pages at https://weaponsforge.github.io/livereload-webpack.\n\nAdd the following GitHub Secrets and Variables to enable deployment to Docker Hub and GitHub Pages.\n\n#### GitHub Secrets\n\n| GitHub Secret | Description |\n| --- | --- |\n| DOCKERHUB_USERNAME | (Optional) Docker Hub username. Required to enable pushing the development image to Docker Hub. |\n| DOCKERHUB_TOKEN | (Optional) Deploy token for the Docker Hub account. Required to enable pushing the development image to Docker Hub. |\n\n#### GitHub Variables\n\n| GitHub Variable | Description |\n| --- | --- |\n| DOCKERHUB_USERNAME | (Optional) Docker Hub username. Required to enable pushing the development image to Docker Hub. |\n\n\n## Other Notes\n\n\u003cdetails\u003e\n\u003csummary id=\"debugging-webpack-apps-in-vscode\"\u003e\n\t\u003cb\u003eDebugging Webpack Apps in VSCode\u003c/b\u003e\n\u003c/summary\u003e\n\n\u003cbr\u003e\n\n1. Add breakpoints in the JavaScript (`*.js`) files inside webpack's app directory entry point at the `\"src/\"` directory.\n\n2. Copy the following VSCode launch configurations to the `/.vscode/launch.json` file's `configurations[]` array:\n\n   **Debug with MS Edge**\n\n   ```\n   {\n     \"name\": \"Debug in Edge\",\n     \"request\": \"launch\",\n     \"type\": \"msedge\",\n     \"url\": \"http://localhost:8080\",\n     \"runtimeArgs\": [\n       \"--remote-debugging-port=9222\"\n     ]\n   }\n   ```\n\n   **Debug with Chrome**\n\n   ```\n   {\n     \"name\": \"Debug in Chrome\",\n     \"request\": \"launch\",\n     \"type\": \"chrome\",\n     \"url\": \"http://localhost:8080\",\n     \"runtimeArgs\": [\n       \"--remote-debugging-port=9222\"\n     ]\n   }\n   ```\n\n3. Run the app using Node or from a container.\n\n4. Select a debugger to run in VSCode. Press `Ctrl + Shift + D`\n   - Select `\"Debug in Edge\"` to launch an Edge web browser.\n   - Select `\"Debug in Chrome\"` to launch a Chrome web browser.\n\n5. Run and use the app from the launched browser instance on **step # 4**.\n\n\u003c/details\u003e\n\n\n---\n\n## References\n\n[[1]](https://github.com/weaponsforge/livereload-basic) - live reload using gulp + browser-sync (demo)\u003cbr\u003e\n[[2]](https://trello.com/c/n25MYtq8) - webpack notes (trello)\n\n\n@weaponsforge\u003cbr\u003e\n20200702\u003cbr\u003e\n20241005\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweaponsforge%2Flivereload-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweaponsforge%2Flivereload-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweaponsforge%2Flivereload-webpack/lists"}