Bagaimana cara menggunakan HTML sebagai view engine di Express?

130

Saya mencoba perubahan sederhana ini dari seed dan membuat file .html yang sesuai (mis. Index.html).

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

dan file ini tetap sama:

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

tapi saat berlari aku mengerti

500 Kesalahan: Tidak dapat menemukan modul 'html'

Apakah satu-satunya pilihan saya untuk menggunakan 'ejs'? Maksud saya adalah untuk menggunakan HTML biasa dalam hubungannya dengan AngularJS.

html node.js express Julio
sumber
7
Lihat topik ini untuk jawabannya: stackoverflow.com/questions/4529586/... Semoga ini bisa membantu,
roland
3
app.engine ('html', memerlukan ('ejs'). renderFile);
Dinesh Kanivu

Jawaban:

91

Jawaban di tautan lain akan berfungsi, tetapi untuk menyajikan HTML, tidak perlu menggunakan mesin tampilan sama sekali, kecuali jika Anda ingin mengatur perutean yang funky. Sebagai gantinya, cukup gunakan middleware statis:

app.use(express.static(__dirname + '/public'));
Dan Kohn
sumber
3
Saya melanjutkan dan berkomentar referensi untuk app.set ('view engine', html). Saya kemudian mendapat pesan kesalahan bahwa "Tidak ada mesin default yang ditentukan dan tidak ada ekstensi yang disediakan", yang diharapkan. Tetapi ketika saya mengubah res.render ("index") menjadi res.render ("index.html"), saya mendapatkan kesalahan berikut: TypeError: Properti 'mesin' objek # <View> bukan fungsi.
Julio
4
Tidak ada lagi view engine, jadi saya pikir tidak res.render()akan berfungsi lagi. Sebagai gantinya, masukkan file HTML mentah Anda publicdan biarkan middleware statis menangani penyajian file secara langsung. Jika Anda membutuhkan rute yang lebih bagus dari ini, Anda mungkin dapat mengatur mesin tampilan HTML Anda sendiri.
Nick McCurdy
6
Jadi, apa yang Anda tulis di panggilan app.get ()?
ajbraus
5
@ajbraus Anda bahkan tidak memerlukan panggilan app.get () sama sekali. Ini hanya akan melayani file html apa pun yang Anda miliki di folder / publik secara langsung. Jadi di browser, Anda cukup arahkan ke html secara langsung dan hanya itu ... pada dasarnya tidak ada perutean
dm76
Masalah yang saya dapatkan dengan ini adalah jika Anda me-refresh halaman setelah dimuat, itu memberi Anda kesalahan yang mengatakan Kesalahan: Tidak ada mesin default yang ditentukan dan tidak ada ekstensi yang disediakan. kemudian jika Anda menggunakan Auth, {memberikan: LocationStrategy, useClass: HashLocationStrategy}], itu mengiklankan hash ke url Anda yang menyakitkan karena alasan lain. Apakah ada jalan keluarnya?
wuno
33

Untuk membuat mesin render menerima html, bukan giok, Anda dapat mengikuti langkah-langkah berikut;

  1. Instal konsolidasi dan teguk ke direktori Anda.

     npm install consolidate
 npm install swig

  2. tambahkan baris berikut ke file app.js Anda

    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. tambahkan template tampilan Anda sebagai .html di dalam folder “views”. Mulai ulang server simpul Anda dan mulai aplikasi di browser.

Meskipun ini akan membuat html tanpa masalah, saya akan merekomendasikan Anda untuk menggunakan JADE dengan mempelajarinya. Jade adalah mesin template yang luar biasa dan mempelajari ini akan membantu Anda mencapai desain & skalabilitas yang lebih baik.

AnandShanbhag
sumber
tidak memiliki metode 'mesin' - setelah semua langkah
ImranNaqvi
Versi ekspres mana yang Anda gunakan? Express 4.x berisi app.engine API. Info lebih lanjut adalah @ expressjs.com/en/api.html#app.engine
AnandShanbhag
Bekerja dengan baik! Saya suka ketika jawaban berumur setahun bekerja pertama kali.
Matthew Snell
mengapa masih tidak bisa membuat css saya dan lainnya
exe
23

Di apps.js Anda tambahkan saja

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

Sekarang Anda dapat menggunakan mesin tampilan ejs sambil menyimpan file tampilan Anda sebagai .html

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

Anda perlu menginstal dua paket ini:

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

Dan kemudian mengimpor paket yang dibutuhkan:

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


Dengan cara ini Anda dapat menyimpan tampilan Anda sebagai .html bukan .ejs .
Cukup membantu saat bekerja dengan IDE yang mendukung html tetapi jangan mengenali ejs.

