![Cover image for [PT-BR] Primeiros passos com o Nunjucks!](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fbnrb5njxke36587kmjfs.png)
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
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
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.
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!")
})
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!"
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>
No arquivo server.js, vamos importar o nunjucks mas primeiro precisamos ter ele instalado.
npm install nunjucks
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)
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
Abra o seu navegador e na barra de pesquisa digite:
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
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":[]
}
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)
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)
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>
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>
Projeto Final com alguns dados:
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!
Top comments (6)
Caramba, que legal! Eu nem sabia da existência disso, o seu artigo está muito bem explicativo! Obrigado por compartilhar conosco.
Muito obg!!
Show de bola mano JP
Que bom que gostou! :D
Muito bom JP, continue!
O maix brabo, o grande, o JP o BRABO
Que bom que gostou do artigo! :D