NestJS com template engine handlebars

Neste artigo, nós mostraremos a você como configurar e utilizar a template engine handlebars com o NestJS. Para começar, é fundamental que você tenha o Node.js instalado e configurado em seu sistema.

Curso Node.js - Fundamentos Conhecer o curso

Você pode conferir um passo a passo detalhado em nosso artigo sobre a Instalação do Node.js para Windows, Mac e Linux.

Instalação e configuração do handlebars

Feito isso, é necessário instalar o NestJS. Para realizar essa instalação, basta executar o seguinte comando:

npm i -g @nestjs/cli

O próximo passo é criar um projeto. Para isso, podemos executar o comando:

nest new project-name

Em “project-name” nós devemos escolher um nome para o projeto, neste exemplo, vamos utilizar o nome “hbs”.

Obs: para este exemplo, nós selecionamos o npm como gerenciador de pacotes.

A aplicação criada terá a seguinte estrutura:

src
	app.controller.spec.ts
	app.controller.ts
	app.module.ts
	app.service.ts
	main.ts

Agora, vamos instalar o handlebars executando o seguinte comando:

npm install --save hbs

Finalmente, a estrutura da aplicação foi criada e a template engine instalada, entretanto, é necessário efetuar algumas configurações para que o NestJS possa utilizar o handlebars. Para isso, vamos configurar o arquivo main.ts da seguinte maneira:

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<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');

  await app.listen(3000);
}
bootstrap();

Nós configuramos o handlebars como template engine padrão no código acima. Além disso, definimos a pasta “public” como diretório estático, que contém arquivos públicos como CSS e JavaScript. É importante destacar que podemos utilizar outras ferramentas, como o Bootstrap, juntamente com o handlebars.

Também apontamos um diretório chamado “views”, que será onde os arquivos do handlebars serão armazenados. Portanto, é fundamental que você crie o diretório “views” na raiz do seu projeto.

Criando e renderizando uma view

Neste momento vamos criar uma view chamada index.hbs dentro da pasta “views”:

<!DOCTYPE html>
<html>
  <head>
    <title>Uma View com Handlebars</title>
  </head>
  <body>
    <h1>NestJS com Handlebars!</h1>
  </body>
</html>

O próximo passo é configurar o app.controller.ts, da seguinte forma:

import { Controller, Get, Render } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Render('index')
  index() {
    //
  }
}

Veja que criamos o método index(), que recebe dois decorators:

• “Get”: Responsável por apontar qual o verbo HTTP que será utilizado na requisição.
• “Render”: Responsável por renderizar a view que será passada como parâmetro.

Observação: Neste caso, será renderizada a view de mesmo nome que se encontra na pasta “views”, conforme configurado no main.ts.

Por fim, podemos testar a aplicação. Para isso, execute o comando npm run start e abra o navegador em http://localhost:3000. A view index.hbs será renderizada:

Renderizando dados com handlebars

Curso Nest.js - Fundamentos Conhecer o curso

Uma das vantagens de utilizar uma template engine é a possibilidade de criar views dinâmicas, como, renderizar dados enviados do back-end para o front-end. Então, vamos retornar uma informação do controller para a view da seguinte maneira:

import { Controller, Get, Render } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Render('index')
  index() {
    return { mensagem: 'Veja a formação de NestJS da TreinaWeb!' };
  }
}

Agora é possível renderizar a string “Veja a formação de NestJS da TreinaWeb!” para a view:

<!DOCTYPE html>
<html>
  <head>
    <title>Uma View com Handlebars</title>
  </head>
  <body>
    <h1>NestJS com Handlebars!</h1>
    <p>{{mensagem}}</p>
  </body>
</html>

Veja no código acima onde adicionamos um parágrafo, o resultado será o seguinte:

Conclusão

Neste artigo, nós aprendemos como configurar a template engine handlebars para ser utilizada em conjunto com o NestJS, permitindo que você crie views dinâmicas e robustas.

Caso tenha ficado alguma dúvida você pode acessar o repositório deste exemplo para futuras consultas neste repositório do GitHub.

Por fim, caso queira aprender mais sobre NestJS saiba que aqui na TreinaWeb temos o curso Nest.js - Fundamentos que possui 02h07 de vídeos e um total de 18 exercícios. Conheça também nossos outros cursos de TypeScript.

Veja quais são os tópicos abordados durante o curso de Nest.js - Fundamentos:

• Conhecendo a estrutura;
• Utilizando Nest CLI
• Entendendo Rotas, Controllers e Views;;
• Conexão com banco de dados;
• Usando TypeORM;
• Template Engine.