I am trying to get an input from my main site. After the input is submitted the page should redirect to /view. It seems like it successfully redirects to /view (because console.log() is getting triggered, but res.render is not working. If i manually go to /view it is rendering the page.
Here is the code of my app.js file:
// load the things we need
var express = require('express');
var app = express();
let bodyParser = require("body-parser");
let article = '';
//Set the view engine to ejs
app.set('view engine', 'ejs');
app.use('/static', express.static('static'))
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json())
//Index page
app.get('/', function (req, res) {
res.render('index')
});
//Get the input from the form
app.post('/searcharticle', function (req, res) {
article = req.body.article;
res.redirect('/view')
return article;
});
//Page to output the input
app.get('/view', function (req, res) {
console.log(article)
res.render('view', {
article: article
})
})
app.listen(8080);
console.log('Server on 8080');
And here is my
folder structure
Thank you for your help!
use view engine first then set the directory where to use it.
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
and for static files use
app.use('/static',express.static(PATH.join(__dirname+'/static'));
You have to mention the layout
app.get('/', function (req, res) {
res.render('index',{layout:false})
});
supposed you have al your .ejs files in views folder try adding this line in your code:
const path = require('path'); //npm install -S path in your console to install path.
//Set the view engine to ejs
app.set('views', path.join(__dirname, 'views')); // add this one, change 'views' for your folder name if needed.
app.set('view engine', 'ejs');
app.use('/static', express.static('static'))
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json())
If you are running your server from a diff directory than static you need to add a relative path
app.use('/static', express.static(__dirname+'/static'))
I was just given the solution to a very similar problem by my wonderful tutor. The login form 'submit' was passed to jQuery on('click') and after authetication called a Res.Render of the results of an API call. The API call result set was log-abled, but the page never rendered, and there was no error.
He told me that jQuery acts as a 'shadow' DOM, and that the Res.Render was likewise taking place in that shadow DOM. I changed the login form to a form Post instead of the jQuery on Click.
That WORKED!
I worked on this for several days without ever thinking jQuery could cause that obstacle.
My way is to go back the version of ejs to 2.5.2, and that works. However, I don't know the reason why it cannot support the version 3..
Related
I am setting up the environment for a node js app.
But the views/ejs files are not being rendered. If i do:
app.get("/", function(req, res){
res.send('Something');
});
This works. But, if I do(having an index,ejs file):
app.get("/", function(req, res){
res.render(index);
});
It does not work, I get "index is not defined" on the cleint side in the web, but no error in the command line.
Here is the app.js:
var express = require("express");
var path = require("path");
var app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));
app.get("/", function(req, res){
res.send('Something');
});
app.get("/", function(req, res){
res.render(index);
});
const port = process.env.PORT || 3000
app.listen(port, function () {
console.log(`Express is running on port ${port}`)
})
IS there something wrong with the app.set parameters, or has something changed? I am following a tutorial which might be out dated, but checking the docs, I do not see an issue.
So, what is wrong here, is there a new way to do the routing with ejs? I know partials are gone now. Does this mean no ejs files at all anymore, and if so, how is it supposed to be done now? By rendering an html file?
Thanks
Well, I'm not a pro of express but here index is not defined because you write it like a variable. Try using something like this
res.render(path.resolve(__dirname + "/views/index"));
I'm trying to set up a simple routing app but I keep running int the error when rendering a page.
Error: Module "html" does not provide a view engine.
What is odd is I've specified the view engine in my app.js file but I'm still getting the error
// app.js
var express = require('express');
var app = express();
var router = express.Router();
// Need to import the route file
var chef = require('./chef');
app.use('/chef', chef);
// Set directory to contain the templates ('views')
app.set('views', __dirname + '/views');
// Set view engine to use
app.set('view engine', 'html');
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(500).send('Something broke!');
});
// chef.js
var express = require('express');
var routes = express.Router();
routes.get('/', (req, res) => {
//res.send("I'm here!")
res.render('chef');
});
module.exports = routes;
// views/chef.html
Some HTML file here here ..
In the chef.js file when I just want to test if the route is working I uncomment res.send ... which sends "I'm here" to the DOM.
However whenever I try res.render to render the chef.html page I get the error above. Which I find odd because I've set the view engine in app.js.
Suggestions on how to render my HTML file?
use res.sendFile('/fileName.html'); instead of res.render()
for sending file , we used res.sendFile(fullPath) and if you are using other than HTML language then you should have to use res.render().
res.render() for template like ejs, pug etc.
I want to protect a folder and its content by redirecting the user back to index.
I've tried this, but it only works partially.
var express = require('express');
var path = require('path');
var http = require('http');
var app = express();
app.set('port', 8080);
app.set('view engine', 'ejs');
app.use(express.static(path.join(__dirname, 'views')));
app.get('/', function(req, res) {
res.render('index.ejs');
});
app.get('/protected/*', function(req, res, next) {
res.redirect('/');
next();
});
//activating server
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
This routes, for example, "localhost:8080/protected" and "localhost:8080/protected/asdf", but not "localhost:8080/protected/otherPage.html".
In this case asdf is not an actual file, but otherPage.html is. So if the file is there it doesn't redirect, but if it is not then it redirects. Why is this?
Your line dealing with static files app.use(express.static(path.join(__dirname, 'views'))); appears before app.get('/protected') so its being matched first.
If you moved the static handler to later in the code this would work as you require.
However, I would recommend splitting the static items into a separate folder to guard against accidentally revealing any server-side code you might be including in ejs files in the views folder.
I have a working Node.js site, using Express.js, Handlebars.js and Consolidate.js. I want to use partials for common parts of my templates, but can't work out how to make them work for pages at different URLs.
My /views/ directory contains this:
_footer.html
_header.html
article.html
index.html
The relevant parts of my Node app looks something like:
var express = require('express'),
consolidate = require('consolidate'),
handlebars = require('handlebars'),
path = require('path');
var app = express();
app.engine('html', consolidate.handlebars);
app.set('view engine', 'html');
app.set('views', path.join(__dirname, '/views'));
var partials = {header: '_header', footer: '_footer'};
app.get('/', function(req, res) {
res.render('index', {partials: partials});
};
app.get(/^\/([\w-]+)\/$/, function(req, res) {
res.render('article', {partials: partials});
};
And in my index.html and article.html Handlebars templates I have something like:
{{> header}}
<!-- page content here -->
{{> footer }}
I should be able to access both / (when index.html is rendered) and /foo/ (when article.html is rendered). But it only works for whichever I try to access first after starting the Node server. When I then navigate to the other path, I get errors like:
Error: ENOENT, no such file or directory '/Users/phil/Projects/projectname/views/<!DOCTYPE html>...
with the rest of the _header.html partial following.
I assume I need to somehow set the path to my partials to be absolute somehow, but I can't see how to do that.
For consolidate check that : https://github.com/tj/consolidate.js/issues/18
I would recommend to switch to something a bit more specific like that https://github.com/donpark/hbs it will be simpler.
I had the same exact issue. It seems that consolidate is reusing the "partials" object that you pass, replacing the values with the file content (yuck!).
A workaround is to create a new "partials" object every time. If you don't want to rewrite the whole object every time, you can use a function returning the object literal.
In your case something like the following should work:
var express = require('express'),
consolidate = require('consolidate'),
handlebars = require('handlebars'),
path = require('path');
var app = express();
app.engine('html', consolidate.handlebars);
app.set('view engine', 'html');
app.set('views', path.join(__dirname, '/views'));
var partials = function() {
return {header: '_header', footer: '_footer'};
}
app.get('/', function(req, res) {
res.render('index', {partials: partials()});
};
app.get(/^\/([\w-]+)\/$/, function(req, res) {
res.render('article', {partials: partials()});
};
Not really elegant, but I don't think there is really a way to keep it simpler.
I bought the latest nodejs peepcode tutorial and followed it, however I can't get past the initial step.
I'm getting frustrated after spending several hours to find out where I got an error since debugging nodejs is a riddle for me.
app structure looks like this:
example
|__public
|__views
|__assets
|__apps <- instead of routes
server.js
package.json
Here is my simple code:
server.js
/**
* Module dependencies.
*/
require('coffee-script');
var express = require('express');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
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());
});
// routes
require('./apps/authentication/routes')(app);
app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
/apps/authentication/routes.coffee:
routes = (app) ->
app.get '/login', (req, res) ->
res.render "views/login",
title: 'Login'
stylesheet: 'login'
module.exports = routes
apps/authentication/views/login.jade template:
form(action='/sessions', method='post')
label
| Username
input(type='text', name='user')
label
| Password
input(type='password', name='password')
input(type='submit', name='Submit')
nothing fancy, i got a stylesheet file and login.css in public/stylesheet/login.css
instead of a login template from authentication/routes.coffe when browsing http://localhost:3000/
Cannot GET /
no any other error message from node either:
Express server listening on port 3000 in development mode
I can't figure out where the problem is and this is really frustrating.
Probably some dumb typo somewhere but I can't figure this out :(
You do not have a route configured for the root '/'. Navigating to http://localhost:3000/login should return your login view as specified by the route to the resource '/login'. You need to add something along the lines of:
app.get '/', (req, res) ->
#if not logged-in then send to /login else
res.render('/views/authenticated', 'Home', 'index')
For more details on routing see http://expressjs.com/guide.html#routing.
It looks like everything is working as intended. The problem is that you haven't defined a route that matches the request GET /. You've only defined a route matching GET /login in your routes.coffee; also, GET /anythinginyourpublicdir will work thanks to the express.static middleware.