Este artigo faz parte de uma série de tutoriais que ensinarão passo a passo desde o desenvolvimento até a publicação de um pequeno site de apresentação utilizando o NodeJS e suas ferramentas.
Basicamente um mini curso. Seguindo todos os passos, no final você vai:
- Saber como instalar e configurar uma aplicação NodeJS.
- Servir uma aplicação online através do Express.
- Utilizar Handlebars para fornecer uma interface visual para o usuário com HTML e CSS.
- Publicar o seu site online no Heroku para que possa ser acessado por qualquer pessoa. Como este de exemplo aqui: Projeto Website
Artigo anterior: Criando uma aplicação em NodeJS, Express e Handlebars - Parte 2
Seja bem-vindo. E bons estudos.
Introdução
No final deste artigo você será capaz de publicar suas páginas e aplicações no Heroku, além de entender conceitos importantes do NodeJS.
Adaptações e modificações necessárias
Para que a aplicação funcione corretamente no Heroku, precisaremos fazer algumas modificações em nosso código. As modificações serão bem poucas, porém de extrema importância, e são requeridas para um funcionamento adequado na plataforma em questão.
Primeiramente, em nosso arquivo server.js faremos com que a aplicação verifique se existe alguma Porta informada entre as variáveis de ambiente do NodeJS.
Faremos a seguinte modificação no código de inicialização do Express.
// Verifica se existe alguma porta na variaveis de ambiente, caso contrario, utiliza a porta padrão
const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
console.log('Server online')
})
O process.env contém as variáveis de ambiente injetadas em tempo de execução, normalmente na inicialização do NodeJS. No caso em questão, quando o Heroku inicializar a aplicação Node, ele passará uma porta específica no qual a aplicação deverá se conectar.
Agora, em nosso arquivo package.json, na tag scripts, inseriremos uma chave start e seu código de execução do servidor. Atualize o seu arquivo da seguinte forma:
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
},
O Heroku, para iniciar a aplicação, executará um comando start, sendo esse o mesmo que precisamos definir em nosso arquivo package.json, na chave scripts para que seja identificado e inicializado.
Essas são as modificações necessárias. Agora, partiremos para as ferramentas de deploy (colocar o sistema para uso, ou normalmente, mandar o sistema para produção).
Git - Controle de Versão
Como pré-requisito para utilização do Heroku, precisaremos antes instalar o Git. Git é um sistema de controle de versão gratuito muito eficiente, e bastante utilizado.
Para realizar o download, basta acessar o link e baixar de acordo com o seu sistema operacional. https://git-scm.com/downloads.
Após a instalação, rode o comando a seguir no terminal de sua preferência para conferir se a ferramenta foi instalada corretamente.
git --version
Se o terminal executar e mostrar a versão instalada do git, significa que podemos prosseguir.
Abra o terminal na pasta do projeto, ProjetoWebsite. E execute o seguinte comando.
git init
Desta forma, estaremos inicializando o git e criando as configurações de repositório para o nosso projeto. Um repositório git basicamente contém uma coleção de arquivos de diferentes versões do projeto.
Antes de versionarmos de fato o projeto em si, precisaremos criar um arquivo na raiz de nosso projeto chamado ".gitignore". Este arquivo é utilizado para definir pastas e arquivos que não gostaríamos de versionar, arquivos que serão ignorados, como por exemplo a pasta node_modules, visto que o nosso arquivo package.json já contém toda as informações de dependências e configurações da aplicação.
Desta forma, crie o arquivo .gitignore e adicione a linha a seguir:
node_modules
Pronto, agora podemos iniciar o versionamento em si.
Para fins de aprendizado e controle, rode o comando em seu terminal:
git status
Este comando é responsável por mostrar o status de versionamento do projeto. Como é a primeira vez sendo executado, o resultado será apresentado de forma semelhante a imagem abaixo.
Os nomes em vermelho sinaliza que os novos arquivos, ou aqueles que foram modificados, ainda não foram adicionados ao estágio de confirmação.
Atenção: Certifique-se de que a pasta node_modules não está listada.
Para adicionarmos os arquivos pendentes, em vermelho, no diretório ativo. No terminal e na raiz do projeto, execute o seguinte comando.
git add .
Este comando adicionará todos os arquivos pendentes, no diretório ativo, para efetivar as modificações e novos arquivos adicionados, para controle de versão.
Rode novamente o comando git status, e será apresentado como na imagem a seguir:
Os nomes de cor verde sinaliza que os arquivos estão confirmados para versionamento. Nesse estágio, as modificações e controle de versão não foram efetivamente realizados.
Agora, registraremos as mudanças de fato criando uma versão para elas. Rode o seguinte comando:
git commit -m "Commit inicial"
O comando anterior efetiva a confirmação das modificações, assim registrando ela no controle de versão. Resultado da execução anterior:
Voltaremos posteriormente com mais um comando, agora, daremos início ao Heroku.
Heroku
O Heroku é uma plataforma que funciona como serviço, fornecendo aos desenvolvedores um ambiente que possibilita facilmente disponibilizar uma aplicação, que vai desde aplicações apenas para testes até aplicações mais robustas.
Para a nossa aplicação, faremos o uso da versão gratuita, que atende facilmente as nossas implementações. Mas antes de qualquer coisa, é preciso baixar o cliente do Heroku para a sua máquina. O download pode ser feito no link a seguir, escolha de acordo com o seu sistema operacional. De preferência, utilize as opções principais, as primeiras.
https://devcenter.heroku.com/articles/heroku-cli#download-and-install.
Após realizada a instalação, para saber se tudo ocorreu corretamente, rode o comando a seguir:
heroku --version
Deverá ser apresentado a versão do Heroku instalado.
Agora precisaremos criar uma conta na plataforma. Acesse o link a seguir e preencha o formulário. https://signup.heroku.com.
Após a criação da conta, será enviado um link para o seu e-mail ao qual você deverá confirmar.
Seguindo todos os passos, você deverá ver uma tela similar a essa:
Clique no botão para prosseguir, e na próxima tela, aceite os termos de uso.
Sua tela inicial então será apresentada provavelmente como a seguir:
Agora voltemos para o projeto local. Abra o terminal na pasta do projeto, ProjetoWebsite, e execute o seguinte comando.
heroku login
Ao executar esse comando, será pedido que digite qualquer tecla para continuar, faça isso. Em seguida, o sistema abrirá o browser pedindo a sua autenticação. Entre com a conta que acabou de criar. Finalizado, volte para o terminal. Se o login ocorrer corretamente, você verá como a imagem a seguir.
Agora, criaremos a aplicação no Heroku com o comando heroku create e o nome da aplicação deseja como no exemplo a seguir. É importante que esse comando seja executado na pasta do projeto. Troque o nome do projeto para um de sua preferência. Esse nome deverá ser único para a aplicação, caso se escolha um nome já utilizado, será retornado um erro.
heroku create tutorial-node-projeto-website
Duas urls serão apresentadas no resultado da execução do comando, a primeira url é o caminho do seu projeto a ser acessado no browser e compartilhado. O segundo, é a url de versionamento a ser utilizada via Git, pela qual mandaremos o projeto local para o Heroku.
Para conferir se o caminho já foi atribuído ao Git, rode o seguinte comando.
git remote -v
Este comando checa as urls remotas atribuídas ao projeto. Dois registros de urls deverão ser apresentados, igualmente ao caminho do git da criação do Heroku.
Agora, para subir o projeto para o Heroku. Rode o seguinte comando:
git push heroku master
O git push envia as modificações "comitadas" para a versão master, principal, do projeto no Heroku. O resultado será como na imagem a seguir:
Agora, no browser, acesse a url do projeto de acordo como você a criou e o Heroku informou. No caso deste tutorial, a url é https://tutorial-node-projeto-website.herokuapp.com.
Atenção: Quando acessado pela primeira vez, o carregamento da aplicação irá demorar, mas isso é normal. É devido a plataforma estar instalando as dependências de produção e inicializando a aplicação.
Caso ocorra algum erro, verifique atentamente os passos anteriores. Se o erro persistir e estiver difícil de solucionar, entre em contato que será retornado assim que possível.
Bom, é isso. Chegamos ao fim desse projeto! Parabéns!👏
E o meu conselho é... continue estudando e se aprimorando. Não pare neste tutorial, crie novas rotas, novas telas, crie outros projetos para consolidar o conhecimento. Enfim, continue.
Novos tutoriais, mini cursos e artigos, como esse, serão criados. O NodeJS, Express, Handlebars e demais ferramentas apresentadas possuem muitas funcionalidades interessantes. Se desejar, inscreva-se na Newsletter no final da página e fique por dentro.
Boa sorte e bons estudos,
Jhonatan S. Gonçalves