feat: add sample app

add sample app for traffic

add sample app for traffic

Author: yuanyu90221

.gitignore

@@ -23,3 +23,135 @@ go.work.sum
 
 # env file
 .env
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+./app/node_modules

README.md

@@ -107,4 +107,40 @@ services:
 2. use docker compose command to start
 ```shell
 docker compose up -d
-```
+```
+
+## add web app connect with mongodb
+
+This app will directly load data from mongodb
+
+```shell
+mkdir app
+```
+
+[server.js](./app/server.js)
+
+## target 
+
+![deploy-app-with-mongo](deploy-app-with-mongo.png)
+
+## add new container setup on docker-compose.yml
+
+```yaml
+  app:
+    build:
+      context: .
+      dockerfile: ./app/Dockerfile
+      target: prod
+    container_name: web-app
+    image: web-app
+    networks:
+      - mongo-network
+    environment:
+      MONGO_DB_USERNAME: admin
+      MONGO_DB_PWD: supersecret
+    ports:
+      - 3000:3000
+    depends_on:
+      mongodb:
+        condition: service_healthy
+```

app/.dockerignore

@@ -0,0 +1,2 @@
+README.md
+Dockerfile

app/.nvmrc

@@ -0,0 +1 @@
+20.10.0

app/Dockerfile

@@ -0,0 +1,14 @@
+FROM node:20.10.0 AS base
+RUN mkdir /app
+WORKDIR /app
+COPY ./app /app
+RUN npm i -g pnpm
+RUN pnpm install --prod --frozen-lockfile
+FROM node:20.10.0-alpine AS prod
+RUN mkdir /app
+RUN mkdir -p /app/node_modules
+WORKDIR /app
+USER node
+COPY --from=base /app/server.js /app/index.html /app/
+COPY --from=base /app/node_modules /app/node_modules
+ENTRYPOINT [ "node", "server.js" ]

app/README.md

@@ -0,0 +1,28 @@
+# app
+
+This is the web app that will directly load data from mongodb
+
+## architecture
+
+This app divided into following parts:
+
+1. web client part
+
+2. api server part
+
+## description
+
+* for web client part:
+
+  1. html for render ui 
+
+  2. js for load data from api server
+
+* for api server part:
+
+  logic for listne web request
+
+  logic for loaded data from mongodb
+  
+
+

app/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mongo db loader</title>
+  <style>
+    .container {
+      margin: 40px auto;
+      width: 80%;
+    }
+    hr {
+      width: 400px;
+      margin-left: 0;
+    }
+    h3 {
+      display: inline-block;
+    }
+    #static {
+      color: red;
+    }
+    #dynamic {
+      color: green;
+    }
+  </style>
+  <script>
+    (async function init(){
+      const cont = document.getElementById('container');
+      const response = await fetch('http://localhost:3000/fetch-data', {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        }
+      });
+      const jsonResponse = await response.json();
+      document.getElementById('dynamic').textContent = jsonResponse.data;
+    })()
+  </script>
+</head>
+<body>
+  <div class="container" id="container">
+    <h1>Welcome to this Super sophisticated App</h1>
+    <span>Some static data:</span><h3 id="static">this is hard-coded in index.html</h3>
+    <hr/>
+    <span>Some dynamic data:</span><h3 id="dynamic"></h3>
+    <hr/>
+  </div>
+</body>
+</html>

app/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "deploying-with-docker",
+  "version": "1.0.0",
+  "description": "app with mongo",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "keywords": [],
+  "author": "gson liang",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.20.2",
+    "express": "^4.19.2",
+    "mongodb": "^4.16.0"
+  }
+}