Відображати основний перегляд HTML?

279

У мене є базовий додаток node.js, який я намагаюся зійти з місця за допомогою Express Framework. У мене є viewsпапка, в якій я маю index.htmlфайл. Але я отримую таку помилку при завантаженні веб-браузера.

Помилка: не вдається знайти модуль 'html'

Нижче мій код.

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

Що я тут пропускаю?

— aherrick
джерело

298

Ви можете мати нефрит включити звичайну сторінку HTML:

у видах / index.jade

include plain.html

у видах / plain.html

<!DOCTYPE html>
...

і app.js все ще може відображати нефрит:

res.render(index)

— Андрій Домашнє
джерело

1

Зауважу лише, що мені хочеться лише один файл .html, тому що моя програма була однією сторінкою;)

— diosney

1

Чи можемо ми за допомогою цього методу включити кілька сторінок HTML / JS?

— користувач3398326

6

невже ви не зможете надати ту сторінку HTML без шаблону нефриту лише для початкового тестування експресу?

— PositiveGuy

1

Тож ми повинні створити шаблон нефриту для кожного нашого HTML-файлу?

— Кріс - молодший

4

Більше хак, а не рішення.

— Озіл

226

Багато з цих відповідей застаріли.

Використовуючи експрес 3.0.0 та 3.1.0, такі дії:

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);

Дивіться коментарі нижче щодо альтернативного синтаксису та застережень для експрес 3.4+:

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

Тоді ви можете зробити щось на кшталт:

app.get('/about', function (req, res)
{
    res.render('about.html');
});

Це передбачає, що ви маєте свої перегляди в viewsпідпапці і що ви встановили ejsмодуль вузла. Якщо ні, запустіть наступне на консолі Node:

npm install ejs --save

— Дрю Ноакс
джерело

@MichaelDausmann, привіт, я включив цю інформацію у відповідь.

— Дрю Ноакс

чому в цьому випадку res.render вимагає розширення .html, але не у випадку за замовчуванням з нефритом. з кодовим кодом він просто викликає res.render ('індекс', {назва: 'Express'}); але ось це: res.render ('about.html');

— Трансцендентність

6

З Express 3.4.2: app.set ('механізм перегляду', 'ejs');

— roland

3

Ви повинні скористатися командою 'npm install ejs --save', щоб оновити пакунок.json

— Том Теман,

8

навіщо вам потрібні ejs?

— PositiveGuy

71

З посібника Express.js: Перегляд візуалізації

Переглянуті імена файлів мають форму Express.ENGINE, де ENGINEзнаходиться назва модуля, який буде потрібно. Наприклад, представлення layout.ejsпокаже системі переглядуrequire('ejs') , що завантажуваний модуль повинен експортувати методexports.render(str, options) для відповідності Express, однак app.register()його можна використовувати для нанесення двигунів на розширення файлів, так що, наприклад, foo.htmlможе бути надано нефритом.

Отже, або ви створюєте власний простий рендер, або просто використовуєте нефрит:

 app.register('.html', require('jade'));

Більше про app.register.

Зауважте, що у Express 3 цей метод перейменований app.engine

— Іво Ветцель
джерело

57

Примітка - app.register було перейменовано на app.engine в Express 3.

— Spongeboy

8

Дивіться відповідь від Ендрю Хомейера. Це фактична відповідь.

— Девід Бетц

7

З якоїсь іншої відповіді, для Express 4 я закінчився використаннямapp.engine('.html', require('ejs').renderFile);

— CrazyPyro

У експресі 4 ви також можете використовувати: app.set ('view engine', 'nede');

— Даніель Хуан

48

Ви також можете прочитати HTML-файл і надіслати його:

app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});

— keegan3d
джерело

23

це рішення погано, оскільки немає кешування файлів; він читається для кожного запиту.

— Марсель Фальєр

2

його потенційно досить легко кешувати вручну. Просто збережіть файл читання змінною і прочитайте лише знову, якщо ця змінна порожня. Ви також можете використовувати об'єкт JS та зберігати різні файли в різних змінних із часовими позначками. Впевнені, що це більше роботи, ніж більшість людей, але це добре з людьми, які починають вузол. Це легко зрозуміти

