Como uso o HTML como mecanismo de exibição no Express?

130

Eu tentei essa alteração simples a partir da semente e criei os arquivos .html correspondentes (por exemplo, index.html).

//app.set('view engine', 'jade');
app.set('view engine', 'html');

e esse arquivo permaneceu o mesmo:

exports.index = function(req, res){
  res.render('index');
};

mas enquanto corro eu recebo

Erro 500: Não foi possível encontrar o módulo 'html'

Minha única opção é usar 'ejs'? Minha intenção era usar HTML simples em conjunto com o AngularJS.

html node.js express Julio
fonte
7
Veja este tópico para uma resposta: stackoverflow.com/questions/4529586/... Espero que isso ajude,
roland
3
app.engine ('html', require ('ejs'). renderFile);
Dinesh Kanivu

Respostas:

91

As respostas no outro link funcionarão, mas, para fornecer HTML, não há necessidade de usar um mecanismo de exibição, a menos que você queira configurar o roteamento descolado. Em vez disso, basta usar o middleware estático:

app.use(express.static(__dirname + '/public'));
Dan Kohn
fonte
3
Fui em frente e comentei a referência a app.set ('view engine', html). Em seguida, recebi uma mensagem de erro informando que "Nenhum mecanismo padrão foi especificado e nenhuma extensão foi fornecida", o que é esperado. Mas quando alterei o res.render ("index") para res.render ("index.html"), recebi o seguinte erro: TypeError: A propriedade 'engine' do objeto # <View> não é uma função.
Julio
4
Não há mais mecanismo de exibição, então acho que não res.render()funcionará mais. Em vez disso, coloque seus arquivos HTML não processados publice deixe o middleware estático lidar com a veiculação direta dos arquivos. Se você precisar de rotas mais sofisticadas do que isso, provavelmente poderá configurar seu próprio mecanismo de exibição HTML.
Nick McCurdy
6
Então, o que você escreve na chamada app.get ()?
ajbraus
5
@ajbraus, você nem precisa de uma chamada app.get (). Isso servirá apenas os arquivos html que você tiver na pasta / public diretamente. Assim, no navegador, basta apontar para o html diretamente e é isso ... basicamente nenhum encaminhamento
dm76
O problema que tenho enfrentado com isso é que, se você atualizar a página após o carregamento, ocorrerá um erro dizendo Erro: Nenhum mecanismo padrão foi especificado e nenhuma extensão foi fornecida. se você usar Auth, {fornecer: LocationStrategy, useClass: HashLocationStrategy}], ele adicionará um hash ao seu URL, o que é uma dor por outros motivos. Existe uma maneira de contornar isso?
Wook 12/11/16
33

Para fazer com que o mecanismo de renderização aceite html em vez de jade, siga as etapas a seguir;

  1. Instale consolidar e gire para o seu diretório.

     npm install consolidate
 npm install swig

  2. adicione as seguintes linhas ao seu arquivo app.js

    var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

  3. adicione seus modelos de visualização como .html na pasta "visualizações". Reinicie o servidor do nó e inicie o aplicativo no navegador.

Embora isso renderize html sem nenhum problema, eu recomendaria o uso do JADE aprendendo-o. O Jade é um incrível mecanismo de modelos, e aprender isso ajudará você a obter um melhor design e escalabilidade.

AnandShanbhag
fonte
não tem nenhum método 'motor' - depois de todos os passos
ImranNaqvi
Qual versão do express você está usando? O Express 4.x contém a API app.engine. Mais informações é @ expressjs.com/en/api.html#app.engine
AnandShanbhag
Trabalhou muito bem! Eu amo quando uma resposta de um ano funciona pela primeira vez.
Matthew Snell
por que ele ainda não pode processar o meu css e outros
exe
23

No seu apps.js basta adicionar

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

Agora você pode usar o mecanismo de visualização ejs, mantendo seus arquivos de visualização como .html

fonte: http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/

Você precisa instalar estes dois pacotes:

`npm install ejs --save`
`npm install path --save`

E então importe os pacotes necessários:

`var path = require('path');`


Dessa forma, você pode salvar suas visualizações como .html em vez de .ejs .
Bastante útil ao trabalhar com IDEs que suportam html, mas não reconhecem ejs.

Sudhanshu Gupta
fonte
1
app.set ('views', path.join (__ dirname, '/ path / to / your / folder')); app.set ("opções de visualização", {layout: false}); app.engine ('html', função (path, opt, fn) {fs.readFile (path, 'utf-8', function (error, str) {if (error) return str; return fn (null, str) ;});});
Nilakantha singh deo
16

tente isso para a sua configuração do servidor

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

suas funções de retorno de chamada para rotas serão parecidas com:

function(req, res) {
    res.sendfile('./public/index.html');
};
Connor Leech
fonte
14

