Como fazer o deploy da sua aplicação para a web usando Express.js e Heroku

Artigo original: How to deploy your app to the web using Express.js and Heroku

Se você é novo no mundo do desenvolvimento para a web, provavelmente passará bastante tempo aprendendo a construir sites estáticos, com HTML, CSS e JavaScript.

Você pode, então, começar a aprender como usar frameworks populares, como React, VueJS ou Angular.

Porém, depois de experimentar algumas ideias novas e executar alguns sites localmente, você pode se perguntar como realmente implantar ou fazer o deploy de seu site ou aplicação. Ocorre que, às vezes, pode ser difícil saber por onde começar.

Pessoalmente, acho que executar um servidor do Express hospedado no Heroku é uma das maneiras mais simples de começar. Este artigo mostrará como fazer isso.

O Heroku é uma plataforma de nuvem que suporta diversas linguagens de programação e frameworks diferentes.

Este não é um artigo patrocinado – é claro que existem muitas outras soluções disponíveis, como:

• Digital Ocean
• Amazon Web Services
• Azure
• Google Cloud Platform
• Netlify
• ZEIT Now

Confira todos eles e veja qual se adapta melhor às suas necessidades.

Pessoalmente, achei o Heroku o mais rápido e fácil de usar. Ele é "pronto para uso". A versão gratuita é um pouco limitada em termos de recursos. No entanto, posso recomendar com confiança para testes.

Nota da tradução: ao final de 2022, o Heroku encerrou o tier gratuito para implantação. Os planos mensais básicos por lá, no momento desta tradução, custam 5 dólares ao mês.

Este exemplo hospedará um site simples usando um servidor do Express. Aqui estão os passos principais:

1. Configurar o Heroku, o Git e o npm
2. Criar um servidor do Express.js
3. Criar arquivos estáticos
4. Implantar no Heroku

Deve levar cerca de 25 minutos no total (ou mais, se você quiser gastar mais tempo nos arquivos estáticos).

Este artigo pressupõe que você já saiba:

• O básico de HTML, CSS e JavaScript
• Uso básico da linha de comando
• Git de nível iniciante para controle de versão

Você pode encontrar todo o código neste repositório.

Configurando

O primeiro passo em qualquer projeto é configurar todas as ferramentas que você sabe que vai precisar.

Você vai precisar ter:

• Node e npm instalados em sua máquina local (leia como fazer isso aqui – em inglês)
• Git instalado (leia este guia – em inglês)
• O CLI do Heroku instalado (aqui está como fazer isso – em inglês)

1. Crie um diretório e inicialize um repositório Git

A partir da linha de comando, crie um diretório de projeto e entre nesse diretório.

$ mkdir lorem-ipsum-demo
$ cd lorem-ipsum-demo

Agora que você está na pasta do projeto, inicialize um novo repositório do Git.

⚠️Esse passo é importante porque o Heroku depende do Git (texo em inglês) para implantar o código da sua máquina local em seus servidores na nuvem. ⚠️

$ git init

Como etapa final, você pode criar um arquivo README.md para editar posteriormente.

$ echo "Edit me later" > README.md

2. Faça login na CLI do Heroku e crie um projeto

Você pode fazer login no Heroku usando a CLI (interface de linha de comando) do Heroku. Você precisará ter uma conta no Heroku para fazer isso.

Existem duas opções aqui. Por padrão, o Heroku permite que você faça login por meio do navegador da web. Adicionar a flag -i permite que você faça login por meio da linha de comando.

$ heroku login -i

Agora, você pode criar um projeto no Heroku. Eu chamei o meu de lorem-ipsum-demo.

$ heroku create lorem-ipsum-demo

Nomeando seu projeto:

• O Heroku gerará um nome aleatório para o seu projeto se você não especificar um no comando.
• O nome fará parte do URL que você pode usar para acessar seu projeto. Assim, escolha um de que você goste.
• Isso também significa que você precisa escolher um nome de projeto único que ninguém mais tenha usado.
• É possível renomear seu projeto posteriormente (não se preocupe muito em encontrar o nome perfeito agora).

3. Inicialize um novo projeto com o npm e instale o Express.js

Em seguida, você pode inicializar um novo projeto com o npm criando um arquivo package.json. Use o comando abaixo para fazer isso.