— Naman Goel

5

Yikes. Це перемагає всю точку конвенційних, спрощених архітектур (як MVC).

— Девід Бетц

@MarcelFalliere Ви припускаєте, що він хоче кешувати файл, або що він не хоче використовувати власні рішення кешування. Дякую keegan3d за відповідь.

— Бенні

@MarcelFalliere Тоді яке правильне рішення? Я бачу інші відповіді, які потребують нових залежностей. Це потрібно лише для обслуговування html-файлів?

— JCarlosR

45

спробуйте це. це працює для мене.

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

— спектр
джерело

2

виникли проблеми з точною конфігурацією, вказаною вище, тому я видалив крапку з ".html" і додав це: app.set ('view engine', 'html'); app.set ("перегляди", ___ ім'я + "/ перегляди"); за ідеальну візуалізацію

— Bijou Trouvaille

8

Це трохи дивно ... ви повинні служити HTML як статичні файли. Це також дає перевагу кращому кешування. Створення користувацького "html-компілятора" здається неправильним. Якщо вам потрібно надіслати файл зсередини маршруту (що дуже рідко потрібно зробити), просто прочитайте та надішліть його. В іншому випадку просто переспрямуйте на статичний html.

— enyo

2

@Enyo цей коментар здається дивним, враховуючи, як зробити те, що ви говорите, слід зробити, це запитання, про яке ви питаєте, і ваша відповідь - просто зробити це. Як ви обслуговуєте статичний html з кешуванням?

— Кієотичний

3

Я бачу помилку на app.register. Можливо, це застаріло в Express 3.0.0.rc3? TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'

— Дрю Ноакс

1

@enyo, ти пропустив точку парної архітектури. Якщо шаблон є контролером / переглядом (або / процесор / перегляд, незалежно від конкретної архітектури), ви не можете відхилитися від цього з застарілою моделлю розширень. Ви повинні ставитися до свого HTML як до візуалізованого вмісту, як до всього іншого. ДЕРЖАЙТЕ ДРУГ, чувак.

— Девід Бетц

22

app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});

— кивок
джерело

5

sendfile - це не кеш у виробничому режимі, тому це не гарне рішення.

— Тео Чонг Пінг

1

@SeymourCakes Будь ласка, виправте мене, якщо я помиляюся, але я думаю, що sendFile тепер підтримує кешування: devdocs.io/express/index#res.sendFile

— KhoPhi

19

Якщо ви використовуєте express@~3.0.0, змініть рядок нижче зі свого прикладу:

app.use(express.staticProvider(__dirname + '/public'));

щось подібне:

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

Я зробив це, як описано на сторінці експрес-api і це працює як шарм. За допомогою цього налаштування вам не потрібно писати додатковий код, щоб його стало досить просто використовувати для мікропроцедур чи тестування.

Повний код, перелічений нижче:

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

— Марк Карвовський
джерело

1

Чому ви повторюєте app.use(express.static(__dirname + '/public'));після запуску сервера app.listen?

— фатухоку

2

яка різниця в обслуговуванні HTML-сторінки як статичної порівняно з просто завантаженням її нестатично з експресом?

— PositiveGuy

14

Я також зіткнувся з тим же питанням в express 3.Xі node 0.6.16. Наведене вище рішення не працюватиме для останньої версії express 3.x. Вони видалили app.registerметод і додали app.engineметод. Якщо ви спробували вказане вище рішення, у вас може виникнути наступна помилка.

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)

Щоб позбутися від повідомлення про помилку. Додайте наступний рядок до свогоapp.configure function

app.engine('html', require('ejs').renderFile);

Примітка. Ви повинні встановити ejsдвижок шаблонів

npm install -g ejs

Приклад:

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

Примітка . Найпростішим рішенням є використання шаблону ejs як двигуна перегляду. Там ви можете записати сирий HTML у * .ejs переглядати файли.

— Jak
джерело

3

Чи потрібно встановлювати ejsглобально?

— Дрю Ноакс

скажіть мені, що не може знайти файл 'index.html'

— MetaGuru

9

структура папки:

.
├── 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>

вихід:

Привіт Світ

— KARTHIKEYAN.A
джерело

7

