switched to minimal live reload server.

README.md

@@ -88,7 +88,7 @@ To know about the project structure read about files included in this code block
 - Excellent terminal user interface ✅
 - Post this project to npmjs website. ✅
 - Add Tailwind CSS support. ✅
-- Use a lightweight server for EJS live reloading. ⏩
+- Use a lightweight server for EJS live reloading. ✅
 - Prompt `package.json` file's details from user. ⏩ 
 - Custom local template feature ⏩
 

docs/readme.md

@@ -95,7 +95,7 @@ To know about the project structure read about files included in this code block
 - Excellent terminal user interface ✅
 - Post this project to npmjs website. ✅
 - Add Tailwind CSS support. ✅
-- Use a lightweight server for EJS live reloading. ⏩
+- Use a lightweight server for EJS live reloading. ✅
 - Prompt `package.json` file's details from user. ⏩ 
 - Custom local template feature ⏩
 

tailwind/app.js

@@ -4,6 +4,20 @@ const express = require('express')
 const app = express()
 const port = 3000
 
+/**
+ * Code snippet for hot reloadings.
+ * You can wipe this at production.
+ */
+const livereload = require("livereload")
+const connectlivereload = require("connect-livereload")
+app.use(connectlivereload())
+const livereloadserver = livereload.createServer()
+livereloadserver.watch(path.join(__dirname, "views"))
+livereloadserver.watch(path.join(__dirname, "public"))
+livereloadserver.server.once("connection", () => {
+  setTimeout(() => livereloadserver.refresh("/"), 100)
+})
+
 app.set('view engine', 'ejs')
 app.set('views', path.join(__dirname, 'views'))
 app.use(express.static('public'))
@@ -20,8 +34,8 @@ app.get('/', (req, res) => res.render('home'))
 
 app.listen(port, () => {
   /**
-   * The above code is exclusivly for dev purpose.
-   * You can replace this function.
+   * Code snippet for dev purpose.
+   * You can wipe this at production.
    */
   const netface = require('./utils/netface')
   const linkfaces = netface.ipv4s()

tailwind/package.json

@@ -15,8 +15,9 @@
   },
   "devDependencies": {
     "nodemon": "^3.1.7",
+    "livereload": "^0.9.3",
+    "connect-livereload": "^0.6.1",
     "npm-run-all2": "^7.0.0",
-    "browser-sync": "^3.0.3",
     "tailwindcss": "^3.4.13"
   }
 }

template/app.js

@@ -4,6 +4,20 @@ const express = require('express')
 const app = express()
 const port = 3000
 
+/**
+ * Code snippet for hot reloadings.
+ * You can wipe this at production.
+ */
+const livereload = require("livereload")
+const connectlivereload = require("connect-livereload")
+app.use(connectlivereload())
+const livereloadserver = livereload.createServer()
+livereloadserver.watch(path.join(__dirname, "views"))
+livereloadserver.watch(path.join(__dirname, "public"))
+livereloadserver.server.once("connection", () => {
+  setTimeout(() => livereloadserver.refresh("/"), 100)
+})
+
 app.set('view engine', 'ejs')
 app.use(express.static('public'))
 app.use('/colors', express.static(
@@ -19,8 +33,8 @@ app.get('/', (req, res) => res.render('home'))
 
 app.listen(port, () => {
   /**
-   * The above code is exclusivly for dev purpose.
-   * You can replace this function.
+   * Code snippet for dev purpose.
+   * You can wipe this at production.
    */
   const netface = require('./utils/netface')
   const linkfaces = netface.ipv4s()

template/package.json

@@ -14,7 +14,8 @@
   },
   "devDependencies": {
     "nodemon": "^3.1.7",
-    "npm-run-all2": "^7.0.0",
-    "browser-sync": "^3.0.3"
+    "livereload": "^0.9.3",
+    "connect-livereload": "^0.6.1",
+    "npm-run-all2": "^7.0.0"
   }
 }