I have created a simple node app using the express framework using JADE templating.
All was well in the learning process until I came to try and run some client-side js which I cannot figure out how to do.
Is there something I need to do in my app/index.js to tell node about them? Any help would be much appreciated.
Thanks
index.jade
extends layout
block content
h1 Title
script.
console.log("I am running on the client");
app.js
var http = require("http")
var express = require("express")
var path = require('path');
var routes = require('./routes/index');
var app = express()
var port = process.env.PORT || 5000
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
var server = http.createServer(app)
server.listen(port)
console.log("http server listening on %d", port)
module.exports = app;
layout.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='/javascripts/jquery-2.1.3.js')
script(src='/javascripts/bootstrap.js')
body
div(class="navbar navbar-inverse navbar-fixed-top")
.container
.navbar-header
button.navbar-toggle(type="button", data-toggle="collapse", data-target=".navbar-collapse")
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href="/") Twitter
div(class="collapse navbar-collapse")
ul(class="nav navbar-nav")
li.active
a(href="#") Home
li
a(href="#about") About
li
a(href="#contact") Contact
block content
Any inline scripts can be run like so
script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
from Docs.
Any external JS file can be loaded like so:
script(src="/path/to/script.js")
Also, you may want to be sure that you're actually using your layout file. Jade recommends doing something like this:
extends ./layout.jade
Where you have a path to the file and have the extension attached. Though the extension may be optional because you specify the jade engine in app.js
.
Let me know this helps!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With