DEV Community

loading...
Cover image for [PT-BR] Primeiros passos com o Nunjucks!
A Caverna do Patocórnio

[PT-BR] Primeiros passos com o Nunjucks!

João Pedro Resende
Seja bem-vindo ao meu dev.to!👋 Sou o João Pedro, sou desenvolvedor frontend! 👨‍💻 📺Live coding na @TwitchBr | 🔗https://twitch.tv/jpbrab0
Updated on ・5 min read

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.

Discussion (6)

Collapse
levxyca profile image
Leticia

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 Author

Muito obg!!

Collapse
pablogomesdev profile image
Pablo Gomes

Show de bola mano JP

Collapse
jpbrab0 profile image
João Pedro Resende Author

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 Author

Que bom que gostou do artigo! :D