Express 프레임 워크를 사용하여 시작하려고하는 기본 node.js 앱이 있습니다. 파일 이있는 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')
내가 여기서 무엇을 놓치고 있습니까?
답변:
옥에 일반 HTML 페이지를 포함시킬 수 있습니다.
views / index.jade에서
include plain.htmlviews / plain.html에서
<!DOCTYPE html>
...
app.js는 여전히 옥을 렌더링 할 수 있습니다.
res.render(index)이 답변 중 대부분이 구식입니다.
express 3.0.0 및 3.1.0을 사용하면 다음이 작동합니다.
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);express 3.4+에 대한 대안 구문과주의 사항은 아래 주석을 참조하십시오.
app.set('view engine', 'ejs');그런 다음 다음과 같은 작업을 수행 할 수 있습니다.
app.get('/about', function (req, res)
{
res.render('about.html');
});views하위 폴더에 보기가 있고 ejs노드 모듈 을 설치했다고 가정합니다 . 그렇지 않은 경우 노드 콘솔에서 다음을 실행하십시오.
npm install ejs --saveExpress.js 가이드 : 뷰 렌더링에서
보기 파일 이름의 형식은 취
Express.ENGINE,ENGINE해야합니다 모듈의 이름입니다. 예를 들어, 뷰layout.ejs는 뷰 시스템에를 전달할 것입니다.require('ejs')로드되는 모듈은 Express를 준수하기 위해 메소드exports.render(str, options)를 내 보내야 하지만app.register()엔진을 파일 확장자에 맵핑하는 데 사용될foo.html수 있으므로 jade에 의해 렌더링 될 수 있습니다.
따라서 간단한 렌더러를 만들거나 jade를 사용하십시오.
app.register('.html', require('jade'));Express 3에서는이 방법의 이름이 바뀌 었습니다.
app.engine
app.engine('.html', require('ejs').renderFile);
HTML 파일을 읽고 보낼 수도 있습니다.
app.get('/', (req, res) => {
fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
res.send(text);
});
});이 시도. 그것은 나를 위해 작동합니다.
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");
});app.register. 아마도 Express 3.0.0.rc3에서 더 이상 사용되지 않습니까? TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});express@~3.0.0을 사용하는 경우 예제에서 아래 행을 변경하십시오.
app.use(express.staticProvider(__dirname + '/public'));이런 식으로 :
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));Express 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')app.use(express.static(__dirname + '/public'));서버를 시작한 후 왜 반복 app.listen합니까?
나는 또한 동일한 문제에 직면 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 템플릿을보기 엔진으로 사용하는 것입니다. 거기에서 * .ejs보기 파일에 원시 HTML을 작성할 수 있습니다.
ejs전 세계적으로 설치해야 합니까?
폴더 구조 :
.
├── index.html
├── node_modules
│ ├──{...}
└── server.jsserver.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>산출:
안녕 세상
내 프로젝트를 위해 다음 구조를 만들었습니다.
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);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.css2)
파일 캐시를 만들 수 있습니다.
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"] );
};);나는 2 줄 아래에 추가했고 그것은 나를 위해 일한다.
app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);npm install ejs --save는 작업 디렉토리에서 실행 됩니다.
Express 라우트에서 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/
단순히 HTML 파일을 전달하기 위해 ejs에 의존하고 싶지 않았으므로 작은 렌더러를 직접 작성했습니다.
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 );
} );RESTful API를 사용하여 각도 앱을 설정하려고 시도했지만 도움이되지는 않았지만이 페이지에 여러 번 방문했습니다. 내가 찾은 것이 다음과 같습니다.
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)
});다음은 Express 서버의 전체 파일 데모입니다!
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}!
`);
});2020 년경에 여전히 표현이 객체의 sendFile메소드를 사용하지 않고 HTML 페이지를 렌더링하는 방법을 추가하지 않았다는 것은 매우 슬픈 일입니다 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>'));이전에 정적 미들웨어에 의해 처리되었던 Express 경로로 "/"에 대한 요청을 처리하고 싶었습니다. 그러면 응용 프로그램 설정에 따라 일반 버전의 index.html 또는 연결된 + 축소 된 JS 및 CSS를로드 한 버전을 렌더링 할 수 있습니다. Andrew Homeyer의 답변 에서 영감을 받아 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');
});이것은 꽤 잘 작동했습니다.
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.
});이미 그 안에 내용이 모두 들어있는 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));이 방법을 사용하면 express 외에 추가 종속성이 필요하지 않습니다. 서버가 이미 생성 된 html 파일을 보내도록하려면 위의 방법을 사용하는 매우 간단한 방법입니다.
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
나는 보통 이것을 사용한다
app.configure(function() {
app.use(express.static(__dirname + '/web'));
});/ web 디렉토리의 내용을 공유하므로주의하십시오.
나는 그것이 도움이되기를 바랍니다
node.js에 Express 프레임 워크를 사용하는 경우
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는 ejs 파일 이름의 확장자를 가진 views 디렉토리에 html 파일이 있습니다.
form.html.ejs
그런 다음 form.js를 작성하십시오.
res.render('form.html.ejs');