Could be having a total mind blank here but why when I have the following route will my JS and CSS tried to be rendered with the prefix /reset
app.get('/reset/:token', (req, res) => {
res.render('reset');
});
So as an example my css tries to pull from localhost:4000/reset/css as opposed to localhost:4000/css
I have not issues with any other of my views (without the parameter option :token)
Check your html/ejs files for the static file links, maybe you forgot to add "/" at be beginning of the relative urls.
Related
I have around 20+ HTML files. I would like to render them, when requested as host/filename.html, without having to use response.render for each file. If I simply move my views folder in public folder (and set views of express accordingly), the browser is not rendering these HTMLs. Rather, I see the code on the screen. Can someone please advice on this?
You can try using something like this:
'/someRoute': (req, res, next) => {
res.status(200).sendFile(process.cwd() + '/views/index.html');
}
I come from the PHP scenario, so this may be a wrong question.
I serve a page (templates with Handlebars) to client this way:
router.get('/', function(req, res) {
res.render('home');
});
and it works, but what if I need to divide my template in some different parts (so I'm able to reuse one of this in many different way)? For example, I have a template for header and one for footer.
Something like this:
router.get('/', function(req, res) {
res.render('header');
res.render('content');
res.render('footer');
});
How can I achieve this? Thanks.
Assuming you are using handlebars template rendering service, you can use partials.
http://handlebarsjs.com/partials.html
Code example: https://github.com/donpark/hbs/blob/master/examples/partial/views/index.hbs
The basic high level call stack follows like this:
res.render('page') ---> parses N of partials (recursively) --> html out
I have a static html site:
index.html
I want to use handlebars {{username}} to inject a username variable. It looks like:
res.render('index', {username:'MyName'})
should work. The problem is my index.html is in my '/static' (my express.static()) directory. What is the best way to get my username variable into my html page without having to convert it to something that doesn't look like html? Thats why I dont want to use jade and prefer handlebars. If there is some other way, it would be best.
Update: I would like to preserve the same structure I have (keeping everything in my static directory) as opposed to moving things out to a "views" directory. Is this possible?
Then you must have to use Template engine. You can use Jade it also support HTML, only you have to use . at end of tag like:
doctype 5
html. // THAT DOT
<body>
<div>This is jade testing with HTML</div>
</body>
Is there a way to keep the file in my /static directory without having
to put it in the "views" directory?
Yes you can use _dirname while rendering
app.get('/anyurl/' , function(req, res){
res.render(__dirname + '/../static/path/folder') //modify path according to your structure
});
I just started experimenting with node & express, and am trying to load the content of various HTML files into a single web page with Ajax.
I want the URL shown in the address bar to reflect the actual file structure on my server; so for instance when a user clicks a link with href="posts/thePost.html", instead of actually going to that page, I use click(), preventDefault(), and Ajax to load the content in a div, then pushState() and window.onpopstate to make the address bar show the relative path of the file. I do not want to use the hash (#) symbol or queries (?=) or anything like that, I want normal URLs.
This works fine, but when I refresh the page, the file located at the URL (i.e. posts/thePost.html) is displayed instead of index.html with the loaded content. Is there a way to use node to fix this, maybe by intercepting the request and displaying the content of index.html instead? I've tried to search this but haven't been having any luck.
Sorry if this sounds confusing. In short, the behavior that I'm looking for is that no matter what URL the address bar shows when the page is refreshed, index.html should be served up instead.
That's rather easy to do:
function serveIndex(req, res) {
return res.sendfile('index.html');
}
app.get('*', serveIndex);
app.head('*', serveIndex);
You'll likely want to put this after your other routes so you don't end up clobbering them.
var routes = require('./routes/index');
app.use('/',routes);
app.use('/index',routes);
function serveIndex(req, res) {
res.redirect('/');
}
app.get('*', serveIndex);
I setup node and express then integrated the mustache.js template by following the instructions on this page:
http://bitdrift.com/post/2376383378/using-mustache-templates-in-express
So far so good, except I'm having a lot of trouble trying to setup mustache.js to have the same functionality as Jade's "layout". I'm basically trying to setup 1 master file to serve as a shell for my other pages similar to extending a template with Django.
Ex. The layout file could have this:
[html]
[title]my title[/title]
[body]{{content}}[/body]
[/html]
Where {{content}} gets replaced with the contents of a file which I would specify somehow in the route for that page.
I just have no idea how to set this up with express because I'm still a huge newbie with it and the way it's setup with Jade is automagical which seems to be specific to Jade only.
With Jade you just need to make a "layout.jade" file and have something like this as your route:
app.get('/', function(req, res) { res.render('home', { title: 'My home page' }); });
Then it magically adds the contents of home.jade into your layout.jade file wherever you specified the body!= body tag.
So yeah, how can I set something like that up with Mustache? If you know the answer please explain it step by step.
You could write a stache renderer plugin for docpad