Skip to content

Commit 2a5a007

Browse files
weaponsforgeweaponsforge
authored
Merge pull request #24 from weaponsforge/dev
v2.1.0
2 parents a2b850c + d6c2d6f commit 2a5a007

10 files changed

+2271
-3470
lines changed

‎.dockerignore

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
node_modules/
2+
dist/
3+
.vscode
4+
.git
5+
.gitignore
6+
.dockerignore
7+
Dockerfile
8+
*.zip
9+
*.rar
10+
*.txt
11+
*.yml

‎.gitignore

+6-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
1-
node_modules/
1+
node_modules/
2+
.vscode
3+
.git
4+
*.zip
5+
*.rar
6+
*.txt

‎Dockerfile

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
FROM node:20.15.0-alpine AS base
2+
RUN mkdir -p /opt/app
3+
WORKDIR /opt/app
4+
RUN adduser -S user
5+
RUN chown -R user /opt/app
6+
COPY package*.json ./
7+
COPY yarn.lock ./
8+
9+
# Install specific version of Yarn
10+
# directly from Alpine package manager
11+
RUN apk add --no-cache yarn=1.22.22-r0
12+
13+
# DEVELOPMENT APP PROFILE
14+
FROM base AS development
15+
RUN yarn install
16+
COPY . ./
17+
EXPOSE 3000
18+
CMD ["yarn", "dev"]
19+
20+
# BUILD TARGET
21+
FROM base AS build
22+
COPY . ./
23+
USER user
24+
25+
# PRODUCTION CLIENT PROFILE
26+
FROM nginx:1.22.0-alpine AS production
27+
COPY --from=build /opt/app/public /usr/share/nginx/html
28+
RUN rm /etc/nginx/conf.d/default.conf
29+
COPY config/nginx.conf /etc/nginx/conf.d
30+
EXPOSE 3000
31+
CMD ["nginx", "-g", "daemon off;"]

‎README.md

