DEV Community

Cover image for Deploy ReactJS no Firebase Hosting
Guiller
Guiller

Posted on • Updated on

Deploy ReactJS no Firebase Hosting

  • Útil para você, considere me pagar um café. Obrigado!
  • Useful for you, consider buying me a coffee. Thanks!

ETH:
0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc

Ethereum QR Code Generator

Primeiramente precisamos que você tenha conhecimentos em React, Node, Java Script, GIT, FRONTEND, Deploy.

  • Por favor se isso for útil e ajudar no seu propósito, considere me ofertar um café, obrigado, que possamos evoluir juntos!

  • Please if this is useful and helps in your purpose, consider offering me a coffee, thank you, so we can evolve together!

Envie atráves da rede Ethereum -
Send over the network Ethereum -

  • 0xdfaf8F1bCaaB513A14E5a0B8C2D0bF7EE6ECabbc

Você precisa de uma conta no serviço Firebase,

https://firebase.google.com/

Vá para o console do Firebase
https://console.firebase.google.com/

Alt Text

Alt Text

Crie um novo projeto com o nome. Pronto, agora que temos o projeto criado podemos utilizar várias ferramentas do Firebase, uma delas é a Hosting, mas fique livre para utilizar outras,nesse artigo trataremos apenas de hospedagem.

No painel do Firebase clique em Hosting

Alt Text

Você precisa de um projeto frontend em React já pronto, e então faremos a construção (build) desse projeto no hosting da firebase, usaremos também o domínio fornecido por eles, mas claro futuramente podemos alterar.

Você precisará ter o pacote de dependência do Firebase para o Node js

Instale o pacote do firebase-tools globalmente,esse pacote estará instalado no seu computador e não no projeto em si.Esse utilitário do firebase , nos ajudará a executar comandos e conectar aquele projeto que criamos no hosting do firebase.
Execute o comando:



npm install -g firebase-tools


Enter fullscreen mode Exit fullscreen mode

Vamos para o console shell, dentro da pasta do projeto React

Usarei esse projeto React como exemplo:

https://github.com/guillerbr/ghd-sites

Clone o projeto e entre na pasta:

Alt Text

Instale a aplicação, pacotes e dependências.



npm install


Enter fullscreen mode Exit fullscreen mode

Dentro da raiz do seu projeto React, digite o comando para a construção (build).



npm build


Enter fullscreen mode Exit fullscreen mode
  • ou:


npm run-script build


Enter fullscreen mode Exit fullscreen mode

Então o npm cria os arquivos estáticos já transpilados e configurados para serem arquivos leves. Após rodar o comando ele criará uma pasta build onde estará os arquivos que precisamos.

Alt Text

Alt Text

Agora precisamos ligar nossa aplicação React ao nosso serviços de Hosting do Firebase.Para isso usaremos o firebase-tools que instalamos no começo.
Digite o comando:



firebase login


Enter fullscreen mode Exit fullscreen mode

Você precisar estar autenticado na conta do Google Firebase com seu navegador, após o comando acima o Google pode pedir alguma verificação para ligar sua aplicação no console Shell, a sua conta no Firebase no navegador. Se o Google abrir o Browser e pedir autenticação da conta. Aceite e conclua a operação.

Alt Text

Pronto! O console informa que estou autenticado e informa meu e-mail.

Dentro da raiz do projeto, vamos digitar os comandos para configurações finais.
Digite o comando:



firebase init


Enter fullscreen mode Exit fullscreen mode

Aceite a confirmação, e terá essas opções no console:

Image description

Escolha a opção:



Hosting: Configure files for Firebase Hosting and (optionally) set up Guithub Action deploys 


Enter fullscreen mode Exit fullscreen mode

Agora teremos a nova etapa de configuração:

Alt Text

Escolha a opção:



Use an existing project  


Enter fullscreen mode Exit fullscreen mode

Irá aparcer um lista de projetos e seus nomes.Agora precisamos escolher o nome do projeto que criamos no firebase.O meu é ghdsites2

Alt Text

Agora cairemos na parte de configuração do diretório público.

Alt Text

Agora digite o comando:



build  


Enter fullscreen mode Exit fullscreen mode

Aparecerá essa pergunta:



Configure as a single-page app (rewrite all urls to /index.html)? (y/N)


Enter fullscreen mode Exit fullscreen mode

Escolha a opção:



yes


Enter fullscreen mode Exit fullscreen mode

Aparecerá essa pergunta:



File build/index.html already exists. Overwrite? (y/N)


Enter fullscreen mode Exit fullscreen mode

Escolha a opção:



no


Enter fullscreen mode Exit fullscreen mode

Alt Text

Agora iremos para a parte final de construção.
Digite o comando:



firebase deploy


Enter fullscreen mode Exit fullscreen mode

Alt Text

PRONTO!
FINALMENTE!

Depois de fazer todos esse procedimentos, o console do firebase informará que o processo foi finalizado com sucesso e sua aplicação já está hospedada com um domínio e pronta para ser acessada.

Alt Text

Alt Text

Tutorial em Vídeo:
https://www.youtube.com/watch?v=XoxvXleVZV4

Top comments (2)

Collapse
 
alexalannunes profile image
Alex Alan Nunes • Edited
Collapse
 
vasconcelosfabiano profile image
Fabiano Vasconcelos

Não tô nem podendo gastar, mas tu mereceu o teu café! Me manda aí uma chave PIX pra 85999612525.
Obrigado pela excelente dica!