How to serve static html files through express without explicit rendering - node.js

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');
}

Related

Render view with parameter in url - NodeJS/Express

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.

How to send a file into an iframe with node-express?

I want to load a html file into an iframe, with express. A have a < a > tag, and when I click on it, the iframe appears. The frame loads, but I obviously get a "CANNOT GET" message in it, because I don't have the appropriate routing. I have the following code snippets.
index.html:
<a id="ASZF">Adatvédelmi Szabályzat</a>
<iframe id="ASZFframe" src="ASZF.html"></iframe>
server.js:
app.get("/ASZ",function(request, response){
response.sendFile(path.join(__dirname+"/ASZ.html"));
});
Should I use < a href="?" >, or something else?
Your express is not made aware of that route. Your route should be:
app.get("/ASZF.html", function(req, res) {...});
But you probably want to look into serve-static instead of creating a controller just for this.

Render 2 templates at the same time on Node/Express

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

Point all URLs to a single web page with node.js + express + jQuery

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);

Emulating the 'layout' functionality of Jade while using Mustache

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

Resources