⚠️Essa etapa é crucial. O Heroku depende de você fornecer um arquivo package.json para saber que este é um projeto do Node.js ao criar sua aplicação.⚠️

$ npm init -y

Em seguida, instale o Express. O Express é um framework de servidor amplamente utilizado para o NodeJS.

$ npm install express --save

Finalmente, você está pronto para começar a programar!

Criando um servidor do Express simples

O próximo passo é criar um arquivo chamado app.js, que executa um servidor do Express localmente.

$ touch app.js

Esse arquivo será o ponto de entrada para a aplicação quando estiver pronta. Isso significa que o único comando necessário para iniciar a aplicação será:

$ node app.js

Primeiro, no entanto, você precisa escrever algum código no arquivo.

4. Edite o conteúdo do app.js

Abra o app.js no seu editor favorito. Escreva o código mostrado abaixo e clique em salvar.

// Crie uma aplicação do express
const express = require("express")
const app = express()

// Use o middleware express-static
app.use(express.static("public"))

// Defina a primeira rota
app.get("/", function (req, res) {
  res.send("<h1>Hello World!</h1>")
})

// Inicie o servidor escutando por solicitações
app.listen(process.env.PORT || 3000, 
	() => console.log("Server is running..."));

Os comentários devem ajudar a indicar o que está acontecendo. Vamos, porém, dividir rapidamente o código para entendê-lo melhor:

• As primeiras duas linhas simplesmente requerem o módulo do Express e criam uma instância da aplicação.
• A próxima linha requer o uso do middleware express.static. Ele permite que você sirva arquivos estáticos (como HTML, CSS e JavaScript) do diretório que você especificar. Nesse caso, os arquivos serão servidos de uma pasta chamada public.
• A próxima linha usa app.get() para definir uma rota de URL. Quaisquer solicitações de URL para o URL raiz serão respondidas com uma mensagem de HTML simples.
• A parte final inicia o servidor. Ele verifica qual porta o Heroku usará ou, se você estiver executando localmente, a porta padrão será 3000.

⚠️O uso de process.env.PORT || 3000 na última linha é importante para implantar sua aplicação com sucesso. ⚠️

Salve app.js e inicie o servidor com:

$ node app.js

Você, então, pode visitar localhost:3000 em seu navegador e verificar se o servidor está em execução.

Crie seus arquivos estáticos

O próximo passo é criar seus arquivos estáticos. Esses são os arquivos HTML, CSS e JavaScript que você fornecerá sempre que um usuário visitar seu projeto.

Lembre-se de que, no app.js, você informou ao middleware express.static para servir arquivos estáticos a partir do diretório public.

O primeiro passo, é claro, é criar esse diretório e os arquivos que ele conterá.

$ mkdir public
$ cd public
$ touch index.html styles.css script.js

5. Edite o arquivo HTML

Abra o arquivo index.html no seu editor de texto preferido. Essa será a estrutura básica da página que você fornecerá aos seus visitantes.

O exemplo abaixo cria uma página inicial simples para um gerador de Lorem Ipsum, mas você pode ser tão criativo quanto quiser aqui.

<!DOCTYPE html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Alegreya|Source+Sans+Pro&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<body>
<h1>Lorem Ipsum generator</h1>
  <p>How many paragraphs do you want to generate?</p>
  <input type="number" id="quantity" min="1" max="20" value="1">
  <button id="generate">Generate</button>
  <button id="copy">Copy!</button>
<div id="lorem">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

6. Edite o arquivo CSS

A próxima etapa é editar o arquivo styles.css. Certifique-se de que ele esteja vinculado ao seu arquivo HTML.

O CSS abaixo é para o exemplo do Lorem Ipsum. Novamente, sinta-se à vontade para ser tão criativo quanto desejar.

h1 {
	font-family: 'Alegreya' ;
}

body {
	font-family: 'Source Sans Pro' ;
	width: 50%;
	margin-left: 25%;
	text-align: justify;
	line-height: 1.7;
	font-size: 18px;
}

input {
	font-size: 18px;
	text-align: center;
}

button {
	font-size: 18px;
	color: #fff;
}

#generate {
	background-color: #09f;
}

#copy {
	background-color: #0c6;
}

7. Edite o arquivo JavaScript

