[TypeScript] Nest.js – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

$ sudo npm install @nestjs/cli -g
$ npx nest new nest_app
> npm
$ npm run start:dev
http://192.168.34.10:3000/
hello worldと表示されている

$ npm install ejs

nest-cli.json

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
  	"assets": ["**/*.ejs"]
  }
}

main.ts

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { AppModule } from './app.module';
import { join } from 'path'

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, '..', 'public'))
  app.setBaseViewsDir(join(__dirname, '..', 'views'))
  app.setViewEngine('ejs')
  
  await app.listen(3000);
}
bootstrap();

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
  <h1 class="bg-primary text-white p-2"><%= header %></h1>
  <div class="container py-2">
  	<h2 class="mb-3"><%= title %></h2>
  	<div class="alert alert-primary">
  		<%= message %>
  	</div>
  </div>
</body>
</html>

src/app.controller.ts

import { Controller, Get, Render } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  @Render('index')
  root(){
  	return {
  		title: 'Nest sample app',
  		header: 'Nest.js',
  		message: 'Hello world!'
  	}
  }
}

index.ejs

<body>
  <h1 class="bg-primary text-white p-2"><%= title %></h1>
  <div class="container py-2">
  	<h2 class="mb-3"><%= msg %></h2>
  	<div class="alert alert-primary">
  		  <form method="post" action="/">
            <div class="mb-2">
              <label>ID:</label>
              <input type="text" name="id" class="form-control">
            </div>
            <div class="mb-2">
              <label>password:</label>
              <input type="password" name="pass" class="form-control">
            </div>
            <div>
              <input type="submit" value="送信" class="btn btn-info">
            </div>
        </form>
  	</div>
  </div>
</body>

src/app.controller.ts

import { Controller, Get, Post, Body, Render } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('/')
  @Render('index')
  root(){
  	return {
  		title: 'Nest app',
  		msg: 'send form:'
  	}
  }

  @Post('/')
  @Render('index')
  send(@Body() form:any){
  	return {
  		title: 'Nest form',
  		msg: JSON.stringify(form)
  	}
  }
}

### Ajax
app.controller.ts

  @Post('/')
  send(@Body() form:any){
  	return form
  }

index.ejs

  <script src="index.js"></script>
</head>
<body>
  <h1 class="bg-primary text-white p-2"><%= title %></h1>
  <div class="container py-2">
  	<h2 class="mb-3"><%= msg %></h2>
  	<div class="alert alert-primary">
            <div class="mb-2">
              <label>ID:</label>
              <input type="text" name="id" class="form-control">
            </div>
            <div class="mb-2">
              <label>password:</label>
              <input type="password" name="pass" class="form-control">
            </div>
            <div>
              <input type="submit" value="送信" class="btn btn-info">
            </div>
  	</div>
  </div>
</body>

public/index.ts

import { Controller, Get, Post, Body, Render } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get('/')
  @Render('index')
  root(){
  	return {
  		title: 'Nest app',
  		msg: 'send form:'
  	}
  }

  @Post('/')
  send(@Body() form:any){
  	return form
  }
}

なんか上手く動いていないような気がするが…