{"id":22341786,"url":"https://github.com/weaponsforge/livereload-basic","last_synced_at":"2025-03-26T09:28:04.968Z","repository":{"id":40564642,"uuid":"276143053","full_name":"weaponsforge/livereload-basic","owner":"weaponsforge","description":"Localhost static website development environment for vanilla HTML, CSS and JavaScript files with live reload using Gulp and Browser-Sync","archived":false,"fork":false,"pushed_at":"2024-12-11T11:43:04.000Z","size":783,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2025-01-31T10:44:41.624Z","etag":null,"topics":["gulp","live-reload","static-site","webdevelopment"],"latest_commit_sha":null,"homepage":"https://hub.docker.com/r/weaponsforge/livereload-basic","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-06-30T15:46:04.000Z","updated_at":"2024-12-11T11:43:05.000Z","dependencies_parsed_at":"2024-12-11T12:38:25.925Z","dependency_job_id":null,"html_url":"https://github.com/weaponsforge/livereload-basic","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-basic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Flivereload-basic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Flivereload-basic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weaponsforge%2Flivereload-basic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weaponsforge","download_url":"https://codeload.github.com/weaponsforge/livereload-basic/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245625231,"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":["gulp","live-reload","static-site","webdevelopment"],"created_at":"2024-12-04T08:08:12.971Z","updated_at":"2025-03-26T09:28:04.950Z","avatar_url":"https://github.com/weaponsforge.png","language":"JavaScript","readme":"## livereload-basic\n\nSimple localhost static website development environment for plain HTML, CSS, and JavaScript files with live reload.\n\nIts development static hosting and file-serving architecture are closer to traditional static web servers. Uses **Gulp** and **Browser-Sync**\n\n\u003e [!NOTE] \n\u003e An alternate localhost static development environment using **Webpack**, also with live reload, is available at\u003cbr\u003e\n\u003e https://github.com/weaponsforge/livereload-webpack\n\n\u003e [!TIP]\n\u003e Are you using **VSCode** and **want to do live reload** but **do not want to install livereload-basic'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- [Deployment with GitHub Actions](#deployment-with-github-actions)\n- [Deployment URLs](#deployment-urls)\n- [Debugging Notes](#debugging-notes)\n   - [Debugging Traditional Web Apps in VSCode](#debugging-traditional-webapps-in-vscode)\n- [References](#references)\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. nvm version 1.1.12 (for Windows)\n3. NodeJS 16.14.2 installed using nvm\n   - node v20.15.0\n   - npm v10.7.0\n4. yarn v1.22.22\n   - installed using NodeJS\n3. NodeJS modules (installed using yarn)\n\t- gulp v5.0.0\n\t- browser-sync v3.0.3\n\n\n## Installation\n\n1. Clone this repository.\u003cbr\u003e\n`https://github.com/weaponsforge/livereload-basic.git`\n\n2. Install dependencies.\u003cbr\u003e\n`yarn install`\n\n\n## Usage\n\nThese steps use **Node** and **Yarn** to run the development app.\n\n1. Run the localhost static website development environment.\u003cbr\u003e\n`yarn 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- Create new static (.html, .js, .css) files inside the **./public** directory.\n\t- Refresh the web browser.\n\t- Restart the web server if updates don't show after a while.\u003cbr\u003e\n   `yarn dev`\n\n4. Run the production static website (does not use live reload).\u003cbr\u003e\n`yarn start`\n\n## Available Scripts\n\n### `npm run dev`\n\nRuns the Gulp and Browser-Sync tasks, launching the local website for development mode.\n\n### `npm run dev:docker`\n\nSets the `IS_DOCKER=true` environment variable before running the Gulp and Browser-Sync tasks inside a Docker container. It doesn't launch the local website for development mode.\n\u003e This command runs only in a Linux environment.\n\n### `npm start`\n\nRuns a simple ExpressJS web server serving the static website app using its static middleware.\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-basic\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-basic:latest`\n   - Navigate to the livereload-basic root project directory, then run:\u003cbr\u003e\n\t `docker compose -f docker-compose.dev.yml pull`\n\n2. Run the development image.\n   - Using only Docker (1st option):\n\t    \u003e **INFO:** This option requires having the static website development HTML, CSS, and JavaScript files inside a `FILE_DIRECTORY` directory in the host machine. This example uses a `FILE_DIRECTORY` named `\"/public\"`, which contains at least:\n\n\t\t```\n\t\t├─ my-website-project\n\t\t│   ├─ public\n\t\t│   ├─── index.html\n\t\t│   ├─── ...\n\t\t```\n\t\tNavigate to the root project directory (for example, `\"my-website-project\"`) using a terminal, then run:\n\n\t\t```\n\t\t# On Linux OS\n\t\tdocker run -it --rm -p 3000:3000 -v $(pwd)/FILE_DIRECTORY:/opt/app/public weaponsforge/livereload-basic:latest\n\n\t\t# On Windows OS\n\t\tdocker run -it --rm -p 3000:3000 -v %cd%\\FILE_DIRECTORY:/opt/app/public -e USE_POLLING=true weaponsforge/livereload-basic:latest\n\t\t```\n\n      \u003e _**TIP:**\u003cbr\u003e\n      \u003e Replace `-p 3000:3000` with other port bindings as needed._\n\n\t- Using Docker compose (2nd option):\u003cbr\u003e\n\t    - `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 USE_POLLING if working in Windows WSL2 to enable live reload\n          environment:\n            - USE_POLLING=true\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.\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 - # 3** 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, Gulp, Browser-Sync and Yarn 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 static website 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.\n\nAdd the following GitHub Secrets and Variables to enable deployment to Docker Hub.\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## Deployment URLs\n\n**Docker Hub**\u003cbr\u003e\nhttps://hub.docker.com/r/weaponsforge/livereload-basic\n\n**Live Preview (Sample Website)**\u003cbr\u003e\nhttps://weaponsforge.github.io/livereload-basic/\n\n\n## Debugging Notes\n\n\u003cdetails\u003e\n\u003csummary id=\"debugging-traditional-webapps-in-vscode\"\u003e\n\t\u003cb\u003eDebugging Traditional Web Apps in VSCode\u003c/b\u003e\n\u003c/summary\u003e\n\n\u003cbr\u003e\n\n\u003e Debugging regular (traditional) web apps with VSCode is similar to debugging and adding breakpoints from the Chrome or Edge browser's **Sources** tab.\n\n\u003e **TIP**\u003cbr\u003e\n\u003e Take note of its VSCode launch settings with a `\"pathMapping\"` key. It is quite similar to the VSCode launch settings of [web apps launched with Webpack](https://github.com/weaponsforge/livereload-webpack#other-notes).\n\n1. Add breakpoints in the JavaScript (`*.js`) files inside the website's directory entry point at the `\"public/\"` 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 Regular App in Edge\",\n     \"request\": \"launch\",\n     \"type\": \"msedge\",\n     \"url\": \"http://localhost:3000\",\n     \"pathMapping\": {\n      \"/\": \"${workspaceFolder}/public\",\n     }\n   }\n   ```\n\n   **Debug with Chrome**\n\n   ```\n   {\n     \"name\": \"Debug Regular App in Chrome\",\n     \"request\": \"launch\",\n     \"type\": \"chrome\",\n     \"url\": \"http://localhost:3000\",\n     \"pathMapping\": {\n       \"/\": \"${workspaceFolder}/public\",\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 Regular App in Edge\"` to launch an Edge web browser.\n   - Select `\"Debug Regular App 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## References\n\n[[1]](https://github.com/ciatph/webtools) - live reload using gulp v.3.9.1 (older gulp version)\u003cbr\u003e\n[[2]](https://trello.com/c/gFN68i6k) - gulp notes (trello)\n\n@weaponsforge\u003cbr\u003e\n20200630\u003cbr\u003e\n20241008\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweaponsforge%2Flivereload-basic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweaponsforge%2Flivereload-basic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweaponsforge%2Flivereload-basic/lists"}