prepare for docker

.dockerignore

@@ -0,0 +1,4 @@
+/.idea
+/dist
+/node_modules
+/data/kuma.db

README.md

@@ -1,10 +1,12 @@
 # Uptime Kuma
 
+It is a self-hosted monitoring tool like "Uptime Robot".
+
 # Features
 
 * Monitoring uptime for HTTP(s) / TCP / Ping.
 * Fancy, Reactive, Fast UI/UX.
-* Notifications via Webhook, Telegram, Discord and email (SMTP).
+* Notifications via Webhook, Telegram, Discord and email (SMTP). 
 * 20 seconds interval.
 
 # How to Use
@@ -17,7 +19,7 @@ One-click Deploy to DigitalOcean
 
 # Motivation
 
-* I was looking for a self-hosted monitoring tool like "Uptime Robot", but it is hard to find a suitable one.
+* I was looking for a self-hosted monitoring tool like "Uptime Robot", but it is hard to find a suitable one. One of the close one is statping. Unfortunately, it is not stable and unmaintained. 
 * Want to build a fancy UI.
 * Learn Vue 3 and vite.js.
 * Show the power of Bootstrap 5. 

dockerfile

@@ -0,0 +1,10 @@
+FROM node:14
+
+WORKDIR /app
+COPY . .
+RUN npm install
+RUN npm run build
+
+EXPOSE 3001
+VOLUME ["/app/data"]
+CMD ["npm", "run", "start-server"]

src/mixins/socket.js

@@ -29,7 +29,14 @@ export default {
     },
 
     created() {
-        socket = io(":3001", {
+        let wsHost;
+        if (localStorage.dev === "dev") {
+            wsHost = ":3001"
+        } else {
+            wsHost = ""
+        }
+
+        socket = io(wsHost, {
             transports: ['websocket']
         });
 

src/pages/EditMonitor.vue

@@ -27,10 +27,11 @@
                         <input type="url" class="form-control" id="url" v-model="monitor.url" pattern="https?://.+" required>
                     </div>
 
-                <div class="mb-3" v-if="monitor.type === 'keyword' ">
-                    <label for="keyword" class="form-label">Keyword <span style="color: #AAA">(search keyword in plain html response)</span></label>
-                    <input type="text" class="form-control" id="keyword" v-model="monitor.keyword" required>
-                </div>
+                    <div class="mb-3" v-if="monitor.type === 'keyword' ">
+                        <label for="keyword" class="form-label">Keyword</label>
+                        <input type="text" class="form-control" id="keyword" v-model="monitor.keyword" required>
+                        <div class="form-text">Search keyword in plain html response and it is case-sensitive</div>
+                    </div>
 
                     <div class="mb-3" v-if="monitor.type === 'port' || monitor.type === 'ping' ">
                         <label for="hostname" class="form-label">Hostname</label>

src/pages/Settings.vue

@@ -53,6 +53,7 @@
             <div class="col-md-6">
                 <h2>Notifications</h2>
                 <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
+                <p v-else>Please assign the notification to monitor(s) to get it works.</p>
 
                 <ul class="list-group mb-3" style="border-radius: 1rem;">
                     <li  class="list-group-item"  v-for="notification in $root.notificationList">