- Ú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,
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
Top comments (2)
O meu deu isso!! :'(
dev-to-uploads.s3.amazonaws.com/up...
Não tô nem podendo gastar, mas tu mereceu o teu café! Me manda aí uma chave PIX pra 85999612525.
Obrigado pela excelente dica!