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

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/

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

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

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:

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

npm install

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

npm build

• ou:

npm run-script build

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.

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

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.

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

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

Escolha a opção:

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

Agora teremos a nova etapa de configuração:

Escolha a opção:

Use an existing project  

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

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

Agora digite o comando:

build  

Aparecerá essa pergunta:

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

Escolha a opção:

yes

Aparecerá essa pergunta:

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

Escolha a opção:

no

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

firebase deploy

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.

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