tnantoka notes

hello worldが好きです

Nest.js: EJSで画面表示

npm install ejs express-ejs-layouts --save
# src/main.ts

 import { NestFactory } from '@nestjs/core';
 import { AppModule } from './app.module';
+import { NestExpressApplication } from '@nestjs/platform-express';
+import * as expressLayouts from 'express-ejs-layouts';
 
 async function bootstrap() {
-  const app = await NestFactory.create(AppModule);
+  const app = await NestFactory.create<NestExpressApplication>(AppModule);
+
+  app.setViewEngine('ejs');
+  app.use(expressLayouts);
   await app.listen(3000);
 }
 bootstrap();
# src/posts/posts.controller.ts

-import { Controller, Get } from '@nestjs/common';
+import { Controller, Get, Render } from '@nestjs/common';
 import { PostsService } from './posts.service';
 
 @Controller('posts')
@@ -6,7 +6,8 @@ export class PostsController {
   constructor(private readonly postsService: PostsService) {}
 
   @Get()
+  @Render('posts/index')
   async findAll() {
-    return await this.postsService.findAll();
+    return { posts: await this.postsService.findAll() };
   }
 }
# views/layout.ejs 

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Blog</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="border-b py-3">
    <div class="container mx-auto flex">
      <a href="/" class="text-xl">Blog</a>
      <a href="/posts/new" class="ml-auto">投稿</a>
    </div>
  </div>
  <div class="container mx-auto">
    <%- body %>
  </div>
</body>
</html>
# views/posts/index.ejs 

<div>
  <% for (const post of posts) { %>
    <div class="mt-6 flex items-center">
      <h2 class="text-3xl"><%= post.title %></h2>
      <a href="/posts/<%= post.id %>/edit" class="ml-auto">編集</a>
    </div>
    <ul class="mt-2 flex space-x-3 text-xs">
      <li>
        <span class="py-1 px-2 rounded border border-gray-300">作成</span>
        <span class="font-mono"><%= post.createdAt.toLocaleString() %></span>
      </li>
      <li>
        <span class="py-1 px-2 rounded border border-gray-300">更新</span>
        <span class="font-mono"><%= post.updatedAt.toLocaleString() %></span>
      </li>
    </ul>
    <div class="pt-2"><%= post.content %></div>
  <% } %>
</div>

f:id:tnantoka:20211104222245p:plain

特にハマりどころは無し。