DEV Community

loading...

Deploy ReactJS no Firebase Hosting

Guiller
Software Engineer, Full Stack Developer Web, Enthusiastic Security Software and Gamer Developer.
Updated on ・3 min read

Primeiramente precisamos que você tenha conhecimentos em React, Node, Java Script, HTML, CSS.

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 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:

Alt Text

Escolha a opção:

Hosting: Configure and deploy Firebase Hosting sites 
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

Discussion (0)