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 cursoVocê 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 cursoUma 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.
