Using HTML in Express instead of Jade
Htmlnode.jsExpressPugHtml Problem Overview
How to I get rid of Jade while using Express with Node.JS? I want to just use plain html. In other articles I have seen that people recommended app.register() which is now deprecated in the latest version.
Html Solutions
Solution 1 - Html
You can do it this way:
-
Install ejs:
npm install ejs -
Set your template engine in app.js as ejs
// app.js app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); -
Now in your route file you can assign template variables
// ./routes/index.js exports.index = function(req, res){ res.render('index', { title: 'ejs' });}; -
Then you can create your html view in /views directory.
Solution 2 - Html
Jade also accepts html input.
Just add a dot to the end of line to start submitting pure html.
If that does the trick for you then try:
doctype html
html. // THAT DOT
<body>
<div>Hello, yes this is dog</div>
</body>
PS - No need to close HTML - that's done automagically by Jade.
Solution 3 - Html
As of express 3 you can simply use response.sendFile
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});)
From the official express api reference:
> res.sendfile(path, [options], [fn]])
>
> Transfer the file at the given path.
>
> Automatically defaults the Content-Type response header field based on
> the filename's extension. The callback fn(err) is invoked when the
> transfer is complete or when an error occurs.
Warning
res.sendFile provides client-side cache through http cache headers but it does not cache file contents on server-side. The code above will hit the disk on each request.
Solution 4 - Html
In my opinion, using something as big as ejs just to read html files is a bit heavy-handed. I just wrote my own template engine for html files that's remarkably simple. The file looks like this:
var fs = require('fs');
module.exports = function(path, options, fn){
var cacheLocation = path + ':html';
if(typeof module.exports.cache[cacheLocation] === "string"){
return fn(null, module.exports.cache[cacheLocation]);
}
fs.readFile(path, 'utf8', function(err, data){
if(err) { return fn(err); }
return fn(null, module.exports.cache[cacheLocation] = data);
});
}
module.exports.cache = {};
I called mine htmlEngine, and the way you use it is simply by saying:
app.engine('html', require('./htmlEngine'));
app.set('view engine', 'html');
Solution 5 - Html
app.register() hasn't been depreciated, it has just been renamed to app.engine() since Express 3 changes the way template engines are handled.
> Express 2.x template engine compatibility required the following module
> export:
>
> exports.compile = function(templateString, options) {
> return a Function;
> };
>
> Express 3.x template engines should export the following:
>
> exports.__express = function(filename, options, callback) {
> callback(err, string);
> };
>
> If a template engine does not expose this
> method, you're not out of luck, the app.engine() method allows you to
> map any function to an extension. Suppose you had a markdown library
> and wanted to render .md files, but this library did not support
> Express, your app.engine() call may look something like this:
>
> var markdown = require('some-markdown-library');
> var fs = require('fs');
>
> app.engine('md', function(path, options, fn){
> fs.readFile(path, 'utf8', function(err, str){
> if (err) return fn(err);
> str = markdown.parse(str).toString();
> fn(null, str);
> });
> });
If you're looking for a templating engine that lets you use 'plain' HTML, I recommend doT because it is extremely fast.
Of course, keep in mind that the Express 3 view model leaves view caching up to you (or your templating engine). In a production environment, you probably want to cache your views in memory so that you aren't doing disk I/O on every request.
Solution 6 - Html
You can use EJS with express which templates are HTML but support variables. Here is a good tutorial in how to use EJS in express.
http://robdodson.me/blog/2012/05/31/how-to-use-ejs-in-express/
Solution 7 - Html
To make the render engine accept html instead of jade you can follow the following steps;
- Install consolidate and swig to your directory.
npm install consolidate npm install swig
- add following lines to your app.js file
var cons = require('consolidate');
// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', ‘html');
- add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.
Though this will render html without any issue, I would recommend you to use JADE by learning it. Jade is an amazing template engine and learning this will help you achieve better design & scalability.
Solution 8 - Html
first check the compatibility version of template engine by using below line
express -h
then you have to use no view from the list.select no view
express --no-view myapp
now you can use your all html,css,js and images in public folder.
Solution 9 - Html
Well, it sounds like you want to serve static files. And there is a page for that http://expressjs.com/en/starter/static-files.html
Bizarre that nobody is linking to the documentation.
Solution 10 - Html
Considering you have your routes already defined or do know how to do it.
app.get('*', function(req, res){
res.sendfile('path/to/your/html/file.html');
});
NOTE: this route has to be placed after all the others since * accepts everything.
Solution 11 - Html
since Jade supports HTML, if you just want to have .html ext, you can do this
// app.js
app.engine('html', require('jade').renderFile);
app.set('view engine', 'html');
then you just change file in views from jade to html.
Solution 12 - Html
You can also directly include your html file into your jade file
include ../../public/index.html
Original answer: https://stackoverflow.com/questions/30634054/express-generator-without-jade/44412756#44412756
Solution 13 - Html
If you want to use plain html in nodeJS, without using jade.. or whatever:
var html = '<div>'
+ 'hello'
+ '</div>';
Personnaly i'm doing fine with that.
The advantage is simplicity when control.
You can use some tricks, like '<p>' + (name || '') + '</p>', ternary .. etc
If you want an indented code in the browser, you can do:
+ 'ok \
my friend \
sldkfjlsdkjf';
and use \t or \n at will. But i prefer without, plus it is faster.