I just started learning Express for nodejs using jade as a rendering engine, i have views and routes
Here are my views
layout.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(href='/themes/bootstrap.min.css', rel='stylesheet')
script(src='/javascripts/mygridwidjet.js', type='text/javascript')
body
block content
index.jade
extends layout
block content
h1= title
p Welcome to #{title}
.content-container-fluid
.row
.cols-sample-area
#Grid
and here are my routes
index.js
exports.index = function(req, res){
res.render('index', { title: 'Football Archive' });
};
and i wrote my client side javascript which interacts with the #Grid
now i am really confused about where to put the client side javascript.
ps: i am a total noob, sorry if this question is so stupid.
You must put it in the folder public/ (create it if it does not exists)
myapp
|
|-node_modules/
| |-express/
| |-socket.io/
|
|-public/
| |-javascripts/
| | |-mygridwidjet.js
| |-...
|
|-server.js
Here is a more complex example (my app) : https://github.com/CraftYourModCorporation/RedstoneHub
Related
Since this is my first time working with Jade, I am having a lot of issues.
My goal is this:
I have a simple server with a bunch of tickets. These tickets are meant to be served as a simple list, with an icon on their left indicating the status of that ticket (e.g. closed or open). I would like to use Jade for this along with Node.js' Express framework.
Here's what I tried so far:
jade layout
<!-- layout.jade -->
doctype html
html
head
title= title
link(rel='stylesheet', href='/src/style.css')
link(rel='stylesheet', href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')
body
block content
Main jade file
<!-- index.jade -->
<!-- index.jade -->
extends layout
block content
ul
each ticket in tickets
li
- const status = ticket.status === 'file' ? ['fas', 'fa-file-alt'] : ['far', 'fa-folder-open']
i(class=status)
a(href='#')= ticket.description
The problem is that this gives a weird box like the icon doesn't exist.
This is what the result looks like:
How can I fix the icon not showing up?
Help appreciated. Thanks.
I think you got the class names wrong:
p Test
| ##
span.fas.fa-file-alt
| !!
span.far.fa-folder-open
| ##
-
const tickets = [
{ status: "file", description: "Hello World"},
{ status: "x", description: "test"}]
each ticket in tickets
li(style="list-style-type:none")
- const status = ticket.status === "file" ? [ "fa", "fa-file"] : [ "fa", "fa-folder-open"]
i(class=status)
|
a(href="#")=ticket.description
produces:
The link to the Fontawesome css file has to be there. I tried with both versions 4.4 and 4.7 and the results were the same.
I am using express plugin in nodeJS
app.get('/',function(req,res) {
res.render('main', {
pageTitle: "заголовок",
header: "хедер"
});
});
I set jade for view engine
app.set('view engine','jade');
And this is my simple jade view
doctype html
html(lang="en")
head
title= pageTitle
body
h1= header
But i get unknown symbols in my browser.
http://pastenow.ru/Upload/Paste/FY0W.png
In your jade code , try to specify charset
doctype html
html(lang="en")
head
meta(charset="UTF-8")
title= pageTitle
body
h1= header
I'm broadly following this tutorial on Express, Mongo and Jade, and although I've successfully fetched back some data from mongo, but jade isn't rendering my page.
http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
Snippets are:
app.js:
app.get('/', function(req, res) {
employeeProvider.findAll(function(error, emps) {
// adding logging here shows that 'title' and 'emps' are correctly populated
res.render('index', { title:'Employees', employees:emps });
});
});
layout.jade:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
index.jade:
extends layout
block content
h1= title
div
each employee in employees
div.employee
div.created_at= employee.created_at
div.title= employee.title
div.name= employee.name
When I extract the source from the page displayed in the browser, it just shows this:
<!DOCTYPE html><html><head><title>Employees</title><link rel="stylesheet" href="/stylesheets/style.css"></head><body></body></html>
In fact, nothing I put in jade.index to simplify it seems to get rendered. eg this also renders a blank page:
index.jade:
extends layout
block content
h1= title
Check again the tutorial and follow it (realy), since your code is diferent...
http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
The index.jade should be:
extends layout
block content
h1= title
#employees
- each employee in employees
div.employee
div.created_at= employee.created_at
div.title= employee.title
div.name= employee.name
a(href="/employee/new")!= "Add New Employee"
There are some needed css over #employees and
the each loop needs a - before itself.
This is my file structure:
http://i.imgur.com/XleRVbc.png
Inside views, I have layout.jade that has the following code:
doctype 5
html
head
title= title
link(rel='stylesheet', href='../bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='../bootstrap/css/bootstrap-responsive.min.css')
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
script(src='../bootstrap/js/bootstrap.min.js')
body
block content
This is index.jade:
extends layout
block content
div.top
form.form-horizontal(method="post", id="loginForm")
label Username
input.span3(id="username", type="text", name="User", placeholder="Enter your username")
label Password
input.span3(id="password", type="password", name="Password")
input.btn(type="submit", value="Log In")
div.container
div.content
table.table.table-striped
thead
tr
th Table
th Heading
tbody
tr
td Blah
td Test
tr
td Hello
td World
div.footer
But it seems like the CSS doesn't get applied because the page looks like:
http://i.imgur.com/8CjRlKC.png
The css is in the folder called bootstrap/css
Are you using express? If so, it seems that you are missing a public folder in your file structure. Usually you have something like:
package.json
app.js
node_modules/
|- ...
public/
|-img/
|-css/
|-js/
routes/
views/
..and you let express know about these file via:
var app = module.exports = express();
...
app.use(express.static(__dirname + '/public'));
Try adding that line of code to app.js if it isnt already there, creating the public folder, moving the bootstrap folder there, and referencing it via just link(rel='stylesheet', href='bootstrap/css/bootstrap.min.css') in the jade
Try using an absolute path instead of a relative one. Relative paths can be confusing because they are relative to app.js instead of the view.
Change
link(rel='stylesheet', href='../bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='../bootstrap/css/bootstrap-responsive.min.css')
To
link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')
Also make sure you are properly serving static files with a line like the following in your app.js:
app.use(express.static(path.join(__dirname, 'bootstrap')));
I'm trying to understand how Express and Jade works.
First of all, am I doing it right when I'm using layout.jade as a template file (header, body, footer) and using different files to show information in the body (see examples below)?
The code works fine, but i'm unsure if this is the right way to do stuff in Express. If I should keep going with this structure, how can I link to other files (eg.About.jade) internally from for example index.jade, to show that file instead of index.jade?
Thanks in advance!
layout.jade:
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js')
script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js')
script(type='text/javascript', src='/javascripts/external.js')
// Header
header#header
// Navigation
nav#nav
// Navigation code (ul, li etc)...
// Sidebar
aside#sidebar
// Sidebar code...
// Body
body!= body
index.jade:
!!! 5
html
head
title= title
section#wrapper
img.imageStyle(src = '/images/test1.png')
// And so on...
About.jade:
// You get it...
I think what you're looking for are view rendering routes in express:
http://expressjs.com/en/guide/using-template-engines.html
So you can set up something like this:
app.get('/', function(req, res){
res.render('index.jade', { title: 'index' });
});
app.get('/about', function(req, res){
res.render('about.jade', { title: 'about' });
});
To link from one to the other, once you have the proper routes configured, you can just do something like:
a(href='/') index
a(href='/about') about
Update Also, you don't need this repeated again in index.
!!! 5
html
head
title= title
additionally to what Wes Freeman wrote you can also include other jade templates in your jade file.
that way you could have your header.jade, footer.jade and include them in your about.jade file. here's the include documentation from jade:
https://github.com/visionmedia/jade#a13
that way you only have to change the header.jade file if you add for example script or stylesheet tags that should be on every page.