À medida que um aplicativo cresce em complexidade, suas necessidades também aumentam. Em algum momento, a exibição de arquivos HTML estáticos pode atrapalhar o progresso ou atrasar a funcionalidade do aplicativo. Em vez disso, você desejará fornecer conteúdo dinâmico, uma tarefa que os mecanismos de modelagem como o Handlebars tornam possível.

Handlebars é um mecanismo de modelagem mínimo e sem lógica para NodeJS. É uma extensão do mecanismo de modelo de bigode. Como é um mecanismo sem lógica, você pode usá-lo para separar estritamente a apresentação do código subjacente.

O Handlebars tem um ótimo suporte como mecanismo de modelagem da estrutura NestJS.

O que é um mecanismo de modelagem?

Um mecanismo de modelagem é uma ferramenta que combina tags HTML e uma linguagem de programação para criar um modelo HTML com código mínimo.

O mecanismo de modelo em tempo de execução injeta dados no modelo HTML para renderizar a exibição final no navegador.

Você pode achar complicado configurar um mecanismo de modelagem como o Handlebars, pois envolve muitas etapas. No entanto,

a estrutura do servidor Express que o NestJS usa por padrão tem excelente suporte para Handlebars.

Etapa 1: gerar um aplicativo NestJS

Execute o seguinte comando para criar um novo aplicativo Nest:

ninho novo <nome do seu aplicativo>

Etapa 2: instalar o guidão

Execute o seguinte comando para instalar o Handlebars usando o gerenciador de pacotes npm:

npm install express-handlebars@^5.3.0@types/express-handlebars@^5.3.0

Etapa 3: configurar a instância expressa

Navegue até o seu main.ts arquivo e importação Aplicativo NestExpress a partir de @nestjs/platform-express.

Atribua NestExpressApplication como um tipo genérico ao crio método.

Igual a:

const aplicativo = aguardam NestFactory.create(AppModule)

Passando NestExpressApplication para o aplicativo O objeto dá acesso a métodos exclusivos do ExpressJS. Você precisará desses métodos para configurar propriedades específicas do Handlebars.

Etapa 4: configurar o guidão

Primeiro, você precisará especificar os locais onde seu aplicativo encontrará o HTML e outros arquivos estáticos (folhas de estilo, imagens, etc.). Você pode armazenar seus arquivos HTML em um formato “Visualizações” e outros arquivos estáticos em uma pasta “público” pasta, respectivamente.

Para especificar os locais, comece importando Junte a partir de caminho. Então, dentro do inicialização função, defina o local para os estilos.

Igual a:

app.useStaticAssets (juntar (__dirname, '..', 'público'))

A função join recebe um número arbitrário de corda argumentos, une-os e normaliza o caminho resultante. __dirname retorna o caminho da pasta onde o main.ts arquivo reside.

Em seguida, defina o local para seus arquivos HTML, assim:

app.setBaseViewsDir (juntar (__dirname, '..', 'Visualizações'));

Em seguida, importe Handlebars para o seu main.ts Arquivo:

importar * Como hbs a partir de 'guiador expresso';

Você vai precisar de hbs import para configurar as propriedades do Handlebars, como o nome da extensão, etc.

O nome de extensão de arquivo padrão para Handlebars é .guidão.

Este nome de extensão é longo, mas você pode configurá-lo com o app.engine ligar. app.engine é uma função wrapper nativa em torno do motor.expresso método. São necessários dois argumentos: ramal e uma função de retorno de chamada. Veja o Documentação expressa sobre app.engine para aprender mais sobre isso.

Ligar app.engine(), e como primeiro argumento, passe a string 'hbs'. Então, como segundo argumento, chame a função hbs e passe um objeto de configuração com uma propriedade extname definido como 'hbs'. Essa configuração altera o nome da extensão de .handlebars para .hbs.

app.engine('hbs', hbs({ extname: 'hbs' }));

Por fim, defina o mecanismo de exibição para Handlebars assim:

app.setViewEngine('hbs');

Etapa 5: criar pastas

No diretório raiz do seu projeto, crie duas novas pastas. Você usará o primeiro, público, para armazenar as folhas de estilo do seu aplicativo. Dentro Visualizações, você armazenará todos os seus arquivos HTML.

Isso conclui a configuração do seu ambiente de desenvolvimento. Na próxima seção, você terá uma visão geral da sintaxe do Handlebars e seu uso em um aplicativo NestJS.

Sintaxe do guidão

Esta seção cobrirá a maior parte da sintaxe do guidão que você precisa para servir seus arquivos dinamicamente.

Ajudantes

Auxiliares são funções que transformam a saída, iteram sobre os dados e renderizam a saída condicional.

