restructure, docker optimize, package updates

.dockerignore

@@ -1,3 +1,2 @@
-README.md
-.gitignore
-client/README.md
+**/dist
+**/node_modules

.gitignore

@@ -1,4 +1,2 @@
-node_modules
-client/node_modules
-client/dist
-client/.eslintcache
+**/dist
+**/node_modules

.prettierignore

@@ -0,0 +1,4 @@
+package-lock.json
+**/dist
+**/.terraform
+**/node_modules

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"jsxSingleQuote": true,
+	"plugins": ["@trivago/prettier-plugin-sort-imports"],
+	"importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"]
+}

Dockerfile

@@ -1,5 +1,19 @@
+FROM node:lts-slim AS build
+
+COPY client/package*.json /client/
+RUN npm --prefix ./client install ./client
+COPY server/package*.json /server/
+RUN npm --prefix ./server install ./server
+
+COPY . .
+
+RUN npm --prefix ./server run build
+RUN npm --prefix ./client run build
+
 FROM node:lts-slim
 
+COPY --from=build /dist /app
+
 RUN apt-get update && \
     apt-get install -y --no-install-recommends \
         iperf3 apt-transport-https ca-certificates curl gnupg \
@@ -11,25 +25,11 @@ RUN apt-get update && \
     apt-get install -y --no-install-recommends speedtest \
         && \
     rm -rf /var/lib/apt/lists/* \
-	    && \
-    mkdir /app /build-tmp /app/client
-
-COPY . /build-tmp/
-
-RUN cd /build-tmp \
-        && \
-    npm run deploy \
-        && \
-    cp -rt /app/ *.json node_modules server.js \
-        && \
-    cp -r client/dist /app/client/ \
-	    && \
-    rm -rf /build-tmp
 
 USER node
 
 WORKDIR /app
 
 EXPOSE 5000
 
-ENTRYPOINT [ "npm", "run", "start"]
+ENTRYPOINT [ "node", "index.js"]

README.md

@@ -6,39 +6,47 @@ Node.js service with React frontend using Material-UI.
 Example use-case: test "wired speed" of a computer connected via hard-wired ethernet from any device on your network.
 
 ### docker install
------
-* `docker run -d -p 5000:5000 --name speedtest-app bwmoran/speedtest-app`
-    * port can be changed via environment variable **PORT**: `-p PORT=3000`
-* application should be running at <http://localhost:5000>
 
+---
+
+- `docker run -d -p 5000:5000 --name speedtest-app bwmoran/speedtest-app`
+  - port can be changed via environment variable **PORT**: `-p PORT=3000`
+- application should be running at <http://localhost:5000>
 
 ### old-fashioned install
------
+
+---
+
 **dependencies**
-* Latest stable Node.js runtime release with npm
-* Git
-* Speedtest-CLI (<https://www.speedtest.net/apps/cli>)
-   * **note**: if using Windows, you need to add the directory that contains speedtest.exe to system Path, so that it can be run globally. (for example: `C:\Projects\ookla-speedtest-1.0.0-win64\`)
-* iperf3
-   * **note**: if using Windows, you need to add the directory that contains iperf3.exe to system Path, so that it can be run globally. (for example: `C:\Projects\iperf-3.1.3-win64\`)
+
+- Latest stable Node.js runtime release with npm
+- Git
+- Speedtest-CLI (<https://www.speedtest.net/apps/cli>)
+  - **note**: if using Windows, you need to add the directory that contains speedtest.exe to system Path, so that it can be run globally. (for example: `C:\Projects\ookla-speedtest-1.0.0-win64\`)
+- iperf3
+  - **note**: if using Windows, you need to add the directory that contains iperf3.exe to system Path, so that it can be run globally. (for example: `C:\Projects\iperf-3.1.3-win64\`)
 
 **installation**
-* clone repository
-    * `git clone https://github.com/moranbw/speedtest-app.git`
-* navigate to application directory
-* install dependencies and build client
-    * `npm run deploy`
-* run application
-    * `npm run start`
-* application should be running at <http://localhost:5000>
 
+- clone repository
+  - `git clone https://github.com/moranbw/speedtest-app.git`
+- navigate to application directory
+- install dependencies and build client
+  - `npm run deploy`
+- run application from `dist`
+  - `node index.js`
+- application should be running at <http://localhost:5000>
 
 ### proxy example
------
+
+---
+
 set environment variable **PROXY_PATH**
-* `docker run -d -p 5000:5000 -e PROXY_PATH="speedtest" --name speedtest-app bwmoran/speedtest-app`
+
+- `docker run -d -p 5000:5000 -e PROXY_PATH="speedtest" --name speedtest-app bwmoran/speedtest-app`
 
 **nginx**
+
 ```nginx
 location /speedtest/ {
     proxy_pass http://your_ip_or_host:5000;
@@ -48,7 +56,9 @@ location /speedtest/ {
     proxy_set_header X-Forwarded-Proto $scheme;
 }
 ```
+
 **caddy**
+
 ```
 redir /speedtest /speedtest/
 route /speedtest/* {
@@ -57,10 +67,13 @@ route /speedtest/* {
 ```
 
 ### demo
------
-![Screenshot](https://moran-network-static.s3.amazonaws.com/speedtest_app_capture.gif)
 
+---
+
+![Screenshot](https://moran-network-static.s3.amazonaws.com/speedtest_app_capture.gif)
 
 ### other acknowledgements
------
-* "High-Speed Train" emoji logo/favicon is courtesy of the Twitter Emoji (Twemoji) project: <https://github.com/twitter/twemoji>
+
+---
+
+- "High-Speed Train" emoji logo/favicon is courtesy of the Twitter Emoji (Twemoji) project: <https://github.com/twitter/twemoji>

client/README.md

@@ -4,11 +4,11 @@ In the project directory, you can run:
 
 ### `npm run dev`
 
-* Runs the app in the development mode.
-* Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-* If speedtest-app's primary server is running, dev server will proxy requests to it.
-* The page will reload if you make edits.<br>
+- Runs the app in the development mode.
+- Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- If speedtest-app's primary server is running, dev server will proxy requests to it.
+- The page will reload if you make edits.<br>
 
 ### `npm run build`
 
-* Builds the app for production to the `dist` folder.
+- Builds the app for production to the `dist` folder.

client/index.html

@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/logo.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>speedtest</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html> 
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/src/logo.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>speedtest</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.jsx"></script>
+	</body>
+</html>