Sudhanshu Gupta
sumber
1
app.set ('views', path.join (__ dirname, '/ path / to / your / folder')); app.set ("view options", {layout: false}); app.engine ('html', function (path, opt, fn) {fs.readFile (path, 'utf-8', function (error, str) {if (error) str kembali; kembali fn (null, str) ;});});
nilakantha singh deo
16

coba ini untuk konfigurasi server Anda

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

maka fungsi panggil balik Anda ke rute akan terlihat seperti:

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

Tidak diperlukan mesin tampilan, jika Anda ingin menggunakan sudut dengan file html biasa. Inilah cara melakukannya: Di route.jsfile Anda :

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});
Ashish Rawat
sumber
1
Benar-benar solusi termudah. Saya tidak memiliki mesin tampilan diinstal / dikonfigurasi dan html dikirim.
Newclique
7

Saya sarankan menggunakan https://www.npmjs.com/package/express-es6-template-engine - mesin templat gelombang yang sangat ringan dan sangat cepat. Nama ini agak menyesatkan karena dapat bekerja tanpa expressjs juga.

Dasar-dasar yang diperlukan untuk berintegrasi express-es6-template-enginedalam aplikasi Anda cukup sederhana dan cukup mudah untuk diterapkan:

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);
Luaskan cuplikan
Berikut adalah isi index.htmlfile yang berada di dalam direktori 'views' Anda: 

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

Jawabannya sangat sederhana. Anda Harus menggunakan app.engine ('html') untuk merender * .html Halaman. coba ini. Ini harus Memecahkan Masalah.

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

file .html Akan berfungsi

Dinesh Kanivu
sumber
2
Jawaban tidak lengkap. Di mana perubahan ini dilakukan? Dengan asumsi app.js tetapi jawaban Anda harus spesifik. Juga, ini kemungkinan tidak semua yang perlu diubah karena hasil dari membuat hanya tiga perubahan / penambahan ini adalah "Tidak dapat menemukan modul 'ejs'". Jawaban Anda mungkin dekat tetapi Anda perlu menambahkan sedikit info saja.
Newclique
Juga, rendering tidak sama dengan melayani file. Rendering memerlukan server untuk melakukan pra-proses file dan menambahkan konten dinamis apa pun yang dilewatkan ke metode render. Mungkin itulah yang diinginkan OP tetapi beberapa orang mengacaukan rendering dengan serve. Konsep yang sangat berbeda.
Newclique
@wade untuk rendering file html daripada file ejs.
Dinesh Kanivu
3

File HTML dapat dirender menggunakan mesin ejs:

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

Dan pastikan file Anda di bawah "/ tampilan" dinamai dengan ".ejs".

Misalnya "index.ejs".

JerryFZhang
sumber
Ini bekerja tetapi terasa agak berantakan. Apakah Anda tahu jika ada peringatan untuk menggunakan .ejs sebagai pengganti .html? Sorak-sorai untuk mungkin perbaikan tercepat menyarankan semua sama!
mikeym
3

Mengomentari middleware untuk html yaitu

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

Alih-alih gunakan:

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

html bukan mesin tampilan, tetapi ejs menawarkan kemungkinan untuk menulis kode html di dalamnya

Wael Chorfan
sumber
1

ke halaman html server melalui routing, saya telah melakukan ini.

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

dan mengganti nama file .html saya menjadi file .hbs - setang mendukung html biasa

Avinash
sumber
1

Untuk membuat mesin render menerima html, bukan giok, Anda dapat mengikuti langkah-langkah berikut;

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.

Ini seharusnya bekerja

Md Mehadi Hasan Mozumder
sumber
1

Cobalah solusi sederhana ini, itu berhasil untuk saya

app.get('/', function(req, res){
    res.render('index.html')
  });
Kiryamwibo Yenusu
sumber
1
Anda harus menambahkan semua baris Anda, ini sendiri tidak berfungsi.
MushyPeas
1

Instal template ejs

npm install ejs --save

Lihat ej di app.js

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

Buat template ejs dalam tampilan seperti dilihat / indes.ejs & gunakan tempalte ejs di router

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

Buat template html dengan bantuan 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
sumber
0

File html tidak perlu dirender.
apa yang dilakukan mesin render adalah mengubah file yang bukan file Html menjadi file Html.
untuk mengirim file Html, cukup lakukan:

res.sendFile("index.html");

Anda mungkin perlu menggunakan __dirname+"/index.html"begitu express akan tahu jalur yang tepat.

GideonMax
sumber