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

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;

Instale consolidar e gire para o seu diretório.
```
 npm install consolidate
 npm install swig
```

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

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