v2.1.0

.dockerignore

@@ -0,0 +1,11 @@
+node_modules/
+dist/
+.vscode
+.git
+.gitignore
+.dockerignore
+Dockerfile
+*.zip
+*.rar
+*.txt
+*.yml

.gitignore

@@ -1 +1,6 @@
-node_modules/
+node_modules/
+.vscode
+.git
+*.zip
+*.rar
+*.txt

Dockerfile

@@ -0,0 +1,31 @@
+FROM node:20.15.0-alpine AS base
+RUN mkdir -p /opt/app
+WORKDIR /opt/app
+RUN adduser -S user
+RUN chown -R user /opt/app
+COPY package*.json ./
+COPY yarn.lock ./
+
+# Install specific version of Yarn
+# directly from Alpine package manager
+RUN apk add --no-cache yarn=1.22.22-r0
+
+# DEVELOPMENT APP PROFILE
+FROM base AS development
+RUN yarn install
+COPY . ./
+EXPOSE 3000
+CMD ["yarn", "dev"]
+
+# BUILD TARGET
+FROM base AS build
+COPY . ./
+USER user
+
+# PRODUCTION CLIENT PROFILE
+FROM nginx:1.22.0-alpine AS production
+COPY --from=build /opt/app/public /usr/share/nginx/html
+RUN rm /etc/nginx/conf.d/default.conf
+COPY config/nginx.conf /etc/nginx/conf.d
+EXPOSE 3000
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,63 +1,167 @@
-## livereload-basic
-
-> Localhost static website development environment for plain html, css and javascript files with live reload.  
-> Uses **gulp** + **browser-sync**.
-
-
-### Content
-
-- [Dependencies](#dependencies)
-- [Installation](#nstallation)
-- [Usage](#usage)
-- [References](#references)
-
-
-### Dependencies
-
-The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.
-
-1. Windows 64-bit OS
-2. nvm version 1.1.9 (for Windows)
-3. NodeJS 16.14.2 installed using nvm
-   - node v16.14.2
-   - npm v8.5.0
-4. yarn v1.22.19
-   - installed using NodeJS
-3. NodeJS modules (installed using yarn)
-	- gulp v.4.0.2
-	- browser-sync v.2.27.10
-
-
-## Installation
-
-1. Clone this repository.  
-`https://github.com/weaponsforge/livereload-basic.git`
-
-2. Install dependencies.  
-`yarn install`
-
-
-## Usage
-
-1. Run the localhost static website development environment.  
-`yarn dev`
-
-2.  Edit the existing static files from the **./public** directory and wait for live reload. Your updates will reflect on the web browser.
-
-3. To include new static website files on live reload:
-	- Stop the localhost **dev** server.
-	- Create your new static (.html, .js, .css) files inside the **./public** directory.
-	- Re-start the **dev** server.  
-`npm run dev`
-
-4. Run the production static website (does not use live reload).  
-`yarn start`
-
-
-## References
-
-[[1]](https://github.com/ciatph/webtools) - live reload using gulp v.3.9.1 (older gulp version)  
-[[2]](https://trello.com/c/gFN68i6k) - gulp notes (trello)
-
-@weaponsforge  
-20200630
+## livereload-basic
+
+Simple localhost static website development environment for plain HTML, CSS, and JavaScript files with live reload.
+
+Its development and static hosting and file-serving architecture are closer to traditional static web servers. Uses **Gulp** and **Browser-Sync**
+
+### Content
+
+- [Dependencies](#dependencies)
+- [Installation](#nstallation)
+- [Usage](#usage)
+- [Available Scripts](#available-scripts)
+- [Usage with Docker](#usage-with-docker)
+   - [Local-Built Development Image](#local-built-development-image)
+- [Building Docker Images](#building-docker-images)
+- [Debugging Notes](#debugging-notes)
+   - [Debugging Traditional Web Apps in VSCode](#debugging-traditional-webapps-in-vscode)
+- [References](#references)
+
+### Dependencies
+
+The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.
+
+1. Windows 64-bit OS
+2. nvm version 1.1.12 (for Windows)
+3. NodeJS 16.14.2 installed using nvm
+   - node v20.15.0
+   - npm v10.7.0
+4. yarn v1.22.22
+   - installed using NodeJS
+3. NodeJS modules (installed using yarn)
+	- gulp v5.0.0
+	- browser-sync v3.0.3
+
+
+## Installation
+
+1. Clone this repository.<br>
+`https://github.com/weaponsforge/livereload-basic.git`
+
+2. Install dependencies.<br>
+`yarn install`
+
+
+## Usage
+
+These steps use **Node** and **Yarn** to run the development app.
+
+1. Run the localhost static website development environment.<br>
+`yarn dev`
+
+2.  Edit the existing static files from the **./public** directory and wait for live reload. Your updates will reflect on the web browser.
+
+3. To include new static website files on live reload:
+	- Create new static (.html, .js, .css) files inside the **./public** directory.
+	- Refresh the web browser.
+	- Restart the web server if updates don't show after a while.<br>
+   `yarn dev`
+
+4. Run the production static website (does not use live reload).<br>
+`yarn start`
+
+## Available Scripts
+
+### `npm run dev`
+
+Runs the Gulp and Browser-Sync tasks, launching the local website for development mode.
+
+### `npm start`
+
+Starts a simple ExpressJS web server serving the static website app from its static middleware.
+
+## Usage with Docker
+
+### Local-Built Development Image
+
+1. Build the Docker image for local development.
+   - `docker compose -f docker-compose.dev.yml build`
+	    > **INFO:** Do this step only once or after installing new packages in the package.json file.
+   - Refer to the [Development Image](#development-image) section for more information.
+
+2. Run the development image.<br>
+`docker compose -f docker-compose.dev.yml up`
+
+3. Refer to the [Usage](#usage) section steps **# 2 - # 3** for local development.
+
+4. Stop and exit the development container.<br>
+`docker compose -f docker-compose.dev.yml down`
+
+## Building Docker Images
+
+### Development Image
+
+The **development** Docker image contains Node runtime, Gulp, Browser-Sync and yarn dependencies, and the latest repository source codes for local development. Build it with:
+
+`docker compose -f docker-compose.dev.yml build`
+
+### Production Image
+
+The **production** Docker image contains the static website running in an nginx container for minimal production website build. Build it with:
+
+`docker compose -f docker-compose.prod.yml build`
+
+## Debugging Notes
+
+<details>
+<summary id="debugging-traditional-webapps-in-vscode">
+	<b>Debugging Traditional Web Apps in VSCode</b>
+</summary>
+
+<br>
+
+> Debugging regular (traditional) web apps with VSCode is similar to debugging and adding breakpoints from the Chrome or Edge browser's **Sources** tab.
+
+> [!TIP]
+> 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).
+
+1. Add breakpoints in the JavaScript (`*.js`) files inside the website's directory entry point at the `"public/"` directory.
+
+2. Copy the following VSCode launch configurations to the `/.vscode/launch.json` file's `configurations[]` array:
+
+   **Debug with MS Edge**
+
+   ```
+   {
+     "name": "Debug Regular App in Edge",
+     "request": "launch",
+     "type": "msedge",
+     "url": "http://localhost:3000",
+     "pathMapping": {
+      "/": "${workspaceFolder}/public",
+     }
+   }
+   ```
+
+   **Debug with Chrome**
+
+   ```
+   {
+     "name": "Debug Regular App in Chrome",
+     "request": "launch",
+     "type": "chrome",
+     "url": "http://localhost:3000",
+     "pathMapping": {
+       "/": "${workspaceFolder}/public",
+     }
+   }
+   ```
+
+3. Run the app using Node or from a container.
+
+4. Select a debugger to run in VSCode. Press `Ctrl + Shift + D`
+   - Select `"Debug Regular App in Edge"` to launch an Edge web browser.
+   - Select `"Debug Regular App in Chrome"` to launch a Chrome web browser.
+
+5. Run and use the app from the launched browser instance on **step # 4**.
+
+</details>
+
+## References
+
+[[1]](https://github.com/ciatph/webtools) - live reload using gulp v.3.9.1 (older gulp version)<br>
+[[2]](https://trello.com/c/gFN68i6k) - gulp notes (trello)
+
+@weaponsforge<br>
+20200630<br>
+20241006

config/nginx.conf

@@ -0,0 +1,22 @@
+# Minimal nginx configuration for running locally in containers
+server {
+  listen 3000;
+
+  root /usr/share/nginx/html;
+  include /etc/nginx/mime.types;
+  index index.html index.html;
+
+  server_name localhost;
+  server_tokens off;
+
+  # Rewrite all React URLs/routes to index.html
+  # location / {
+  #  try_files $uri $uri/ /index.html =404;
+  # }
+
+  # Other error pages
+  error_page 500 502 503 504 /50x.html;
+  location = /50x.html {
+    root /usr/share/nginx/html;
+  }
+}

docker-compose.dev.yml

@@ -0,0 +1,18 @@
+services:
+  weaponsforge.livereload-basic:
+    container_name: weaponsforge-localhost-basic
+    image: weaponsforge/livereload-basic:latest
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: development
+    volumes:
+      - .:/opt/app
+      - /opt/app/node_modules
+    ports:
+      - "3000:3000"
+      - "9229:9229"
+    # Enable USE_POLLING if working in Windows WSL2 to enable hot reload
+    environment:
+      - IS_DOCKER=true
+      # - USE_POLLING=true

docker-compose.prod.yml

@@ -0,0 +1,13 @@
+services:
+  weaponsforge.livereload-basic.prod:
+    container_name: weaponsforge-localhost-basic-prod
+    image: weaponsforge/livereload-basic:prod
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: production
+    volumes:
+      - .:/opt/app
+      - /opt/app/node_modules
+    ports:
+      - "3000:3000"