Якщо вам не потрібно використовувати каталог переглядів , просто перемістіть HTML-файли для загального користування каталогу нижче.

а потім додайте цей рядок у app.configure замість '/ views'.

server.use (express.static (__ dirname + '/ public'));

— спектр
джерело

5

Щоб відобразити сторінку Html у вузлі, спробуйте наступне:

app.set('views', __dirname + '/views');

app.engine('html', require('ejs').renderFile);

Вам потрібно встановити ejsмодуль через npm:
```
   npm install ejs --save
```

— Троян
джерело

Це рішення спрацювало на мене. Хоча я і спробував статичний варіант. Чи можете ви пояснити механізм, який стоїть за ним. Дякую!

— суворий

4

Для свого проекту я створив таку структуру:

index.js
css/
    reset.css
html/
    index.html

Цей код обслуговує index.html для /запитів, а reset.css для /css/reset.cssзапитів. Досить просто, і найкраща частина полягає в тому, що вона автоматично додає заголовки кешу .

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

— Знаркус
джерело

3

1) Найкращий спосіб - встановити статичну папку. У вашому головному файлі (app.js | server.js | ???):

app.use(express.static(path.join(__dirname, 'public')));

public / css / form.html
public / css / style.css

Тоді ви отримали статичний файл із папки "public":

http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css

2)

Ви можете створити кеш файлів.
Використовуйте метод 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"] );                                
};);

— Томаш
джерело

непогано! ось повна демонстрація файлів! https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

— xgqfrms

3

У програмі Express 4.0.0 єдине, що вам потрібно зробити, - прокоментувати 2 рядки в app.js:

/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.

А потім перенесіть свій статичний файл у / public каталог. Приклад: /public/index.html

— u84six
джерело

3

Я додав нижче 2 рядка, і це працює на мене

    app.set('view engine', 'html');
    app.engine('html', require('ejs').renderFile);

— Нарен Чеджара
джерело

це дає мені таку помилку "Помилка. Неможливо знайти модуль" ejs "у Function.Module._resolveFilename (module.js: 338: 15) у Function.Module._load (module.js: 280: 25) у Module.require ( module.js: 364: 17) при потребі (module.js: 380: 17) "

— Lygub Org

@LygubOrg запустіть npm install ejs --saveу своєму робочому каталозі.

— A1rPun

1

чи потрібно додати залежність лише для подачі html-файлу?

— JCarlosR

3

Спробуйте функцію res.sendFile () в експрес-маршрутах.

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

Читайте тут: http://codeforgeek.com/2015/01/render-html-file-expressjs/

— Шейх Шахід
джерело

3

Я не хотів залежати від ejs для просто доставки HTML-файлу, тому я просто написав крихітний рендер:

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

— Der Hochstapler
джерело

2

Я намагався налаштувати кутовий додаток з експрес-API RESTful і кілька разів висаджувався на цю сторінку, хоча це не було корисно. Ось що я виявив, що працював:

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

Тоді в зворотному дзвінку для ваших маршрутів api виглядає так: res.jsonp(users);

Ваша клієнтська система може обробляти маршрутизацію. Express призначений для обслуговування API.

Мій домашній маршрут виглядає так:

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

— Коннор П’явка
джерело

2

res.sendFile(__dirname + '/public/login.html');

— хіманшу ядів
джерело

2

Ось повна демонстрація файлів експрес-сервера!

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

сподіваємось, що це допоможе вам!

// 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}!
    `);
});

Розгорніть фрагмент

— xgqfrms
джерело

1

Додайте в код наступні рядки

Замініть "нефрит" на "ejs" та "XYZ" (версія) на "*" у файлі package.json
```
  "dependencies": {
   "ejs": "*"
  }
