diff --git a/README.md b/README.md index f401937..4cd4b36 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,10 @@ Its development static hosting and file-serving architecture are closer to tradi > An alternate localhost static development environment using **Webpack**, also with live reload, is available at
> https://github.com/weaponsforge/livereload-webpack +> [!TIP] +> 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**? +> [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. + ### Content - [Dependencies](#dependencies) @@ -56,15 +60,18 @@ These steps use **Node** and **Yarn** to run the development app. 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. +2. Launch the local development website at:
+`http://localhost:3000` + +3. 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: +4. 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.
`yarn dev` -4. Run the production static website (does not use live reload).
+5. Run the production static website (does not use live reload).
`yarn start` ## Available Scripts @@ -90,9 +97,9 @@ This project deploys the latest **development** Docker image to Docker Hub on th https://hub.docker.com/r/weaponsforge/livereload-basic -1. Pull the pre-built development Docker image using any of the two (2) options: +1. Pull the "latest" pre-built development Docker image using any of the two (2) options: - Open a terminal and run:
- `docker pull weaponsforge/livereload-basic:latest` + `docker pull weaponsforge/livereload-basic` - Navigate to the livereload-basic root project directory, then run:
`docker compose -f docker-compose.dev.yml pull` @@ -108,24 +115,35 @@ https://hub.docker.com/r/weaponsforge/livereload-basic ``` Navigate to the root project directory (for example, `"my-website-project"`) using a terminal, then run: - ``` + ```bash # On Linux OS - docker run -it --rm -p 3000:3000 -v $(pwd)/FILE_DIRECTORY:/opt/app/public weaponsforge/livereload-basic:latest + docker run -it --rm -p 3000:3000 -v $(pwd)/FILE_DIRECTORY:/opt/app/public weaponsforge/livereload-basic - # On Windows OS - docker run -it --rm -p 3000:3000 -v %cd%\FILE_DIRECTORY:/opt/app/public -e USE_POLLING=true weaponsforge/livereload-basic:latest + # On Windows OS (Command Prompt) + docker run -it --rm -p 3000:3000 -v %cd%\FILE_DIRECTORY:/opt/app/public -e USE_POLLING=true weaponsforge/livereload-basic ``` - > _**TIP:**
- > Replace `-p 3000:3000` with other port bindings as needed._ + > 💡**TIP:**
+ > _To use other port bindings aside from the default `3000`:_ + > 1. Add a `PORT` environment variable eg., `-e PORT=3003` + > 2. Replace `-p 3000:3000` with the `PORT` environment variable. - Using Docker compose (2nd option):
- `docker compose -f docker-compose.dev.yml up` - - > **INFO:** Uncomment the following lines in the `docker-compose.dev.yml` file when working in a Windows host. + - > **INFO:** Uncomment the following lines in the `docker-compose.dev.yml` file when working in a **Windows host**. + ```yml + environment: + # Enable USE_POLLING if working in Windows WSL2 to enable live reload + - USE_POLLING=true ``` - # Enable USE_POLLING if working in Windows WSL2 to enable live reload - environment: - - USE_POLLING=true + - > **INFO:** Enable using **other ports** - uncomment the following lines in the `docker-compose.dev.yml` and expose the new port under the `"ports"` section. + ```yml + ports: + - "3002:3002" + environment: + # Use other ports aside from the 3000 default + # Ensure to map and expose this port under the "ports" section eg., -"3002:3002" + - PORT=3002 ``` 3. Refer to the [Usage](#usage) section steps **# 2 - # 4** for local development. @@ -154,7 +172,7 @@ The **development** Docker image contains Node runtime, Gulp, Browser-Sync and Y ### Production Image -The **production** Docker image contains the static website running in an nginx container for minimal production website build. Build it with: +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` diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index fcff323..76e390c 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -12,6 +12,10 @@ services: ports: - "3000:3000" - "9229:9229" - # Enable USE_POLLING if working in Windows WSL2 to enable live reload # environment: + # Enable USE_POLLING if working in Windows WSL2 to enable live reload # - USE_POLLING=true + # + # Use other ports aside from the default 3000 + # Ensure to map and expose this port under the "ports" section eg., -"3002:3002" + # - PORT=3002