The error i am getting is "undefined is not a function". I think the problem lays in the app.local part about 10 lines into app.js. I am new and following a tutorial and trying
to convert jade into ejs. I have ejs and express-helpers. I have had some issues that were solved because stuff was depreciated. The problem is with the link_to. Any ideas or anybody run into a similar problem
This is my app.js
var express = require('express');
var helpers = require('express-helpers');
var ArticleProvider = require('./articleprovider-memory').ArticleProvider;
var app = module.exports = express();
app.configure(function(){
app.locals({
link_to : helpers.link_to
});
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(require('stylus').middleware({ src: __dirname + '/public' }));
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
var articleProvider= new ArticleProvider();
app.get('/', function(req, res){
articleProvider.findAll( function(error,docs){
res.render('index.ejs', {
title: 'Blog',
articles:docs
});
});
});
and my index.ejs
<html>
<body>
<h1> <%= title %> </h1>
<% for (var i = 0; i < articles.length; i++) {
var article = articles[i]; %>
<%= created_at = article.created_at %> <br>
<%= link_to(title, 'blog/'+article._id) %> <br>
<%= article.body %>
<% } %>
</body>
</html>
THe answer is here https://github.com/tanema/express-helpers
I needed
require('express-helpers')();
didn't know i needed the extra parens
Related
Here's my Server Side code:
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
app.use(express.static('views'));
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
app.get('/',function(req,res){
var title = "PERFORMANCE OVERVIEW";
res.render('Main.html',{name:title});
})
Here's my Client Side code(Main.html):
<div class="row">
<div class="sm-col-12">
<h3 contenteditable="true" style="font-family:BentonSans Medium; text-align:center; color:rgb(0,38,99);"><%= name %></h3>
<hr style="border-top: dotted 2px;color:grey" />
</div>
</div>
The output I am getting on Main.html Page is "<%-name%>". Instead, it should print "PERFORMANCE OVERVIEW". What exactly wrong in this code?
Edit:
I forgot to mention that I have also tried other variants like <%= name%> and {{ name }}. But I am getting the output "<%= name%>" and "{{ name }}" respectively.
changing it to <%= name %> should fix it.
If that doesn't you can try changing app.set('view engine', 'html') to app.set('view engine', 'ejs');, then deleting the following 2 lines.
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
app.get('/',function(req,res){
var title = "PERFORMANCE OVERVIEW" ;
res.render('Main',{name:title}) ;
});
I have always written it this way, so I can't say for sure if you syntax is correct, or if ejs will even work without setting it like this.
Update
Make sure the Main.html file is in a folder called views, and rename this file to Main.ejs.
next change res.render('Main.html',{name:title}); to res.render('main',{name:title});
<%- Outputs the unescaped value into the template
<%= Outputs the value into the template (HTML escaped)
As you are looking to print the value instead use <%= tag so change <%- name%> to <%= name%>
The information can be found here-https://ejs.co/#docs
Change <%- name%> to <%= name%> in your Main.html
const express = require('express');
const bodyParser = require('body-parser');
const port = 5000;
const app = express();
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
app.use(express.static('views'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.get('/', function (req, res) {
var title = "PERFORMANCE OVERVIEW";
res.render('Main.html', { name: title });
});
app.listen(port, console.log(`Server is running on port ${port}`))
Try this and it is rendering HTML page and also accessing the variable you pass in it.
I am trying to use express-handlebars and use partials but I am getting the following error message
The partial header could not be found.
My app.js code looks like as follows.
var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'hbs');
app.get('/', function (req, res) {
res.render('home');
});
app.listen(3000);
This is all working and the express app is running on localhost:3000.
My folder structure is as follows:
|_app.js
|_views_
|_home.hbs
|_layouts_
|_main.hbs
|_partials_
|_header.hbs
main.hbs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
</head>
<body>
{{{body}}}
</body>
</html>
header.hbs
<nav>
Home
Contact
</nav>
home.hbs
{{> header}}
<h1>Hey world!</h1>
Everything works as expected until I try and introduce header.hbs as a partial.
Can anyone see any issue with my code?
Following further investigation I have also tried this, without any success:
// Create `ExpressHandlebars` instance with a default layout.
var hbs = exphbs.create({
// Uses multiple partials dirs, templates in "shared/templates/" are shared
// with the client-side of the app (see below).
partialsDir: [
'views/partials/'
]
});
// Register `hbs` as our view engine using its bound `engine()` function.
app.engine('hbs', hbs.engine);
app.set('view engine', 'hbs');
I believe you are missing the next line:
exphbs.registerPartials(__dirname + '/views/partials');
It was necessary to define the following settings for express-handlebars partials to work.
var handlebars = require('express-handlebars');
app.engine('hbs', handlebars({ extname: '.hbs' }));
app.set('view engine', 'hbs');
Here is the complete code:
var handlebars = require('express-handlebars');
app.engine('hbs', handlebars({ extname: '.hbs' }));
app.set('view engine', 'hbs');
app.get('/', function (request, response) {
response.render('home');
});
I am a newbie to node and express and I am really stuck right now. I want to load a custom script.js form the public folder but it doesnt seem to load. Nothing in the network tab, no errors in the console. When I to go the url: localhost:3000/javascripts/script.js, I am seeing the code. I tried every answer given on SO, but nothing seems to work. Using the express generator. What am I doing wrong here.
See code:
app.js
var express = require('express');
var path = require('path');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
index.ejs file
<html>
<head>
<!-- include head -->
<% include partials/head.ejs %>
</head>
<body>
<% include partials/header.ejs %>
<% include partials/footer.ejs %>
<script scr="/javascripts/script.js"></script>
</body>
</html>
index.js file:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
<script scr="/javascripts/script.js"></script>
should be
<script src="/javascripts/script.js"></script>
i am new in node.js and express.
in my test app the html variables will not be parsed.
what is the problem?
server.js
enter var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({
extended : true
}));
app.use(express.static(__dirname));
app.get('/', function(req, res) {
res.render('index', {
wert : 'hallo'
});
});
app.post('/', function(req, res) {
var wert = req.body.wert;
var html = 'Hallo: '+wert+'!\n'
+ 'Mach\'s nochmal!';
res.send(html);
});
app.listen(8882);
console.log('Server port: 8882');
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Startseite</title>
</head>
<body>
<p>Hallo <%= wert %>, dies ist mein kleiner Webserver!</p>
<br>
<form action="/" method="post">
<input type="text" width="40" name="wert" value="<%= wert %>">
<input type="submit" value="submit">
</form>
</body>
</html>
the value parameter <%= wert %> in the view is not parsed.
why? how to do it?
thank you
jet
Express doesn't come with a view-engine by default. You need to add one, in your case EJS.
Using the command line, type:
npm install ejs
server.js now becomes:
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.engine('.html', require('ejs').__express);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');
app.use(bodyParser.urlencoded({
extended : true
}));
app.use(express.static(__dirname));
app.get('/', function(req, res) {
res.render('index', {
wert: 'hallo'
});
});
app.post('/', function(req, res) {
var wert = req.body.wert;
res.render('index', {
wert: wert
});
});
app.listen(8882);
thank you ben,
your ejs configuration was good.
I had to install express, ejs, body-parser. that was ok.
then i had to remove the line with app.use(express.static(__dirname));
and i had to change
app.set('views', __dirname + '/views');
to
app.set('views', __dirname);
for my original path.
then everything was ok!
greez
jet
Im having some trouble including a html snippets into my index.html .
I have tried to follow, the ejs documentation but I just can't seem to make it work.
Directory Structure:
project
-public
--assets
---css
---images
---js
--Index
---index.html + index.css and index.js
--someOtherPageFolder
-views
--partials
---partials1.ejs
--index.ejs
--layout.ejs
-server.js
This is my server.js (NEW):
var express = require("express");
var partials = require("express-partials");
var http = require('http');
var path = require('path');
var app = express();
app.get("/", function(req, res) {
res.redirect("index");
});
app.configure(function(){
app.set('port', process.env.PORT || 8888);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(partials());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(express.bodyParser());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
http.createServer(app).listen(app.get('port'), function(){
console.log('App listening on port ' + app.get('port'));
});
This is my test.ejs:
<h1>This is test!</h1>
And this is where I want the html snipp to go:
<div id="sb-site">
<div class="">
<p>Not test</p>
<%- include test.html %>
</div>
</div>
What am I doing wrong?
Is there also a way for me to do this and use .html instead of .ejs (Im using eclipse and it doesn't support .ejs files)
With include you shoud do like this:
<%- include ("./partials/footer") %>
Express 3 breaks ejs partials, use express-partials instead.
// Include it like so with your other modules
var express = require("express");
var partials = require('express-partials');
var server = express();
// Finally add it into your server conviguration
server.configure(function(){
server.set('view engine', 'ejs');
// Include partials middleware into the server
server.use(partials());
});
In your .ejs views, enjoy the luxury like so...
<%- include ../partials/header %>
<section id="welcome">
Welcome
</section>
<%- include ../partials/footer %>
Also, rather than setting the ejs module to read .html just follow this answer to get eclipse to render .ejs as .html. how do i get eclipse to interpret .ejs files as .html?
As an example, this is how a basic express structure is setup...
project
--public
--views
----layout.ejs
----index.ejs
----partials
------partial1.ejs
--server.js
server.js would look like...
var express = require('express'),
partials = require('express-partials'),
http = require('http'),
path = require('path');
var app = express();
// all environments
app.configure(function() {
app.set('port', process.env.PORT || 3838);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
// Middleware
app.use(partials());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
http.createServer(app).listen(app.get('port'), function(){
console.log('App listening on port ' + app.get('port'));
});
Your route would look like...
server.get("/", function(req, res) {
res.render("index");
});
And finally, your layout.ejs...
<html>
<head>
<title></title>
</head>
<body>
<%- body %>
</body>
</html>
and index.ejs ...
<div id="index">
<%- include partial1.ejs %>
</div>
If you need a reference to the working example, here it is
You need to use the new include syntax:
before: <%- include test.html %>
after: <%- include ('test') %>