Front End

Front End

Aplicações Node em 30 segundos com o Noderize

16 abr, 2018
Publicidade

O JavaScript tem um ecossistema de bibliotecas, frameworks e ferramentas incríveis. É difícil pensar que há 10 anos atrás, a linguagem ainda era considerada o patinho feio da programação. Entretanto, toda essa evolução tem um custo pesado para quem ainda está começando na área.

Para começar qualquer projeto, os desenvolvedores têm tantas opções disponíveis na internet, que é realmente complicado saber quais delas são as mais adequadas para o projeto em questão. E o pior nem é isso, é saber como configurar todas elas para trabalhar em conjunto. Não é raro o profissional perder horas de trabalho só para montar o esqueleto (e ambiente de desenvolvimento) do projeto.

Para tentar facilitar a nossa vida, o programador canadense que se identifica como Cretezy (Charles Crete), desenvolveu o Noderize, projeto de código aberto com 300 estrelas no GitHub e publicado sob licença MIT. Este projeto tem como premissa nos ajudar a criar projetos Node em pouquíssimo tempo com tudo o que é necessário para produção.

Vamos ver como ele funciona.

Noderize

Em termos simples, o Noderize é uma ferramenta completa para que possamos começar a criar aplicativos em Node (servidores, ferramentas CLI e qualquer outra coisa), sem nenhuma configuração, até que seja realmente necessário. Ou seja, é uma ótima ferramenta para quem está começando a desenvolver seus primeiros projetos com Node e não quer perder tempo configurando um bilhão de coisas.

Com ele ganhamos automaticamente no projeto, funcionalidades de:

  • Compilação (usando o Babel) do ES6/7 e afins
  • Checagem de tipo (com TypeScript)
  • Testes (usando Jest)
  • Formatação (com o Prettier)
  • Auto-restart (watch) em modo de desenvolvimento
  • Bundling
  • Guias/Documentação
  • E muito mais!

Para quem já conhece o create-react-app (se ainda não o conhece, leia este artigo), ele funciona de forma bem parecida, mas focada no lado do servidor.

Instalação

O primeiro passo é instalar a ferramenta na máquina. Como se trata de um pacote que estrutura projetos, ela precisa ser instalada de forma global na máquina. Para isso, basta executar o seguinte comando no terminal:

npm install -g create-noderize

Feito isso, já conseguimos utilizá-la. Para criar um projeto, basta utilizar o comando:

create-noderize <nome do projeto>

Neste comando, podemos passar dois parâmetros:

  1. –typescript: isso fará com o que projeto utilize TypeScript.
  2. –forceNpm/–forceYarn: por padrão, o Noderize utiliza Yarn (se disponível), mas podemos configurar qual ferramenta utilizar com este parâmetro.

Ao executar, você verá uma tela muito semelhante a esta:

Terminal após inicializar um projeto com o noderize

Repare que toda a facilidade tem um custo. Na minha máquina, a instalação demorou mais de 500 segundos (aproximadamente 8 minutos), o que é bastante, mesmo para os padrões do npm.

Projetos com o Noderize

Uma vez que o projeto é criado, teremos a seguinte estrutura:

  • node_modules/: diretório onde são instaladas todas as dependências
  • src/: diretório onde devem ficar todos os arquivos fonte do projeto
  • .gitignore: arquivo de ignore do git
  • package-lock.json: descrição do projeto e dependências
  • package.json: descrição do projeto e dependências

Por definição, a pasta src/ contém o arquivo index.js (ponto de entrada do projeto). Lá, ele já possui um console.log() com uma mensagem dos desenvolvedores. Com isso, já podemos utilizar o comando npm run watch para ver a mágica acontecer.

Alterações em tempo real

Repare que eu alterei a mensagem do console e ele subiu a nova versão do projeto automaticamente, e então exibiu a nova mensagem. Bem prático, né? Ele consegue fazer tudo isso porque toda a configuração está feita para nós. Se olharmos o arquivo package.json, veremos que todos os comandos estão por trás do noderize-scripts:

{
    "name": "projeto",
    "version": "0.1.0",
    "private": true,
    "main": "dist/index.js",
    "scripts": {
   	 "watch": "noderize-scripts watch",
   	 "build": "noderize-scripts build",
   	 "start": "noderize-scripts start",
   	 "format": "noderize-scripts format",
   	 "test": "noderize-scripts test",
   	 "clean": "noderize-scripts clean"
    },
    "devDependencies": {
   	 "@noderize/scripts": "^0.4.6"
    },
    "dependencies": {
   	 "@noderize/runtime": "^0.4.6"
    }
}

O nome dos scripts são bem intuitivos, mas a descrição detalhada de todos eles pode ser vista aqui.

Agora vamos ver como criar um projeto mais fiel a realidade.

Criando uma API Rest com o Noderize

Vamos criar uma simples API Rest com o Noderize utilizando o bom e velho Express e vamos deployar ele no Heroku (você também pode utilizar o Restify, descrito neste artigo!). Para isso, insira o Express como dependência do seu projeto utilizando o seguinte comando no seu terminal:

npm install --save express

Feito isso, insira o seguinte código no arquivo index.js:

import express from "express";

const app = express();
const port = parseInt(process.env.PORT) || 3000;

app.get("/", (req, res) => {
    res.send("Hello from Noderize!");
});

app.get("/greet", (req, res) => {
    res.send(`Hello ${req.query.name || "world"}!`);
});

app.listen(port, () => {
    console.log(`Listening at http://localhost:${port}`);
});

Repare que neste código utilizamos várias funcionalidades recentes do JavaScript, como o import, arrow functions, variáveis com const e template literais. Ao executar o npm run watch, já podemos consumir a API localmente:

Consumindo os endpoints da nossa API

Agora, podemos utilizar as facilidades do Noderize para jogar a nossa aplicação no Heroku.

Subindo a aplicação no Heroku

Para subirmos a aplicação no Heroku, primeiro precisamos de duas coisas:

  1. Ter uma conta no Heroku
  2. Criar um app no Heroku

Feito isso, é muito simples. No package.json, precisamos mover o “@noderize/scripts” para “dependencies” ao invés do “devDependencies”. Ainda lá, adicione o seguinte comando nos scripts:

"heroku-postbuild": "noderize-scripts build --env production"

Esta é toda a configuração necessária. Com a configuração feita, basta fazer um push para o Heroku como você faria em qualquer outro projeto!

Mais exemplos e tutoriais

Para nos deixar ainda mais contentes, o Noderize possui uma documentação impecável (fica aqui meu convite para você ler este artigo sobre a ferramenta Docusaurus para documentação). Isso significa que todas as configurações e todo o passo a passo para subir o seu projeto estarão lá. Além disso, há alguns projetos de exemplo como referência:

  • Basic Express: mostra o que fizemos aqui no artigo
  • Basic TypeScript: projeto básico utilizando o TypeScript
  • Basic Tests: projeto básico com testes
  • Chat Socket React: este é o projeto mais complexo (e divertido). É uma aplicação de chat utilizando sockets e com React no front-end (utilizando o create-react-app). Sem dúvidas vale a pena dar uma olhada neste.

Conclusão

Se você está começando a mexer no Node, ou mesmo só deseja começar um projeto novo sem complicação, o Noderize é uma ótima ferramenta. Se o seu projeto tem uma escala maior e exige mais configurações, ele te dá a flexibilidade para fazer isso, apesar de não ser o seu foco.

E se você gostou do projeto, não se esqueça de dar uma estrela para o projeto.

Referências