DEV Community

Cover image for [PT-BR] Primeiros passos com o Nunjucks!
João Pedro Resende
João Pedro Resende

Posted on • Edited on

[PT-BR] Primeiros passos com o Nunjucks!

#braziliandevs #html #css #javascript

Olá, pessoal! Sou o João Pedro e hoje por meio deste artigo venho falar sobre uma tecnologia que utilizo muito, o nunjucks, e também fazer um CRUD com ele!

Mas o que é uma template engine?

Template engine é basicamente para você deixar o seu html mais "dinâmico", por exemplo:

No back-end eu passo uma variável de valor "x" e para eu acessar essa variável através do html, eu posso utilizar uma template engine.

Utilizando o nunjucks na prática!

O primeiro passo é criar um projeto node.js

Mas como eu crio um projeto node.js?

É bem simples!!

Abra seu terminal, entre no diretório do projeto e digite:

É necessário ter o node e o npm instalado!

npm init -y
Enter fullscreen mode Exit fullscreen mode

O "-y" serve para criar sem fazer nenhuma pergunta o arquivo package.json. Neste arquivos tem as informações deste projeto.

Depois que fizermos isso você pode abrir o diretório do projeto em um editor de sua preferência. No meu caso estarei usando o Vscode.

Depois vamos criar o arquivo server.js na raiz do projeto, neste arquivo vai ficar as rotas do projeto.

Para criar as rotas vamos precisar instalar o Express

O Express é um framework node.js para a criação de aplicações web e api's

Para instalar ele você deve rodar o seguinte comando no seu terminal.

npm install express
Enter fullscreen mode Exit fullscreen mode

Após a instalação, no arquivo package.json,vai ter todas as dependências do seu projeto e também foi criada a pasta node_modules que é onde fica o código das dependências.

package.json

No arquivo server.js vamos escrever as nossas rotas!

const express = require("express") const server = express() server.get("/", (request , response) => { return response.send("Está rota está funcionando!") })
Enter fullscreen mode Exit fullscreen mode

No código acima:

  • Importamos o express no nosso projeto
  • Criamos a variável "server" ela vai conter todas as nossas rotas.
  • Fizemos uma rota do tipo GET que ao ser acessada ela nos retorna: "Está rota está funcionando!"

editando o arquivo server.js

Agora podemos criar uma pasta chamada "views" nela vai conter todo o html do projeto.

Na pasta views crie o arquivo "home.html" e digite:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home</title> </head> <body> <h1>CRUD com nunjucks</h1> <form action="/post" method="post"> <input type="text" placeholder="Seu nome." name="name"> <input type="email" name="email" placeholder="Seu email."> <button type="submit">Enviar!</button> </form> </body> </html>
Enter fullscreen mode Exit fullscreen mode

No arquivo server.js, vamos importar o nunjucks mas primeiro precisamos ter ele instalado.

npm install nunjucks
Enter fullscreen mode Exit fullscreen mode

Após a instalação vamos configurá-lo.

const express = require("express") const server = express() const nunjucks = require("nunjucks") // Configurando a pasta public. server.use(express.static("public")) // Configurando para receber dados do request.body. server.use(express.urlencoded({extended:true})) server.use(express.json()); // Config da template engine. server.set("view engine", "njk") nunjucks.configure("views", { express:server, autoescape:false, noCache:true, }) server.get("/", (request , response) => { return response.render("home") }) // Adicionando uma porta para o projeto. server.listen(3333)
Enter fullscreen mode Exit fullscreen mode

Repare que configuramos uma pasta chamada "public", mas por quê?

Caso você queira adicionar arquivos css você pode criar a pasta "styles", arquivos js você pode criar a pasta "scripts" e para imagens você pode criar a pasta "assets". Mas essas 3 pastas tem que estar dentro da pasta "public" e a "public" na raiz do projeto.E o nunjucks vai reconhecer ela.

Após tudo configurado renomeie o arquivo "home.html" para "home.njk".

No terminal rode:

node server.js
Enter fullscreen mode Exit fullscreen mode

Abra o seu navegador e na barra de pesquisa digite:

http://localhost:3333

Pronto! Conseguimos utilizar o nunjucks e o node para renderizar um arquivo html!

Agora vamos fazer este CRUD! Mas antes vamos conhecer o nodemon!

Nodemon

Caso você não queira escrever "node server.js" a cada alteração, você pode instalar o nodemon.

npm install nodemon -D
Enter fullscreen mode Exit fullscreen mode

Após a instalação repare que no comando para instalar o nodemon tem o "-D".

Para que ele serve?

O "-D" serve para que o nodemon só possa ser usado no ambiente de desenvolvimento.

