https://expressjs.com/en/starter/generator.html

 

위 방법데로 시작하면 다음과 같은 에러

 

no default engine was specified and no extension was provided

 

해결 = > https://d2fault.github.io/2018/12/26/20181226-nodejs-html-load-with-express/

 

 

 

[Node.js] express engine으로 html load하기

2018-12-26

 CONSOLIDATE, EJS, EXPRESS, MUSTACHE, NODE.JS

개요

node.js에서 routing되는 view를 html로 뿌려주고 싶었다. 보통의 view는 ejs를 사용하는 것 같은데, 만드는 것이 고작 나만 볼 test page이기에 ejs까진 필요가 없었다. 그런데 웬일? 이렇게 단순한 작업에도 에러 등장.

 

Error: No default engine was specified and no extension was provided

그렇다. node.js express engine으로 html file을 load할 때 위의 에러가 발생했다. 구글링 결과, 두 가지의 해결 방법을 찾아냈다. 사실 두 가지 방법 외에 sendFile로 해당 html file을 그대로 뿌려 주는 방법도 있다.

1. html을 ejs로 rendering(추천)

1. ejs 를 설치한다.

   npm install ejs
   

2. 화면 엔진을 ejs 로 설정한다.

   // 화면 engine을 ejs로 설정
   app.set('view engine', 'ejs');
   app.engine('html', require('ejs').renderFile);
   

이대로 사용하면 된다. ^^;; full code는 아래와 같다.

app.js

var express = require('express');
var app = express();
var logger = require('morgan');

// router 설정
var indexRouter = require('./routes/index');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// view 경로 설정
app.set('views', __dirname + '/views');

// 화면 engine을 ejs로 설정
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

// 기본 path를 /public으로 설정(css, javascript 등의 파일 사용을 위해)
app.use(express.static(__dirname + '/public'));

app.use('/', indexRouter);

module.exports = app;

index.js 

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index.html');
});

module.exports = router;

 

2. consolidate, mustache 모듈 설치

잘은 모르겠지만, mustache 가 html file을 ejs로 렌더링하는 것 같다.

1. 프로젝트 루트 폴더에 consolidate 와 mustache 를 설치한다.

   npm install consolidate
   npm install mustache
   

2. server 파일에 consolidate 을 추가한다.

   // 변수 이름은 마음대로 정해도 됨.
   var engines = require('consolidate');
   

3. 화면 engine을 html로 설정한다.

   // 화면 engine을 html로 설정
   app.engine('html', engines.mustache);
   app.set('view engine', 'html');
   

이것도 이렇게 끝! 나는 다음과 같이 사용해 보았다.

app.js

var express = require('express');
var app = express();
var engines = require('consolidate');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

// router 설정
var indexRouter = require('./routes/index');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// view 경로 설정
app.set('views', __dirname + '/views');

// 화면 engine을 html로 설정
app.engine('html', engines.mustache);
app.set('view engine', 'html');

// 기본 path를 /public으로 설정(css, javascript 등의 파일 사용을 위해)
app.use(express.static(__dirname + '/public'));

app.use('/', indexRouter);

module.exports = app;

index.js 

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Main' });
});

module.exports = router;