NestJS com template engine handlebars \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 13 Min 21 Seg Tempo restante da oferta: 15 13 21 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) NestJS com template engine handlebars [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) # NestJS com template engine handlebars Neste artigo vamos aprender a configurar o NestJS com o handlebars, uma template engine que permite criarmos views dinâmicas e robustas. [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/NEST-JS-COM-HANDLEBARS.png) Neste artigo, nós mostraremos a você como configurar e utilizar a [template engine](https://www.treinaweb.com.br/blog/o-que-e-template-engine "template engine") [handlebars](https://handlebarsjs.com/ "handlebars") com o [NestJS](https://www.treinaweb.com.br/blog/o-que-e-nestjs "NestJS"). Para começar, é fundamental que você tenha o Node.js instalado e configurado em seu sistema. [ ![Node.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/node-js.svg) Curso Node.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/nodejs-fundamentos) Você pode conferir um passo a passo detalhado em nosso artigo sobre a [Instalação do Node.js para Windows, Mac e Linux](https://www.treinaweb.com.br/blog/instalacao-do-node-js-windows-mac-e-linux "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: ```bash npm i -g @nestjs/cli ``` O próximo passo é criar um projeto. Para isso, podemos executar o comando: ```bash 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: ```bash 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: ```bash 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: ```tsx 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); 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](https://www.treinaweb.com.br/blog/o-que-e-html "CSS") e [JavaScript](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript "JavaScript"). É importante destacar que podemos utilizar outras ferramentas, como o [Bootstrap](https://www.treinaweb.com.br/blog/o-que-e-bootstrap "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”: ```html Uma View com Handlebars NestJS com Handlebars! ``` O próximo passo é configurar o `app.controller.ts`, da seguinte forma: ```tsx 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](http://localhost:3000/). A view `index.hbs` será renderizada: ![exibindo uma view handlebars com dados simples](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/Captura-de-Tela-2023-04-03-a%CC%80s-14.56.27.png) ## **Renderizando dados com handlebars** [ ![Nest.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/nest-js.svg) Curso Nest.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/nestjs-fundamentos) 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: ```tsx 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: ```html Uma View com Handlebars NestJS com Handlebars! {{mensagem}} ``` Veja no código acima onde adicionamos um parágrafo, o resultado será o seguinte: ![exibindo uma view handlebars com dados dinâmicos](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/Captura-de-Tela-2023-04-03-a%CC%80s-15.03.01.png) ## 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](https://github.com/wesleygado/artigo-nestjs-handlebars). Por fim, caso queira aprender mais sobre [NestJS](https://nestjs.com/) saiba que aqui na [TreinaWeb](https://treinaweb.com.br/) temos o curso [Nest.js - Fundamentos](https://www.treinaweb.com.br/curso/nestjs-fundamentos) que possui **02h07 de vídeos** e um total de **18 exercícios**. Conheça também nossos outros cursos de [TypeScript](https://www.treinaweb.com.br/busca?q=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. - [ #TypeScript ](https://www.treinaweb.com.br/blog/tag/typescript) - [ #Template Engine ](https://www.treinaweb.com.br/blog/tag/template-engine) - [ #Node.js ](https://www.treinaweb.com.br/blog/tag/node-js) - [ #NestJS ](https://www.treinaweb.com.br/blog/tag/nestjs) Autor ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm) ## Wesley Gado Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wesley-gado) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Guia do framework NestJS ](https://www.treinaweb.com.br/blog/guia-do-framework-nestjs) Neste guia do framework NestJS vamos fazer um compilado de tópicos úteis sobre o framework, desde criar um projeto básico até autenticação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/NEST-JS-CLASS-VALIDATOR-CLASS-TRANSFORMER-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como enviar emails com NestJS e Nodemailer ](https://www.treinaweb.com.br/blog/como-enviar-emails-com-nestjs-e-nodemailer) Neste artigo vamos aprender como enviar emails utilizando o NestJS e o Nodemailer, um dos módulos mais utilizados do ecossistema NodeJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Como realizar upload no S3 com NestJS ](https://www.treinaweb.com.br/blog/como-realizar-upload-no-s3-com-nestjs) Neste artigo vamos aprender o passo a passo de como realizar o upload de arquivos para a AWS S3 utilizando uma aplicação NestJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/NEST-JS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ O que é NestJS? ](https://www.treinaweb.com.br/blog/o-que-e-nestjs) Vamos ver neste artigo uma breve descrição sobre o que é o NestJS e como criar uma aplicação base em minutos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Trabalhando com eventos no NestJS ](https://www.treinaweb.com.br/blog/trabalhando-com-eventos-no-nestjs) Neste artigo vamos aprender a utilizar os eventos com o NestJS, criando um exemplo onde vamos simular o envio de e-mails. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/NEST-JS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Autenticação: Refresh Token com NestJS ](https://www.treinaweb.com.br/blog/autenticacao-refresh-token-com-nestjs) Neste artigo vamos continuar no assunto de autenticação, abordando a estratégia de refresh token com o NestJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/NEST-JS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Autenticação: Protegendo Rotas com NestJS e Passport ](https://www.treinaweb.com.br/blog/autenticacao-protegendo-rotas-com-nestjs-e-passport) Neste artigo vamos aprender a proteger rotas com o NestJS e a biblioteca passport, utilizando a estratégia de autenticação com Tokens JWT. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/NEST-JS-CLASS-VALIDATOR-CLASS-TRANSFORMER-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Validação e Serialização no NestJS: class-validator e class-transformer ](https://www.treinaweb.com.br/blog/validacao-e-serializacao-no-nestjs-class-validator-e-class-transformer) Vamos abordar a utilização de duas biblitecas de serialização e validação fundamentais no NestJS: class-validator e class-transformer Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/CRIANDO-PRIMEIRO-CRUD-COM-NESTJS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com NestJS ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-nestjs) Neste artigo veremos como criar um CRUD com NestJS, o passo a passo utilizando ferramentas como o TypeORM e o banco de dados SQLite. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Cron jobs, timeouts e intervals com NestJS ](https://www.treinaweb.com.br/blog/cron-jobs-timeouts-e-intervals-com-nestjs) Neste artigo vamos utilizar o módulo nativo scheduler do NestJS para trabalhar com tarefas automatizadas com cron jobs, timeouts e intervals Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Criando CRUD com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/criando-crud-com-prisma-orm-e-nestjs) Neste artigo vamos implementar um CRUD com Prisma ORM e NestJS, abordando as principais operações básicas com o banco de dados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Trabalhando com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/trabalhando-com-prisma-orm-e-nestjs) Neste artigo vamos aprender os primeiros passos para trabalhar com o Prisma ORM e o NestJS. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **15h 13min 21s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58