O Handlebars fornece dois tipos de auxiliares (Bloco e Integrado) e você pode criar auxiliares personalizados para atender às suas necessidades.

Você denota um auxiliar envolvendo-o entre chaves duplas. Prefixe seu nome com um hash (#) para uma tag auxiliar de abertura e uma barra (/) para uma tag de fechamento.

Por exemplo:

{{!-- E se o valor é verdadeiro, a div será renderizada senão, não vai --}}
{{#if valor}}
<div>O valor foi pago</div>
{{/E se}}

Se você criar um ajudante personalizado, deverá registrá-lo em seu hbs objeto de configuração em seu main.ts arquivo antes de poder usá-lo em seu aplicativo.

// main.ts
importar { ajudante personalizado } a partir de './helpers/hbs.helpers';
// Dentro da função bootstrap
app.engine('hbs', hbs({ extname: 'hbs', auxiliares: { customHelper } }));

Expressões

As expressões são a unidade de um modelo de guidão. Seu uso de expressões varia dependendo da complexidade da tarefa. Você pode usá-los sozinhos em um modelo, passá-los como entrada para auxiliares e muito mais.

Denote expressões com chaves duplas, por exemplo:

<h1>{{mensagem}}</h1>

Parciais

Uma parcial refere-se a um pedaço de HTML pré-salvo porque aparece em vários arquivos HTML. Por exemplo, navbars e rodapés. Você pode armazenar esse conteúdo em um arquivo e incluí-lo quando necessário.

Tal como acontece com seus arquivos estáticos e HTML, você também terá que definir um diretório parcial em seu app.engine objeto de configuração.

Registre seu diretório parciais adicionando o seguinte código ao seu objeto de configuração:

// main.ts
ParcialsDir: join (__dirname, '..', 'visualizações/parciais'),

Você pode acessar uma parcial usando a sintaxe de chamada parcial. Entre chaves duplas, insira um símbolo maior que (>) seguido do nome da parcial.

Por exemplo:

{{> nameOfPartial}}

Layouts

Um layout Handlebars é uma página HTML usada para definir metadados subjacentes ou estrutura geral para outras páginas HTML no aplicativo. Ele atua como um contêiner com um espaço reservado no qual você pode injetar dados dinâmicos.

Por exemplo:

<!DOCTYPE html>
<html lang="pt">
<cabeça>
<metacharset="UTF-8">
<meta http-equiv="Compatível com X-UA" conteúdo="IE=borda">
<metanome="janela de exibição" conteúdo="largura=largura do dispositivo, escala inicial=1,0">
<título>Modelagem no NestJS com guidão</title>
</head>
<corpo>
<cabeçalho>
 {{!-- Navbar parcial --}}
 {{>barra de navegação}}
</header>
<div>
 {{!-- Marcador de corpo --}}
 {{{corpo}}}
</div>
 {{!-- Rodapé parcial --}}
 {{>rodapé}}
</body>
</html>

Quando você executa seu código, o Handlebars pega o conteúdo do .hbs arquivo que você deseja renderizar e os injeta no corpo marcador de posição. Em seguida, ele renderiza o resultado como a página HTML final.

Você precisará registrar seu diretório de layouts em seu app.engine objeto de configuração e defina um arquivo de layout padrão. Um arquivo de layout padrão é o arquivo de layout que o Handlebars usa se você não definir um layout específico.

Adicione o seguinte código ao seu objeto de configuração para declarar um layout padrão e registrar um diretório de layouts:

layout padrão: 'Nome do arquivo de layout',
layoutsDir: join (__dirname, '..', 'visualizações/layouts'),

Renderizando um arquivo .hbs

No arquivo do controlador, importe o Res decorador de @nestjs/comum e Resposta a partir de expressar.

Em seguida, em seu manipulador de rotas, passe um argumento, res. Atribua um tipo de resposta a res e anote-o com o decorador Res. O decorador Res expõe os métodos de manipulação de resposta nativa do Express e desabilita a abordagem padrão NestJS.

Em seguida, chame o método render em res e passe o nome do arquivo que deseja renderizar como primeiro argumento. Para o segundo argumento, passe um objeto contendo o nome do layout e o valor substituto de uma expressão.

O guidão usará o layout padrão definido em seu app.engine objeto de configuração se você não fornecer um layout.

@Pegue()
getOlá(@Res() res: Resposta){
 return res.render('Nome do arquivo', {disposição: 'nome do esquema', mensagem: 'Olá Mundo' });
 }

Alternativas ao guidão

Handlebars é uma excelente ferramenta de modelagem com muitos recursos úteis, como auxiliares e layouts. Ainda assim, dependendo de suas necessidades, você pode escolher uma alternativa como EJS (JavaScript incorporado), Pug ou Bigode.