+167-63
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,167 @@
1-
## livereload-basic
2-
3-
> Localhost static website development environment for plain html, css and javascript files with live reload.
4-
> Uses **gulp** + **browser-sync**.
5-
6-
7-
### Content
8-
9-
- [Dependencies](#dependencies)
10-
- [Installation](#nstallation)
11-
- [Usage](#usage)
12-
- [References](#references)
13-
14-
15-
### Dependencies
16-
17-
The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.
18-
19-
1. Windows 64-bit OS
20-
2. nvm version 1.1.9 (for Windows)
21-
3. NodeJS 16.14.2 installed using nvm
22-
- node v16.14.2
23-
- npm v8.5.0
24-
4. yarn v1.22.19
25-
- installed using NodeJS
26-
3. NodeJS modules (installed using yarn)
27-
- gulp v.4.0.2
28-
- browser-sync v.2.27.10
29-
30-
31-
## Installation
32-
33-
1. Clone this repository.
34-
`https://github.com/weaponsforge/livereload-basic.git`
35-
36-
2. Install dependencies.
37-
`yarn install`
38-
39-
40-
## Usage
41-
42-
1. Run the localhost static website development environment.
43-
`yarn dev`
44-
45-
2. Edit the existing static files from the **./public** directory and wait for live reload. Your updates will reflect on the web browser.
46-
47-
3. To include new static website files on live reload:
48-
- Stop the localhost **dev** server.
49-
- Create your new static (.html, .js, .css) files inside the **./public** directory.
50-
- Re-start the **dev** server.
51-
`npm run dev`
52-
53-
4. Run the production static website (does not use live reload).
54-
`yarn start`
55-
56-
57-
## References
58-
59-
[[1]](https://github.com/ciatph/webtools) - live reload using gulp v.3.9.1 (older gulp version)
60-
[[2]](https://trello.com/c/gFN68i6k) - gulp notes (trello)
61-
62-
@weaponsforge
63-
20200630
1+
## livereload-basic
2+
3+
Simple localhost static website development environment for plain HTML, CSS, and JavaScript files with live reload.
4+
5+
Its development and static hosting and file-serving architecture are closer to traditional static web servers. Uses **Gulp** and **Browser-Sync**
6+
7+
### Content
8+
9+
- [Dependencies](#dependencies)
10+
- [Installation](#nstallation)
11+
- [Usage](#usage)
12+
- [Available Scripts](#available-scripts)
13+
- [Usage with Docker](#usage-with-docker)
14+
- [Local-Built Development Image](#local-built-development-image)
15+
- [Building Docker Images](#building-docker-images)
16+
- [Debugging Notes](#debugging-notes)
17+
- [Debugging Traditional Web Apps in VSCode](#debugging-traditional-webapps-in-vscode)
18+
- [References](#references)
19+
20+
### Dependencies
21+
22+
The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.
23+
24+
1. Windows 64-bit OS
25+
2. nvm version 1.1.12 (for Windows)
26+
3. NodeJS 16.14.2 installed using nvm
27+
- node v20.15.0
28+
- npm v10.7.0
29+
4. yarn v1.22.22
30+
- installed using NodeJS
31+
3. NodeJS modules (installed using yarn)
32+
- gulp v5.0.0
33+
- browser-sync v3.0.3
34+
35+
36+
## Installation
37+
38+
1. Clone this repository.<br>
39+
`https://github.com/weaponsforge/livereload-basic.git`
40+
41+
2. Install dependencies.<br>
42+
`yarn install`
43+
44+
45+
## Usage
46+
47+
These steps use **Node** and **Yarn** to run the development app.
48+
49+
1. Run the localhost static website development environment.<br>
50+
`yarn dev`
51+
52+
2. Edit the existing static files from the **./public** directory and wait for live reload. Your updates will reflect on the web browser.
53+
54+
3. To include new static website files on live reload:
55+
- Create new static (.html, .js, .css) files inside the **./public** directory.
56+
- Refresh the web browser.
57+
- Restart the web server if updates don't show after a while.<br>
58+
`yarn dev`
59+
60+
4. Run the production static website (does not use live reload).<br>
61+
`yarn start`
62+
63+
## Available Scripts
64+
65+
### `npm run dev`
66+
67+
Runs the Gulp and Browser-Sync tasks, launching the local website for development mode.
68+
69+
### `npm start`
70+
71+
Starts a simple ExpressJS web server serving the static website app from its static middleware.
72+
73+
## Usage with Docker
74+
75+
### Local-Built Development Image
76+
77+
1. Build the Docker image for local development.
78+
- `docker compose -f docker-compose.dev.yml build`
79+
> **INFO:** Do this step only once or after installing new packages in the package.json file.
80+
- Refer to the [Development Image](#development-image) section for more information.
81+
82+
2. Run the development image.<br>
83+
`docker compose -f docker-compose.dev.yml up`
84+
85+
3. Refer to the [Usage](#usage) section steps **# 2 - # 3** for local development.
86+
87+
4. Stop and exit the development container.<br>
88+
`docker compose -f docker-compose.dev.yml down`
89+
90+
## Building Docker Images
91+
92+
### Development Image
93+
94+
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:
95+
96+
`docker compose -f docker-compose.dev.yml build`
97+
98+
### Production Image
99+
100+
The **production** Docker image contains the static website running in an nginx container for minimal production website build. Build it with:
101+
102+
`docker compose -f docker-compose.prod.yml build`
103+
104+
## Debugging Notes
105+
106+
<details>
107+
<summary id="debugging-traditional-webapps-in-vscode">
108+
<b>Debugging Traditional Web Apps in VSCode</b>
109+
</summary>
110+
111+
<br>
112+
113+
> Debugging regular (traditional) web apps with VSCode is similar to debugging and adding breakpoints from the Chrome or Edge browser's **Sources** tab.
114+
115+
> [!TIP]
116+
> 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).
117+
118+
1. Add breakpoints in the JavaScript (`*.js`) files inside the website's directory entry point at the `"public/"` directory.
119+
120+
2. Copy the following VSCode launch configurations to the `/.vscode/launch.json` file's `configurations[]` array:
121+
122+
**Debug with MS Edge**
123+
124+
```
125+
{
126+
"name": "Debug Regular App in Edge",
127+
"request": "launch",
128+
"type": "msedge",
129+
"url": "http://localhost:3000",
130+
"pathMapping": {
131+
"/": "${workspaceFolder}/public",
132+
}
133+
}
134+
```
135+
136+
**Debug with Chrome**
137+
138+
```
139+
{
140+
"name": "Debug Regular App in Chrome",
141+
"request": "launch",
142+
"type": "chrome",
143+
"url": "http://localhost:3000",
144+
"pathMapping": {
145+
"/": "${workspaceFolder}/public",
146+
}
147+
}
148+
```
149+
150+
3. Run the app using Node or from a container.
151+
152+
4. Select a debugger to run in VSCode. Press `Ctrl + Shift + D`
153+
- Select `"Debug Regular App in Edge"` to launch an Edge web browser.
154+
- Select `"Debug Regular App in Chrome"` to launch a Chrome web browser.
155+
156+
5. Run and use the app from the launched browser instance on **step # 4**.
157+
158+
</details>
159+
160+
## References
161+
162+
[[1]](https://github.com/ciatph/webtools) - live reload using gulp v.3.9.1 (older gulp version)<br>
163+
[[2]](https://trello.com/c/gFN68i6k) - gulp notes (trello)
164+
165+
@weaponsforge<br>
166+
20200630<br>
167+
20241006

‎config/nginx.conf

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Minimal nginx configuration for running locally in containers
2+
server {
3+
listen 3000;
4+
5+
root /usr/share/nginx/html;
6+
include /etc/nginx/mime.types;
7+
index index.html index.html;
8+
9+
server_name localhost;
10+
server_tokens off;
11+
12+
# Rewrite all React URLs/routes to index.html
13+
# location / {
14+
# try_files $uri $uri/ /index.html =404;
15+
# }
16+
17+
# Other error pages
18+
error_page 500 502 503 504 /50x.html;
19+
location = /50x.html {
20+
root /usr/share/nginx/html;
21+
}
22+
}

‎docker-compose.dev.yml

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
services:
2+
weaponsforge.livereload-basic:
3+
container_name: weaponsforge-localhost-basic
4+
image: weaponsforge/livereload-basic:latest
5+
build:
6+
context: .
7+
dockerfile: Dockerfile
8+
target: development
9+
volumes:
10+
- .:/opt/app
11+
- /opt/app/node_modules
12+
ports:
13+
- "3000:3000"
14+
- "9229:9229"
15+
# Enable USE_POLLING if working in Windows WSL2 to enable hot reload
16+
environment:
17+
- IS_DOCKER=true
18+
# - USE_POLLING=true

‎docker-compose.prod.yml

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
services:
2+
weaponsforge.livereload-basic.prod:
3+
container_name: weaponsforge-localhost-basic-prod
4+
image: weaponsforge/livereload-basic:prod
5+
build:
6+
context: .
7+
dockerfile: Dockerfile
8+
target: production
9+
volumes:
10+
- .:/opt/app
11+
- /opt/app/node_modules
12+
ports:
13+
- "3000:3000"

0 commit comments

Comments
 (0)