Desenvolvendo um Projeto com ReactJS do Zero ao Deploy — Part.7 (Firebase — Deploy)
E aí pessoal, como vocês estão?
Antes de pegar aquela cerveja gelada (afinal sextou!)
e, cair de cabeça no código, queria agradecer imensamente a contribuição de toda a comunidade de tecnologia pela participação nos comentários, feedbacks, mensagens de apoio e muito mais!
Esse foi, o ponta pé inicial do blog e poder trazer um conteúdo que resolvesse problemas simples, que ajudasse a entender mais sobre o React e começar a fazer projetos de forma independente era o meu objetivo.
Não iremos para por aqui, daremos continuidade com a mesma intensidade de posts, temos diversos conteúdos relevantes sobre programação vindo por aÍ, entre eles tutoriais sobre desenvolvimento de software web, mobile, pwa, curiosidades e tendências!
Não quero dar spoiler, mas fiquem de olho nos posts e nas redes sociais (facebook e instagram) que tem coisa grande a caminho!
Hoje falaremos sobre o deploy da nossa aplicação e vou usar como cloud o Firebase da Google.
O Firebase é uma plataforma que contém várias ferramentas e uma excelente infraestrutura para ajudar desenvolvedores web e mobile a criar aplicações de alta qualidade e performance.
Como temos uma aplicação front-end relativamente simples, vamos usar a ferramente de hosting do firebase.
Este serviço é oferecido para hospedar HTML, CSS e JavaScript para seu site, além de outros ativos fornecidos pelo desenvolvedor, como gráficos, fontes e ícones.
O Firebase Hosting possui certificado SSL fornecido automaticamente, ele é ideal para aplicativos web e para dispositivos móveis.
Mas e aí, você sabe como devemos colocar nosso projeto na Cloud?
Primeiro passo então é entender no nosso arquivo “package.json” os scripts configurados na nossa aplicação.
Quando estamos desenvolvendo a aplicação e queremos ver ela funcionando na nossa máquina, nós utilizamos o comando “npm start” , dessa forma ele roda o comando “react-scripts start” , ou seja, ele sobe um servidor local com “hot reload” (se você fizer uma alteração no aplicativo, ele será recarregado no navegador para refletir essa alteração), utilizando a porta 3000 por padrão (ou outra se a porta escolhida estiver ocupada), além disso os erros são mostrados no terminal do console e no navegador.
Dessa vez vamos executar o comando “npm run build”, ele cria um diretório “[nomedoprojeto]/build” e pega os arquivos que devem ser enviados para ambiente de produção, ou seja, todos os arquivos que estão na pasta “source” são compilados para um arquivo único de javascript e css.
Agora, execute o comando “npm run build” no seu terminal.
Já temos o projeto inteiro compilado e pronto para ser enviado para o ambiente de produção!
Chegou a hora de avançarmos no conceito de Cloud para criamos o ambiente onde nosso sistema ficará disponível na internet.
Primeiro passo, acessar a url do firebase “https://firebase.google.com/” , faça login com sua conta do google e acesse o link “ir para console”.
Próxima etapa, vamos criar em “Adicionar projeto”, nesse momento dê um nome para o projeto e clique em continuar.
O passo número 2 é para adicionar o Google Analytics no projeto, como estamos na fase de desenvolvimento do conhecimento sobre criar um projeto e hospedar, podemos selecionar a flag como “não gostaria de adicionar Google Analytics no projeto”.
Nesse momento o Firebase irá executar diversos comandos para gerar seu ambiente cloud, assim que ele finalizar clique em continuar. Você será redirecionado para a página do seu projeto.
Clique no ícone “</>” e, você irá registrar seu projeto no Firebase!
Veja que ele já disponibiliza a opção de ativar o Firebase Hosting, assim, já teremos uma URL para nossa aplicação. Clique em “registar app” e continue o processo.
A segunda etapa é adicionar o SDK do Firebase no projeto.
Clique no ícone para copiar esse trecho de código e, volte no VSCode para adicionar esse trecho de código.
Abra o arquivo “[seuprojeto]/public/index.html” e adicione esse trecho logo abaixo do trecho de html <div id=’root’>.
Dessa forma adicionamos os scripts do firebase para o projeto, permitindo que você interaja com o Firebase em ambientes privilegiados para executar ações como a nossa, de hospedar o projeto.
Clique em continuar e volte ao terminal do seu sistema operacional. Será necessário instalar globalmente a ferramenta do firebase no seu computador.
Execute o comando “npm install -g firebase-tools”
Antes de continuarmos, volte ao seu terminal e digite “npm run build” para gerar o arquivo de build com nosso arquivo index.html atualizado.
Clique em continuar na página do firebase e volte ao seu terminal para executar os comandos.
Digite o primeiro comando firebase login, você será direcionado para uma página para se autenticar, utilize o mesmo e-mail do google e continue.
Terminando de fazer o login, volte ao seu terminal e, execute o próximo comando “firebase init”.
Com as setas do teclado mova até a opção Hosting e selecione com a tecla espaço e aperte “enter”.
Próximo item é selecionar “Use an existing project” e depois escolha o projeto que você criou no site do Firebase e novamente aperte “enter”
Na próxima etapa, devemos selecionar qual pasta o firebase deve usar para realizar o deploy, no nosso caso é a pasta “build”. Veja que ele deixa um opção default de “public” digite a palavra build para ele substituir e aperte “enter”.
A informação seguinte é se o firebase pode configurar como um SPA. Lembra lá no post do react-router que usamos ele exatamente para isso? Então digite “y” e aperte enter.
Nesse momento o firebase identifica que ja existe um arquivo index.html na pasta build, mas não gostaria de sobrescrever ele então digite “N”.
Assim finalizamos as configurações necessárias pra realizar o deploy no firebase.
Vamos rodar o tão aguardado comando?!
Execute no terminal “firebase deploy”
Finalizamos todo o processo, até que não foi tão complicado não é mesmo?
Repare que o Firebase já disponibiliza a url da nossa aplicação.
Aproveite agora e acesse a url, navegue no browser para página “/sobre” .
Veja as funcionalidades que fizemos com redux, inspecione os elementos e divirta-se!
Espero que tenha conseguido aplicar todos os passos de como criar uma Aplicação Web SPA e, tenha contribuído para seu início no desenvolvimento de software ou para você que já está na área mas nunca tenha usado o React.
Se ficou com alguma dúvida, se não entendeu alguma parte, me mande que farei o possível para te ajudar.
Siga as nossas redes sociais (facebook e instagram)para ficar por dentro de tudo que estamos criando e acompanhar o nosso dia a dia.
Por hoje é só, nos vemos em breve!
Mas e aí, na sua máquina funciona?
