tailwindcss boilerplate is now added to gen3-express.

OurCodeBase · OurCodeBase · commit ed0e51955af3 · 2024-10-03T00:13:24.000+05:30
diff --git a/bin/gen3-express.js b/bin/gen3-express.js
@@ -7,7 +7,7 @@ const signale = require('signale')
 const { program } = require('commander')
 
 // path of template.
-const template = path.resolve(__dirname, '../template')
+let template = path.resolve(__dirname, '../template')
 
 // change package name of a node package.
 // @param {string} name - new name of node package.
@@ -39,8 +39,13 @@ async function create_app(app_name) {
 program
   .version('1.0.0')
   .argument('<app-name>', 'name to create new app.')
-  .action(async (app_name) => {
+  .option('-t, --tailwindcss', 'To add tailwindcss files.')
+  .action(async (app_name, options) => {
     signale.time()
+    if (options.tailwindcss) {
+      signale.info('You have selected tailwind boilerplate.')
+      template = path.resolve(__dirname, '../tailwind')
+    }
     // check if folder already exist.
     if (!fse.existsSync(app_name)) {
       signale.await(`${app_name} app is on the way.`)
diff --git a/package-lock.json b/package-lock.json
diff --git a/tailwind/app.js b/tailwind/app.js
@@ -0,0 +1,31 @@
+const path = require('path')
+const express = require('express')
+
+const app = express()
+const port = 3000
+
+app.set('view engine', 'ejs')
+app.set('views', path.join(__dirname, 'views'))
+app.use(express.static('public'))
+app.use('/colors', express.static(
+  path.join(__dirname, 
+    'node_modules', 
+    'material-dynamic-colors', 
+    'dist', 
+    'cdn'
+  )
+))
+
+app.get('/', (req, res) => res.render('home'))
+
+app.listen(port, () => {
+  /**
+   * The above code is exclusivly for dev purpose.
+   * You can replace this function.
+   */
+  const netface = require('./utils/netface')
+  const linkfaces = netface.ipv4s()
+  linkfaces.forEach((face) => {
+    console.info(`http://${face}:${port}`)
+  })
+})
diff --git a/tailwind/package.json b/tailwind/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "express-app",
+  "version": "1.0.0",
+  "main": "app.js",
+  "scripts": {
+    "server": "nodemon app.js",
+    "sync": "browser-sync start --config sync.js",
+    "tailwind": "npx tailwindcss -i public/css/style.css -o public/css/tailwind.css --watch",
+    "dev": "concurrently --kill-others \"npm run server\" \"npm run sync\" \"npm run tailwind\""
+  },
+  "dependencies": {
+    "ejs": "^3.1.10",
+    "express": "^4.21.0",
+    "material-dynamic-colors": "^1.1.2"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.7",
+    "concurrently": "^9.0.1",
+    "browser-sync": "^3.0.3",
+    "tailwindcss": "^3.4.13"
+  }
+}
diff --git a/tailwind/public/css/style.css b/tailwind/public/css/style.css
@@ -0,0 +1,6 @@
+@font-face { font-family: sans; src: url(fonts/sans.woff); }
+h1 { font-family: sans; }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
diff --git a/tailwind/public/fonts/sans.woff b/tailwind/public/fonts/sans.woff
diff --git a/tailwind/sync.js b/tailwind/sync.js
@@ -0,0 +1,7 @@
+module.exports = {
+  proxy: 'http://localhost:3000',
+  files: ["views/**/*.ejs", "public/**/*.{css,js}"],
+  port: 3001,
+  open: false,
+  notify: false
+}
diff --git a/tailwind/tailwind.config.js b/tailwind/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./views/*.ejs"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/tailwind/utils/netface.js b/tailwind/utils/netface.js
@@ -0,0 +1,20 @@
+const os = require('os')
+
+/**
+ * This contains all available ipv4 ip address.
+ * @returns {Object[]} netfaces - All ipv4 ip address.
+ * */
+const ipv4s = () => {
+  const netfaces = [] 
+  const interfaces = os.networkInterfaces()
+  for (const key of Object.keys(interfaces)) {
+    for (const interface of interfaces[key]) {
+      if (interface.family == 'IPv4'){
+        netfaces.push(interface.address)
+      }
+    }
+  }
+  return netfaces
+}
+
+module.exports = { ipv4s }
diff --git a/tailwind/views/home.ejs b/tailwind/views/home.ejs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title></title>
+    <link href="css/tailwind.css" rel="stylesheet">
+  </head>
+  <body>
+    <h1 class="text-3xl font-bold underline m-60">Hello World!</h1>
+  </body>
+</html>