Por fim, você pode querer editar o arquivo JavaScript script.js. Isso permitirá tornar sua página mais interativa.

O código abaixo define duas funções básicas para o gerador de Lorem Ipsum. Sim, eu usei JQuery - é rápido e fácil de trabalhar.

$("#generate").click(function(){
	var lorem = $("#lorem");
	lorem.html("");
	var quantity = $("#quantity")[0].valueAsNumber;
	var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"];
	for(var i = 0; i < quantity; i++){
		lorem.append("<p>"+data[i]+"</p>");
	}
})

$("#copy").click(function() {
	var range = document.createRange();
	range.selectNode($("#lorem")[0]);
	window.getSelection().removeAllRanges();
	window.getSelection().addRange(range);
	document.execCommand("copy");
	window.getSelection().removeAllRanges();
	}
)

Observe que, aqui, a lista de data foi cortada para facilitar a exibição. Na aplicação real, é uma lista muito mais longa de parágrafos completos. Você pode ver o arquivo completo no repositório ou consultar aqui a fonte original.

Implantando sua aplicação

Após escrever seu código estático e verificar se tudo funciona conforme o esperado, você pode se preparar para implantar no Heroku.

No entanto, há mais algumas coisas a fazer.

8. Crie um Procfile

O Heroku precisará de um Procfile para saber como executar sua aplicação.

Um Procfile é um "arquivo de processo" que informa ao Heroku qual comando executar para gerenciar um determinado processo. Neste caso, o comando dirá ao Heroku como iniciar seu servidor na web.

Use o comando abaixo para criar o arquivo.

⚠️Este é um passo importante, pois sem um Procfile, o Heroku não pode colocar seu servidor on-line. ⚠️

$ echo "web: node app.js" > Procfile

Observe que o Procfile não possui uma extensão de arquivo (e.g., ".txt", ".json").

Além disso, observe como o comando node app.js é o mesmo usado localmente para executar o servidor.

9. Adicione e faça commit dos arquivos no Git

Lembre-se de que você iniciou um repositório Git ao configurar. Talvez você já tenha adicionado e feito commit dos arquivos conforme avançava.

Antes de implantar no Heroku, certifique-se de adicionar todos os arquivos relevantes e fazer commit deles.

$ git add .
$ git commit -m "pronto para o deploy"

O último passo é fazer push para a branch master do Heroku.

$ git push heroku master

Você deve ver a linha de comando imprimir uma série de informações enquanto o Heroku cria e implanta sua aplicação.

A linha a ser procurada é: Verifying deploy... done.

Isso mostra que a criação foi bem-sucedida.

Agora você pode abrir o navegador e visitar nome-do-seu-projeto.herokuapp.com. Sua aplicação será hospedada na web para todos visitarem!

Breve resumo

Abaixo estão os passos a serem seguidos para implantar uma aplicação do Express simples no Heroku:

1. Crie um diretório e inicialize um repositório do Git
2. Faça login na CLI do Heroku e crie um projeto
3. Inicialize um novo projeto com o npm e instale o Express.js
4. Edite o conteúdo de app.js
5. Edite os arquivos estáticos HTML, CSS e JavaScript
6. Crie um Procfile
7. Adicione e faça commit no Git, depois faça push para a branch master do Heroku

O que verificar se a aplicação não estiver funcionando

Às vezes, apesar das melhores intenções, os tutoriais na Internet não funcionam exatamente como você esperava.

Os passos abaixo devem ajudar a depurar alguns erros comuns que você pode encontrar:

• Você inicializou um repositório do Git na pasta do seu projeto? Verifique se você executou git init. O Heroku depende do Git para implantar o código da sua máquina local.
• Você criou um arquivo package.json? Verifique se você executou npm init -y. O Heroku requer um arquivo package.json para reconhecer que é um projeto do Node.js.
• O servidor está sendo executado? Verifique se seu Procfile usa o nome de arquivo correto para iniciar o servidor. Verifique se você tem: web: node app.js em vez de web: node index.js.
• O Heroku sabe em qual porta escutar? Verifique se você usou app.listen(process.env.PORT || 3000) em seu arquivo app.js.
• Seus arquivos estáticos têm erros? Verifique-os executando localmente e veja se há algum bug.

Agradeço por ter chegado até aqui. Boa programação para você!