Agora para startar o server digite "nodemon server.js" e pronto! O server será reestartado a cada alteração.

CRUD com nunjucks

Na raiz do projeto vamos criar o arquivo "data.json" um arquivo onde vai ficar os dados que serão enviados, como se fosse um banco de dados e escrever o seguinte:

{ "dados":[] }
Enter fullscreen mode Exit fullscreen mode

No arquivo server.js vamos fazer a rota "/post" do tipo POST e importar o fs para escrever os dados no arquivo data.json .

const data = require("./data.json") const fs = require("fs") const express = require("express") const server = express() const nunjucks = require("nunjucks") server.use(express.static("public")) server.use(express.urlencoded({extended:true})) server.use(express.json()); server.set("view engine", "njk") nunjucks.configure("views", { express:server, autoescape:false, noCache:true, }) server.get("/", (request , response) => { return response.render("home") }) server.post("/post", (request, response) => { const keys = Object.keys(request.body) // Vendo se nenhum dado está vazio. for (key of keys) { if (request.body[key] == '') { return response.send("Please, fill all fields") } } // Desestruturando o request.body e pegando os dados dele. let { name, email } = request.body // A Variavel do ID. const id = Number(data.dados.length + 1) // Inserindo no json os dados. data.dados.push({ id, name, email, }) // Escrevendo no json as alterações. fs.writeFile("data.json", JSON.stringify(data, null, 2), (err) => { if (err) { return response.send("White file error... :(") } return response.redirect("/") }) }) server.listen(3333)
Enter fullscreen mode Exit fullscreen mode

Na rota GET do arquivo server.js vamos altera-la para também retornar uma variável.

 const data = require("./data.json") const fs = require("fs") const express = require("express") const server = express() const nunjucks = require("nunjucks") server.use(express.static("public")) server.use(express.urlencoded({extended:true})) server.use(express.json()); server.set("view engine", "njk") nunjucks.configure("views", { express:server, autoescape:false, noCache:true, }) server.get("/", (request , response) => { // Retornando uma variavel para o frontend. return response.render("home",{data: data.dados}) }) server.post("/post", (request, response) => { const keys = Object.keys(request.body) for (key of keys) { if (request.body[key] == '') { return response.send("Please, fill all fields") } } let { name, email } = request.body const id = Number(data.dados.length + 1) data.dados.push({ id, name, email, }) fs.writeFile("data.json", JSON.stringify(data, null, 2), (err) => { if (err) { return response.send("White file error... :(") } return response.redirect("/") }) }) server.listen(3333)
Enter fullscreen mode Exit fullscreen mode

Para finalizar, no arquivo "home.njk" vamos escrever:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home</title> </head> <body> <h1>CRUD com nunjucks</h1> <form action="/post" method="post"> <input type="text" placeholder="Seu nome." name="name"> <input type="email" name="email" placeholder="Seu email."> <button type="submit">Enviar!</button> </form> <div class="dados"> <ul> <h1>Dados</h1> <!-- Aqui ja estamos utilizando um método do nunjucks o for. --> {% for dados in data %} <ul> <li>Nome:{{dados.name}}</li> <li>Email:{{dados.email}}</li> </ul> {% endfor %} </ul> </div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Repare que neste código acima temos um for, mas para que ele?

O for foi utilizado para percorrer a variavel data que passamos no back-end e agora ele retorna outra variavel com o nome dados

Ou seja

A cada dado ele vai retornar:

<ul> <li>Nome:"o nome"</li> <li>Email:"o email"</li> </ul>
Enter fullscreen mode Exit fullscreen mode

Projeto Final com alguns dados:
foto projeto final

Não se esqueça que a cada alteração rode "node server.js"

Se este artigo realmente te ajudou compartilhe com seus amigos deixe o gostei se tiver e até a próxima!

Caso tenha alguma dúvida, confira o repositório no github que contem o todo código desenvolvido neste artigo!

Link para o repositório.

Top comments (6)

Collapse
 
levxyca profile image
Leticia @levxyca •

Caramba, que legal! Eu nem sabia da existência disso, o seu artigo está muito bem explicativo! Obrigado por compartilhar conosco.

Collapse
 
jpbrab0 profile image
João Pedro Resende •

Muito obg!!

Collapse
 
pablogomesdev profile image
Pablo Gomes •

Show de bola mano JP

Collapse
 
jpbrab0 profile image
João Pedro Resende •

Que bom que gostou! :D

Collapse
 
tiagumb profile image
Tiago Mota Barbosa •

Muito bom JP, continue!
O maix brabo, o grande, o JP o BRABO

Collapse
 
jpbrab0 profile image
João Pedro Resende •

Que bom que gostou do artigo! :D