```
Потім у файл app.js додайте наступний код:

app.engine('html', require('ejs').renderFile);

app.set('view engine', 'html');
І пам’ятайте, що всі .HTML-файли зберігаються у папці переглядів

Ура :)

— Амулія Кашяп
джерело

1

Для звичайного html вам не потрібен пакет npm чи проміжне програмне забезпечення

просто скористайтеся цим:

app.get('/', function(req, res) {
    res.sendFile('index.html');
});

— Шивам Четрі
джерело

1

Дуже прикро, що приблизно в 2020 році досі експрес не додав спосіб візуалізації HTML-сторінки без використання sendFileметоду responseоб'єкта. Використання sendFileне є проблемою, але передавати йому аргумент у формі path.join(__dirname, 'relative/path/to/file')не вважає себе правильним. Чому користувач повинен приєднатися __dirnameдо файлового шляху? Це слід робити за замовчуванням. Чому корінь сервера не може бути, скасувавши каталог проектів? Крім того, встановити залежність від шаблонів просто для надання статичного HTML-файлу знову не є правильним. Я не знаю правильного способу вирішення проблеми, але якби мені довелося подавати статичний HTML, я б зробив щось на кшталт:

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

Наведений вище приклад передбачає, що структура проекту має viewsкаталог, а статичні HTML-файли знаходяться всередині неї. Наприклад, скажімо, у viewsкаталозі є два файли HTML з назвою, index.htmlі about.htmlтоді, щоб отримати доступ до них, ми можемо відвідати: localhost:8153/index.htmlабо просто localhost:8153/завантажити index.htmlсторінку та localhost:8153/about.htmlзавантажити about.html. Ми можемо використовувати аналогічний підхід для обслуговування реагуючої / кутової програми, зберігаючи артефакти в viewsкаталозі або просто використовуючи dist/<project-name>каталог за замовчуванням та налаштовуючи його на сервері js таким чином:

app.use(express.static('dist/<project-name>'));

— Vighnesh Raut
джерело

0

Я хотів дозволити, щоб запити до "/" оброблялися експрес-маршрутом, де раніше вони оброблялися програмним забезпеченням статики. Це дозволило б мені надати звичайну версію index.html або версію, що завантажила об'єднані + мінімізовані JS та CSS, залежно від налаштувань програми. Надихнувшись відповіддю Ендрю Домашника , я вирішив перетягнути свої HTML-файли - немодифіковані - у папку перегляду, налаштувати Express так, як

   app.engine('html', swig.renderFile);
   app.set('view engine', 'html');
   app.set('views', __dirname + '/views');

І створив обробник маршрутів так

 app.route('/')
        .get(function(req, res){
            if(config.useConcatendatedFiles){
                return res.render('index-dist');
            }
            res.render('index');       
        });

Це вийшло досить добре.

— К. Франциск
джерело

0

У server.js будь ласка, включіть

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

— shumana chowdhury
джерело

0

Якщо ви намагаєтеся обслуговувати HTML-файл, у якого ВЖЕ є весь вміст у ньому, тоді його не потрібно "рендерувати", його просто потрібно "подавати". Візуалізація - це коли сервер оновлює або вводить вміст перед відправленням сторінки в браузер, і для цього потрібні додаткові залежності, такі як ejs, як показують інші відповіді.

Якщо ви просто хочете направити браузер на файл на основі їх запиту, слід використовувати res.sendFile (), як це:

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

Таким чином, вам не потрібні додаткові залежності, крім експрес. Якщо ви просто хочете, щоб сервер надсилав ваші вже створені HTML-файли, вищезгадане - це дуже легкий спосіб зробити це.

— aleph_one
джерело

0

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

Помістіть файл index.html у загальну папку

<!DOCTYPE html>
<html>
<head>
    <title>Render index html file</title>
</head>
<body>
    <h1> I am from public/index.html </h1>
</body>
</html>

Тепер запустіть наступний код у своєму терміналі

вузол index.js

— Ахмад Шаріф
джерело

-1

Зазвичай я цим користуюся

app.configure(function() {
    app.use(express.static(__dirname + '/web'));
});

Будьте обережні, тому що ви поділитеся чим-небудь у / веб-каталозі.

Я сподіваюся, що це допомагає

— DiogoNeves
джерело

-2

якщо ви використовуєте експрес-фреймворк для node.js

встановити npm ejs

потім додайте конфігураційний файл

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router)

;

візуалізувати сторінку з експорту модуля form.js має файл HTML у режимі перегляду з розширенням імені файлу ejs як form.html.ejs

потім створіть form.js

res.render('form.html.ejs');

— рунештехно
джерело

Що це за безлад?

— Vighnesh Raut