Nenhum mecanismo de exibição é necessário, se você deseja usar angular com um arquivo html simples e simples. Aqui está como fazer: No seu route.jsarquivo:

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});
Ashish Rawat
fonte
1
Absolutamente a solução mais fácil. Não tenho nenhum mecanismo de visualização instalado / configurado e o html é enviado.
Newclique
7

Eu recomendo usar https://www.npmjs.com/package/express-es6-template-engine - mecanismo de gabarito extremamente leve e extremamente rápido. O nome é um pouco enganador, pois também pode funcionar sem expressjs.

Os princípios básicos necessários para integrar express-es6-template-engineseu aplicativo são bastante simples e bastante simples de implementar:

const express = require('express'),
  es6Renderer = require('express-es6-template-engine'),
  app = express();
  
app.engine('html', es6Renderer);
app.set('views', 'views');
app.set('view engine', 'html');
 
app.get('/', function(req, res) {
  res.render('index', {locals: {title: 'Welcome!'}});
});
 
app.listen(3000);
Expandir snippet
Aqui está o conteúdo do index.htmlarquivo localizado dentro do diretório 'views': 

<!DOCTYPE html>
<html>
<body>
    <h1>${title}</h1>
</body>
</html>
didinko
fonte
4

A resposta é muito simples. Você deve usar o app.engine ('html') para renderizar * .html Pages. tente isso. Ele deve resolver o problema.

app.set('views', path.join(__dirname, 'views'));
**// Set EJS View Engine**
app.set('view engine','ejs');
**// Set HTML engine**
app.engine('html', require('ejs').renderFile);

o arquivo .html funcionará

Dinesh Kanivu
fonte
2
Resposta incompleta. Onde essas alterações são feitas? Supondo app.js, mas sua resposta precisa ser específica. Além disso, isso provavelmente não é tudo o que precisa ser alterado porque o resultado de fazer apenas essas três alterações / adições é "Não é possível encontrar o módulo 'ejs'". Sua resposta provavelmente está próxima, mas você precisa adicionar um pouco mais de informação.
Newclique
Além disso, renderizar não é o mesmo que servir um arquivo. A renderização requer que o servidor pré-processe um arquivo e adicione qualquer conteúdo dinâmico que seja passado ao método de renderização. Talvez seja isso que o OP queria, mas algumas pessoas confundem renderização com veiculação. Conceitos muito diferentes.
Newclique
O @wade é usado para renderizar arquivos html em vez do arquivo ejs.
Dinesh Kanivu 04/04/19
3

Os arquivos HTML podem ser renderizados usando o mecanismo ejs:

app.set('view engine', 'ejs');

E verifique se seus arquivos em "/ views" estão nomeados com ".ejs".

Por exemplo "index.ejs".

JerryFZhang
fonte
Funciona, mas parece um pouco hacky. Você sabe se há alguma advertência sobre o uso de .ejs no lugar de .html? Felicidades para provavelmente a solução mais rápida sugeriram tudo a mesma coisa!
Mikeym 21/02
3

Comente o middleware para html ie

//app.set('view engine', 'html');

Em vez disso, use:

app.get("/",(req,res)=>{
    res.sendFile("index.html");
});
Shivam Chhetri
fonte
2

html não é um mecanismo de exibição, mas o ejs oferece a possibilidade de escrever código html nele

Wael Chorfan
fonte
1

para servidor de páginas html através de roteamento, eu fiz isso.

var hbs = require('express-hbs');
app.engine('hbs', hbs.express4({
  partialsDir: __dirname + '/views/partials'
}));
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');

e renomeei meus arquivos .html para arquivos .hbs - o guidão suporta HTML simples

Avinash
fonte
1

Para fazer com que o mecanismo de renderização aceite html em vez de jade, siga as etapas a seguir;

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.

Isso deve funcionar

Md Mehadi Hasan Mozumder
fonte
1

Experimente esta solução simples, funcionou para mim

app.get('/', function(req, res){
    res.render('index.html')
  });
Kiryamwibo Yenusu
fonte
1
você deve adicionar todas as suas linhas, isso por si só não está funcionando.
MushyPeas 17/01/19
1

Instalar modelo ejs

npm install ejs --save

Consulte ejs em app.js

app.set('views', path.join(__dirname, 'views'));`
app.set('view engine', 'ejs');

Crie um modelo ejs em visualizações como views / indes.ejs e use o ejs tempalte no roteador

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});
kta
fonte
0

Renderize o modelo html com a ajuda do swig. 

//require module swig    
    var swig = require('swig');

// view engine setup    
    app.set('views', path.join(__dirname, 'views'));
    app.engine('html', swig.renderFile);
    app.set('view engine', 'html');
Harendra Singh
fonte
0

Arquivos HTML não precisam ser renderizados.
o que um mecanismo de renderização faz é transformar um arquivo que não é um arquivo HTML em um arquivo HTML.
para enviar um arquivo HTML, basta:

res.sendFile("index.html");

pode ser necessário usar __dirname+"/index.html"o Express para saber o caminho exato.

GideonMax
fonte