templating using handlebars with nodejs to include layout - javascript

app.js
var exphbs = require('express-handlebars');
app.engine('handlebars', exphbs({defaultLayout: 'layout'}));
app.set('view engine', 'handlebars');
app.use('/catalog', require('./routes/catalog'));
so in my routes folder I have a folder call catalog then within it I have catalog.js.
In catalog.js I do
var express = require('express');
var router = module.exports = express.Router();
router.get('/', function(req, res) {
res.render('catalog/index');
});
It worked fine when I go to http://localhost:3000/catalog but it excluded from the layout when I try to run http://localhost:3000/catalog/ Any idea why?

There is an npm package (connect-slashes) which installs some middleware which will add a slash on urls without one. This process is called URL canonicalisation.
This is better because you won't display similar content for 'catalog' and 'catalog/' urls which would be bad for SEO (duplicate content penalties).
Package details here:
https://www.npmjs.com/package/connect-slashes
From the command line:
npm install connect-slashes --save

Related

React | React is not rendering anything in my project [duplicate]

I want to serve index.html and /media subdirectory as static files. The index file should be served both at /index.html and / URLs.
I have
web_server.use("/media", express.static(__dirname + '/media'));
web_server.use("/", express.static(__dirname));
but the second line apparently serves the entire __dirname, including all files in it (not just index.html and media), which I don't want.
I also tried
web_server.use("/", express.static(__dirname + '/index.html'));
but accessing the base URL / then leads to a request to web_server/index.html/index.html (double index.html component), which of course fails.
Any ideas?
By the way, I could find absolutely no documentation in Express on this topic (static() + its params)... frustrating. A doc link is also welcome.
If you have this setup
/app
/public/index.html
/media
Then this should get what you wanted
var express = require('express');
//var server = express.createServer();
// express.createServer() is deprecated.
var server = express(); // better instead
server.configure(function(){
server.use('/media', express.static(__dirname + '/media'));
server.use(express.static(__dirname + '/public'));
});
server.listen(3000);
The trick is leaving this line as last fallback
server.use(express.static(__dirname + '/public'));
As for documentation, since Express uses connect middleware, I found it easier to just look at the connect source code directly.
For example this line shows that index.html is supported
https://github.com/senchalabs/connect/blob/2.3.3/lib/middleware/static.js#L140
In the newest version of express the "createServer" is deprecated. This example works for me:
var express = require('express');
var app = express();
var path = require('path');
//app.use(express.static(__dirname)); // Current directory is root
app.use(express.static(path.join(__dirname, 'public'))); // "public" off of current is root
app.listen(80);
console.log('Listening on port 80');
express.static() expects the first parameter to be a path of a directory, not a filename. I would suggest creating another subdirectory to contain your index.html and use that.
Serving static files in Express documentation, or more detailed serve-static documentation, including the default behavior of serving index.html:
By default this module will send “index.html” files in response to a request on a directory. To disable this set false or to supply a new index pass a string or an array in preferred order.
res.sendFile & express.static both will work for this
var express = require('express');
var app = express();
var path = require('path');
var public = path.join(__dirname, 'public');
// viewed at http://localhost:8080
app.get('/', function(req, res) {
res.sendFile(path.join(public, 'index.html'));
});
app.use('/', express.static(public));
app.listen(8080);
Where public is the folder in which the client side code is
As suggested by #ATOzTOA and clarified by #Vozzie, path.join takes the paths to join as arguments, the + passes a single argument to path.
const path = require('path');
const express = require('express');
const app = new express();
app.use(express.static('/media'));
app.get('/', (req, res) => {
res.sendFile(path.resolve(__dirname, 'media/page/', 'index.html'));
});
app.listen(4000, () => {
console.log('App listening on port 4000')
})
If you have a complicated folder structure, such as
- application
- assets
- images
- profile.jpg
- web
- server
- index.js
If you want to serve assets/images from index.js
app.use('/images', express.static(path.join(__dirname, '..', 'assets', 'images')))
To view from your browser
http://localhost:4000/images/profile.jpg
If you need more clarification comment, I'll elaborate.
use below inside your app.js
app.use(express.static('folderName'));
(folderName is folder which has files) - remember these assets are accessed direct through server path (i.e. http://localhost:3000/abc.png (where as abc.png is inside folderName folder)
npm install serve-index
var express = require('express')
var serveIndex = require('serve-index')
var path = require('path')
var serveStatic = require('serve-static')
var app = express()
var port = process.env.PORT || 3000;
/**for files */
app.use(serveStatic(path.join(__dirname, 'public')));
/**for directory */
app.use('/', express.static('public'), serveIndex('public', {'icons': true}))
// Listen
app.listen(port, function () {
console.log('listening on port:',+ port );
})
I would add something that is on the express docs, and it's sometimes misread in tutorials or others.
app.use(mountpoint, middleware)
mountpoint is a virtual path, it is not in the filesystem (even if it actually exists). The mountpoint for the middleware is the app.js folder.
Now
app.use('/static', express.static('public')`
will send files with path /static/hell/meow/a.js to /public/hell/meow/a.js
This is the error in my case when I provide links to HTML files.
before:
<link rel="stylesheet" href="/public/style.css">
After:
<link rel="stylesheet" href="/style.css">
I just removed the static directory path from the link and the error is gone. This solves my error one thing more don't forget to put this line where you are creating the server.
var path = require('path');
app.use(serveStatic(path.join(__dirname, 'public')));
You can achieve this by just passing the second parameter express.static() method to specify index files in the folder
const express = require('express');
const app = new express();
app.use(express.static('/media'), { index: 'whatever.html' })

how to send an integer to html page while using Express.js routing

I have the following code in Express which redirects to views/index.html page. Now I also want to send some integers to index.html as soon as some function is executed in this code. Whats the fastest way to do this?
const app = express()
var path = __dirname + '/views/'
var router = express.Router()
app.use('/',router)
router.get('/',function(req,res)
{
res.sendFile(path+'index.html')
}
)
app.listen(3000)
Personally, I would use an "ejs" file.
Install:
npm install ejs --save
Then in your index.js change your code to:
const app = express()
app.set('view engine', 'ejs'); //support ejs files
app.get('/',function(req,res) {
res.render('index.ejs', {varableName: varablePath}) //make sure your index.ejs is in your "views" folder
});
app.listen(3000);
Then in your new ejs file use the line: <%= varableName %> to import your variables across files
You need to use templating engines like EJS/Jade to do this:
First of all, add it to project, by running the below command:
npm install ejs --save
Convert the html pages to ejs pages.
Use the below line in the express server app:
app.set('view engine', 'ejs');
Send the javascript variables using render method. For example:
res.render('index', {title: "Main Page", counter: 1 });
Now, in the index.ejs file read the value as below wherever required
Counter: <%= counter %>,

Nodejs having routing issue using slash

I'm using handlebars not jade for routing but I think this issue I face not tied to handlebars but general routing issue with nodejs.
In app.js I have these
var exphbs = require('express-handlebars');
app.engine('handlebars', exphbs({defaultLayout: 'layout'}));
app.set('view engine', 'handlebars');
app.use('/catalog', require('./routes/catalog'));
Then in the routes folder I have a folder call catalog and within it I have catalog.js.
In catalog.js I do
var express = require('express');
var router = module.exports = express.Router();
router.get('/', function(req, res) {
res.render('catalog/index');
});
It worked fine when I go to http://localhost:3000/catalog but it excluded from the layout when I try to run http://localhost:3000/catalog/ Any idea why?

How do I use Less with Express.js?

I'm trying to use Less with Express.js however I'm not sure my setup is the correct one.
My folder/files structure is the following :
....
app.js
public
styles
test.less
........
And in my app.js :
var express = require('./node_modules/express');
var lessMiddleware = require('./node_modules/less-middleware');
var app = express();
app.set('view engine', 'ejs');
app.set("views", "./views");
app.get('/', function(req, res, next)
{
res.render('index.ejs');
});
app.use(lessMiddleware(__dirname + "/public/styles"));
app.use(express.static(__dirname + '/public'));
app.listen(3000);
In my index.ejs :
<link rel="stylesheet" type="text/css" href="/public/styles/test.css">
If I understand correctly, the module is supposed to take my test.less and compile it into test.css before it serves it to the client ?
What am I doing wrong ?
UPDATE : it looks like nothing is being served from /public..
http://localhost:3000/public returns Cannot GET /public
You have /public/less instead of /public/styles, and you need to serve that directory as a static one:
app.use(express.static(__dirname + '/public'))
Then make your link href /styles/test.css.
EDIT:
You need to move your less middleware and static middleware to the top before any routes you define.
I mean you need install this package: https://www.npmjs.com/package/express-less
Simply install less middleware by running npm install --save less-middleware and add this line to your app.js file:
app.use(require('less-middleware')(path.join(__dirname, 'public')));
It'll check all the .less files and compile them on the fly.

Render basic HTML view?

I have a basic Node.js app that I am trying to get off the ground using the Express framework. I have a views folder where I have an index.html file. But I receive the following error when loading the web page:
Error: Cannot find module 'html'
Below is my code.
var express = require('express');
var app = express.createServer();
app.use(express.staticProvider(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(8080, '127.0.0.1')
What am I missing here?
You can have jade include a plain HTML page:
in views/index.jade
include plain.html
in views/plain.html
<!DOCTYPE html>
...
and app.js can still just render jade:
res.render(index)
Many of these answers are out of date.
Using express 3.0.0 and 3.1.0, the following works:
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
See the comments below for alternative syntax and caveats for express 3.4+:
app.set('view engine', 'ejs');
Then you can do something like:
app.get('/about', function (req, res)
{
res.render('about.html');
});
This assumes you have your views in the views subfolder, and that you have installed the ejs node module. If not, run the following on a Node console:
npm install ejs --save
From the Express.js Guide: View Rendering
View filenames take the form Express.ENGINE, where ENGINE is the name of the module that will be required. For example the view layout.ejs will tell the view system to require('ejs'), the module being loaded must export the method exports.render(str, options) to comply with Express, however app.register() can be used to map engines to file extensions, so that for example foo.html can be rendered by jade.
So either you create your own simple renderer or you just use jade:
app.register('.html', require('jade'));
More about app.register.
Note that in Express 3, this method is renamed app.engine
You could also read the HTML file and send it:
app.get('/', (req, res) => {
fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
res.send(text);
});
});
try this. it works for me.
app.configure(function(){
.....
// disable layout
app.set("view options", {layout: false});
// make a custom html template
app.register('.html', {
compile: function(str, options){
return function(locals){
return str;
};
}
});
});
....
app.get('/', function(req, res){
res.render("index.html");
});
app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});
If you're using express#~3.0.0 change the line below from your example:
app.use(express.staticProvider(__dirname + '/public'));
to something like this:
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));
I made it as described on express api page and it works like charm. With that setup you don't have to write additional code so it becomes easy enough to use for your micro production or testing.
Full code listed below:
var express = require('express');
var app = express.createServer();
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(8080, '127.0.0.1')
I also faced the same issue in express 3.X and node 0.6.16. The above given solution will not work for latest version express 3.x. They removed the app.register method and added app.engine method. If you tried the above solution you may end up with the following error.
node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
at Function.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:37:5)
at Function.configure (/home/user1/ArunKumar/firstExpress/node_modules/express/lib/application.js:399:61)
at Object.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:22:5)
at Module._compile (module.js:441:26)
at Object..js (module.js:459:10)
at Module.load (module.js:348:31)
at Function._load (module.js:308:12)
at Array.0 (module.js:479:10)
at EventEmitter._tickCallback (node.js:192:40)
To get rid of the error message. Add the following line to your app.configure function
app.engine('html', require('ejs').renderFile);
Note: you have to install ejs template engine
npm install -g ejs
Example:
app.configure(function(){
.....
// disable layout
app.set("view options", {layout: false});
app.engine('html', require('ejs').renderFile);
....
app.get('/', function(req, res){
res.render("index.html");
});
Note: The simplest solution is to use ejs template as view engine. There you can write raw HTML in *.ejs view files.
folder structure:
.
├── index.html
├── node_modules
│   ├──{...}
└── server.js
server.js
var express = require('express');
var app = express();
app.use(express.static('./'));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(8882, '127.0.0.1')
index.html
<!DOCTYPE html>
<html>
<body>
<div> hello world </div>
</body>
</html>
output:
hello world
If you don't have to use the views directory, Simply move html files to the public directory below.
and then, add this line into app.configure instead of '/views'.
server.use(express.static(__dirname + '/public'));
If you want to render HTML file you can use sendFile() method without using any template engine
const express = require("express")
const path = require("path")
const app = express()
app.get("/",(req,res)=>{
res.sendFile(**path.join(__dirname, 'htmlfiles\\index.html')**)
})
app.listen(8000,()=>{
console.log("server is running at Port 8000");
})
I have an HTML file inside htmlfile so I used path module to render index.html path is default module in node. if your file is present in root folder just used
res.sendFile(path.join(__dirname, 'htmlfiles\\index.html'))
inside app.get() it will work
For my project I have created this structure:
index.js
css/
reset.css
html/
index.html
This code serves index.html for / requests, and reset.css for /css/reset.css requests. Simple enough, and the best part is that it automatically adds cache headers.
var express = require('express'),
server = express();
server.configure(function () {
server.use('/css', express.static(__dirname + '/css'));
server.use(express.static(__dirname + '/html'));
});
server.listen(1337);
To render Html page in node try the following,
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
You need to install ejs module through npm like:
npm install ejs --save
With Express 4.0.0, the only thing you have to do is comment out 2 lines in app.js:
/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.
And then drop your static file into the /public directory. Example: /public/index.html
Express 4.x
res.sendFile(path [, options] [, fn])
Send .html files, no template engine...
//...
// Node modules
const path = require('path')
//...
// Set path to views directory
app.set('views', path.join(__dirname, 'views'))
/**
* App routes
*/
app.get('/', (req, res) => {
res.sendFile('index.html', { root: app.get('views') })
})
//...
.
├── node_modules
│
├── views
│ ├──index.html
└── app.js
I added below 2 line and it work for me
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
Try res.sendFile() function in Express routes.
var express = require("express");
var app = express();
var path = require("path");
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
//__dirname : It will resolve to your project folder.
});
app.get('/about',function(req,res){
res.sendFile(path.join(__dirname+'/about.html'));
});
app.get('/sitemap',function(req,res){
res.sendFile(path.join(__dirname+'/sitemap.html'));
});
app.listen(3000);
console.log("Running at Port 3000");
Read here : http://codeforgeek.com/2015/01/render-html-file-expressjs/
I didn't want to depend on ejs for simply delivering an HTML file, so I simply wrote the tiny renderer myself:
const Promise = require( "bluebird" );
const fs = Promise.promisifyAll( require( "fs" ) );
app.set( "view engine", "html" );
app.engine( ".html", ( filename, request, done ) => {
fs.readFileAsync( filename, "utf-8" )
.then( html => done( null, html ) )
.catch( done );
} );
1)
The best way is to set static folder. In your main file (app.js | server.js | ???):
app.use(express.static(path.join(__dirname, 'public')));
public/css/form.html
public/css/style.css
Then you got static file from "public" folder:
http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css
2)
You can create your file cache.
Use method fs.readFileSync
var cache = {};
cache["index.html"] = fs.readFileSync( __dirname + '/public/form.html');
app.get('/', function(req, res){
res.setHeader('Content-Type', 'text/html');
res.send( cache["index.html"] );
};);
I was trying to set up an angular app with an express RESTful API and landed on this page multiple times though it wasn't helpful. Here's what I found that worked:
app.configure(function() {
app.use(express.static(__dirname + '/public')); // set the static files location
app.use(express.logger('dev')); // log every request to the console
app.use(express.bodyParser()); // pull information from html in POST
app.use(express.methodOverride()); // simulate DELETE and PUT
app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});
Then in the callback for your api routes look like: res.jsonp(users);
Your client side framework can handle routing. Express is for serving the API.
My home route looks like this:
app.get('/*', function(req, res) {
res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});
res.sendFile(__dirname + '/public/login.html');
Add the following Lines to your code
Replace "jade" with "ejs" & "X.Y.Z"(version) with "*" in package.json file
"dependencies": {
"ejs": "*"
}
Then in your app.js File Add following Code :
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
And Remember Keep All .HTML files in views Folder
Cheers :)
Here is a full file demo of express server!
https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906
hope it will help for you!
// simple express server for HTML pages!
// ES6 style
const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();
let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');
app.get('/', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.send( cache[0] );
});
app.get('/test', (req, res) => {
res.setHeader('Content-Type', 'text/html');
res.send( cache[1] );
});
app.listen(port, () => {
console.log(`
Server is running at http://${hostname}:${port}/
Server hostname ${hostname} is listening on port ${port}!
`);
});
It is very sad that it is about 2020 still express hasn't added a way to render an HTML page without using sendFile method of the response object. Using sendFile is not a problem but passing argument to it in the form of path.join(__dirname, 'relative/path/to/file') doesn't feel right. Why should a user join __dirname to the file path? It should be done by default. Why can't the root of the server be by defalut the project directory? Also, installing a templating dependency just to render a static HTML file is again not correct. I don't know the correct way to tackle the issue, but if I had to serve a static HTML, then I would do something like:
const PORT = 8154;
const express = require('express');
const app = express();
app.use(express.static('views'));
app.listen(PORT, () => {
console.log(`Server is listening at port http://localhost:${PORT}`);
});
The above example assumes that the project structure has a views directory and the static HTML files are inside it. For example, let's say, the views directory has two HTML files named index.html and about.html, then to access them, we can visit: localhost:8153/index.html or just localhost:8153/ to load the index.html page and localhost:8153/about.html to load the about.html. We can use a similar approach to serve a react/angular app by storing the artifacts in the views directory or just using the default dist/<project-name> directory and configure it in the server js as follows:
app.use(express.static('dist/<project-name>'));
index.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(3400, () => {
console.log('Server is running at port 3400');
})
Put your index.html file in public folder
<!DOCTYPE html>
<html>
<head>
<title>Render index html file</title>
</head>
<body>
<h1> I am from public/index.html </h1>
</body>
</html>
Now run the following code in your terminal
node index.js
For plain html you don't require any npm package or middleware
just use this:
app.get('/', function(req, res) {
res.sendFile('index.html');
});
I wanted to allow requests to "/" to be handled by an Express route where previously they had been handled by the statics middleware. This would allow me to render the regular version of index.html or a version that loaded concatenated + minified JS and CSS, depending on application settings. Inspired by Andrew Homeyer's answer, I decided to drag my HTML files - unmodified - into a views folder, configure Express like so
app.engine('html', swig.renderFile);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');
And created a route handler like so
app.route('/')
.get(function(req, res){
if(config.useConcatendatedFiles){
return res.render('index-dist');
}
res.render('index');
});
This worked out pretty well.
In server.js, please include
var express = require("express");
var app = express();
var path = require("path");
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
//__dirname : It will resolve to your project folder.
});
If you are trying to serve an HTML file which ALREADY has all it's content inside it, then it does not need to be 'rendered', it just needs to be 'served'. Rendering is when you have the server update or inject content before the page is sent to the browser, and it requires additional dependencies like ejs, as the other answers show.
If you simply want to direct the browser to a file based on their request, you should use res.sendFile() like this:
const express = require('express');
const app = express();
var port = process.env.PORT || 3000; //Whichever port you want to run on
app.use(express.static('./folder_with_html')); //This ensures local references to cs and js files work
app.get('/', (req, res) => {
res.sendFile(__dirname + '/folder_with_html/index.html');
});
app.listen(port, () => console.log("lifted app; listening on port " + port));
This way you don't need additional dependencies besides express. If you just want to have the server send your already created html files, the above is a very lightweight way to do so.
I usually use this
app.configure(function() {
app.use(express.static(__dirname + '/web'));
});
Just be careful because that'll share anything in the /web directory.
I hope it helps

Categories

Resources