728x90
npm install --save hbshandlebars 뷰 엔진 설치
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
async function bootstrap() {
// const app = await NestFactory.create(AppModule);
const app = await NestFactory.create<NestExpressApplication>(AppModule);
/**
* for applying MVC pattern
* _dirname : current path
*/
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(3000);
}
bootstrap();main.ts에 정적 파일 경로 및 뷰엔진 세팅
public, views 폴더를 만들어주고, 각자 파일을 만들어준다.
{{! views/index.hbs }}
<html>
<head>
<meta charset='utf-8' />
<title>App</title>
<link href='css/styles' rel='stylesheet' />
</head>
<body>
<h1>Title</h1>
{{message}}
</body>
</html>
@Controller('news')
export class NewsController {
constructor(private readonly newsService: NewsService) {}
@Get()
getAllNews() {
return this.newsService.getAllNews();
}
@Get('/home')
@Render('index')
test() {
return { message: 'Hi guys' };
}
...임시로 controller에 테스트 handler를 만들어주었다.
/* public/css */
h1 {
color: salmon;
}
.test {
color: red;
}public 폴더 내 CSS 파일도 만들어주었다.
요청을 해보니 HTML은 잘 렌더링되는데, CSS는 실패하고 있는 상황이다.
<html>
<head>
<meta charset='utf-8' />
<title>App</title>
<link href='styles.css' rel='stylesheet' />
<style>
h1 { color: salmon;}
</style>
</head>
<body>
<h1>Title</h1>
<div class='test'>hello</div>{{message}}
<script src='js/scripts.js'></script>
</body>
</html>일단 html 스크립트 내에 넣어주었다. 중요한 문제가 아니라서 일단 넘어가도록 하겠다.
Ref
728x90
'Research > Nest.js' 카테고리의 다른 글
| nestjs_error_html formData를 axios로 서버에 전송하기 (0) | 2023.04.17 |
|---|---|
| nestjs_RDS Postgres 인스턴스 생성 및 nestjs 모듈 설치 (0) | 2023.04.15 |
| nestjs_특정 버전으로 nest 설치하는 방법 (0) | 2023.04.12 |
| nestjs_swagger API 보안 설정 (0) | 2023.04.08 |
| nestjs_repository 추가하기 (0) | 2023.04.06 |
댓글