Improved the Docker deployment process, plus switched to a new Apline image

Dockerfile

@@ -1,30 +1,27 @@
-# build stage
-FROM node:lts-alpine as build-stage
+FROM node:lts-alpine
 
-WORKDIR /app
+# Define some ENV Vars
+ENV PORT 80
+ENV DIRECTORY /app
+ENV IS_DOCKER true
 
+# Create and set the working directory
+WORKDIR ${DIRECTORY}
+
+# Copy over both 'package.json' and 'package-lock.json' (if available)
 COPY package*.json ./
-RUN yarn install --frozen-lockfile
 
+# Install project dependencies
+RUN yarn
+
+# Copy over all project files and folders to the working directory
 COPY . .
+
+# Build initial app for production
 RUN yarn build
 
-# production stage
-FROM alpine:3.11
-
-ENV USER darkhttpd
-ENV GROUP darkhttpd
-ENV GID 911
-ENV UID 911
-ENV PORT 8080
-
-RUN addgroup -S ${GROUP} -g ${GID} && adduser -D -S -u ${UID} ${USER} ${GROUP} && \
-  apk add -U --no-cache su-exec darkhttpd
-
-COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist /www/
-COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist/assets /www/default-assets
-COPY entrypoint.sh /entrypoint.sh
-
+# Expose given port
 EXPOSE ${PORT}
-VOLUME /www/assets
-ENTRYPOINT ["/bin/sh", "/entrypoint.sh"]
+
+# Finally, run start command to serve up the built application
+CMD [ "yarn", "build-and-start"]

package.json

@@ -5,13 +5,16 @@
     "start": "node server",
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint --fix"
+    "lint": "vue-cli-service lint --fix",
+    "build-watch": "vue-cli-service build --watch",
+    "build-and-start": "npm-run-all --parallel build start"
   },
   "dependencies": {
     "axios": "^0.21.1",
     "connect": "^3.7.0",
     "crypto-js": "^4.0.0",
     "highlight.js": "^11.0.0",
+    "npm-run-all": "^4.1.5",
     "prismjs": "^1.23.0",
     "register-service-worker": "^1.6.2",
     "remedial": "^1.0.8",
@@ -70,4 +73,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

server.js

@@ -1,13 +1,68 @@
 const connect = require('connect');
 const serveStatic = require('serve-static');
 
-const port = process.env.PORT || 3002;
+const util = require('util');
+const dns = require('dns');
+const os = require('os');
+
+const port = process.env.PORT || 80;
 
 /* eslint no-console: 0 */
+const printWelcomeMessage = () => {
+  getLocalIp().then(({ address }) => {
+    const ip = address || 'localhost';
+    console.log(overComplicatedMessage(ip, port));
+  });
+}
+
+const getLocalIp = () => {
+  const dnsLookup = util.promisify(dns.lookup);
+  return dnsLookup(os.hostname());
+}
+
+const overComplicatedMessage = (ip, port) => {
+  let msg = '';
+  const chars = {
+    RESET: '\x1b[0m',
+    CYAN: '\x1b[36m',
+    GREEN: '\x1b[32m',
+    BLUE: '\x1b[34m',
+    UNDERLINE: '\033[4m',
+    BOLD: '\033[1m',
+    BR: '\n',
+  };
+  const stars = (count) => new Array(count).fill('*').join('');
+  const line = (count) => new Array(count).fill('━').join('');
+  const blanks = (count) => new Array(count).fill(' ').join('');
+  if (process.env.IS_DOCKER) {
+    const containerId = process.env.HOSTNAME || undefined;
+    msg = `${chars.BLUE}${stars(91)}${chars.BR}${chars.RESET}`
+      + `${chars.CYAN}${chars.BOLD}Welcome to Dashy! 🚀${chars.RESET}${chars.BR}`
+      + `${chars.GREEN}Your new dashboard is now up and running `
+      + `${containerId ? `in container ID ${containerId}` : 'with Docker'}${chars.BR}`
+      + `After updating your config file, run '${chars.UNDERLINE}docker exec -it `
+      + `${containerId || '[container-id]'} yarn build`
+      + `${chars.RESET}${chars.GREEN}' to rebuild${chars.BR}`
+      + `${chars.BLUE}${stars(91)}${chars.BR}${chars.RESET}`;
+  } else {
+    msg = `${chars.GREEN}┏${line(75)}┓${chars.BR}`
+      + `┃ ${chars.CYAN}${chars.BOLD}Welcome to Dashy! 🚀${blanks(55)}${chars.GREEN}┃${chars.BR}`
+      + `┃ ${chars.CYAN}Your new dashboard is now up and running at ${chars.UNDERLINE}`
+      + `http://${ip}:${port}${chars.RESET}${blanks(20 - ip.length)}${chars.GREEN}┃${chars.BR}`
+      + `┃ ${chars.CYAN}After updating your config file, run '${chars.UNDERLINE}yarn build`
+      + `${chars.RESET}${chars.CYAN}' to rebuild the app${blanks(6)}${chars.GREEN}┃${chars.BR}`
+      + `┗${line(75)}┛${chars.BR}${chars.BR}`;
+  }
+  return msg;
+}
+
 try {
   connect()
     .use(serveStatic(`${__dirname}/dist`))
-    .listen(port, () => console.log(`Boom, app is running on port ${port} 🚀`));
+    .listen(port, () => {
+      try { printWelcomeMessage(port); }
+      catch (e) { console.log('Dashy is Starting...'); }
+    });
 } catch (error) {
-  console.log('Something fucked up', error);
+  console.log('Sorry, an error occurred ', error);
 }