Initial express.js project structure

assets/styles/gargoyle.scss

@@ -1,10 +1,17 @@
-$nav-bar-height: 50px;
+$primary-color: orange;
+$primary-color-highlight: darken($primary-color, 10%);
+
+$nav-bar-height: 60px;
 
 body{
   padding: $nav-bar-height 0 0;
   background: lightgrey;
 }
 
+.container.fluid{
+  max-width: 100%;
+}
+
 #nav-bar{
   position: fixed;
   top: 0;
@@ -13,6 +20,7 @@ body{
   height: $nav-bar-height;
   background: #212121;
   box-shadow: 0 2px 1px rgba(0, 0, 0, .25);
+  color: white;
 
   .nav-bar-left{
     float: left;
@@ -26,12 +34,22 @@ body{
     }
   }
 
+  .site-logo,
   .nav-link a{
-    color: teal;
+    padding: 9px 12px;
+    font-size: 2.5rem;
+  }
+
+  .site-logo{
+    font-weight: bold;
+  }
+
+  .nav-link a{
+    color: $primary-color;
     transition: all 230ms ease-in-out;
 
     &:hover{
-      color: green;
+      color: $primary-color-highlight;
     }
   }
 }

index.js

@@ -0,0 +1,22 @@
+const express = require('express');
+
+// instantiate new express.js app
+const app = express();
+const port = 3000;
+
+// load the template engine
+app.set('view engine', 'twig');
+
+// enable static file serving
+app.use(express.static('public'));
+
+// load route handlers
+const homeRoutes = require('./src/routes/home');
+
+// register route handlers
+app.get('/', homeRoutes.getIndex);
+
+// start app
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`);
+});

package.json

@@ -4,6 +4,7 @@
   "description": "Self-hosted inventory tracker",
   "main": "index.js",
   "scripts": {
+    "start": "node index.js",
     "gulp": "gulp",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

src/routes/home.js

@@ -0,0 +1,4 @@
+// GET - /
+exports.getIndex = function (req, res) {
+  res.render('index.twig');
+};

views/index.twig

@@ -1,5 +1,7 @@
 {% extends 'layout.twig' %}
 
+{% block title %}Home{% endblock %}
+
 {% block content %}
 
 <!-- page header -->