Reaja em produção com Firebase Hosting

Firebase Hosting é um serviço de armazenamento de conteúdo de nível de produção do Google voltado para desenvolvedores para que eles possam implantar aplicativos da Web com conteúdo estático de forma rápida e simples.

Neste pequeno manual iremos passo a passo para enviar seu desenvolvimento criado em React para produção. Para isso vamos utilizar um projeto que construí anteriormente com React “gresume-react” um template gratuito para criar um portfólio profissional com react.

Configuração do projeto no Firebase

É aqui que precisaremos ter uma conta Firebase (firebase.google.com) e habilitar um novo projeto escolhendo um nome para seu novo aplicativo.

Lembre-se que o Firebase criará uma URL baseada no nome da sua aplicação e é aí que sua aplicação estará disponível.

Construindo nosso projeto

Nosso projeto é construído com “create-react-app” este pacote nos permite esquecer as configurações de um projeto inicial e focar no desenvolvimento com React.

Portanto, para construir nosso projeto para enviar para produção, basta executar o seguinte comando: “npm run build” criará uma pasta dentro de nosso projeto chamada “build/” que contém todo nosso projeto pronto para ser implantado em um servidor de produção.

Configurando o Firebase Hosting

Para fazer upload do nosso projeto para o Firebase Hosting é necessário ter o Firebase Command Line Interface (CLI) instalado, instalamos com o seguinte comando no console:

npm install -g firebase-tools

Depois de instalado, é necessário fazer login no console para acessar nossos projetos. Executamos o seguinte comando:

firebase login

Este comando abrirá uma janela onde faremos o login com nossa conta Firebase que lhe dará as permissões necessárias para trabalhar desde o console com nossos projetos.

Configurando o Firebase em nosso projeto, executamos o seguinte comando:

firebase init

Seguiremos as instruções que o cliente nos mostra através do console, para utilizar apenas o Firebase Hosting é necessário selecionar a opção “Hosting: Configurar e implantar sites do Firebase Hosting” ou, na sua falta, as opções que você precisa para o seu projeto.

Escolhemos nosso projeto que criamos anteriormente em Firebase.google.com selecionando-o na lista de projetos que temos

Selecione a pasta onde está localizado nosso projeto, no nosso caso é a pasta “build/” que contém nosso projeto react pronto para produção.

O Firebase nos perguntará se você deseja que nosso aplicativo seja configurado como um “aplicativo de página única”. A opção padrão é “não” no nosso caso, poderíamos realmente nos beneficiar com a configuração, então digitaremos “y”.

O Firebase nos avisará que já temos um arquivo “index.html” gerado, que não queremos que seja substituído. Digite “n” e pressione Enter para manter nosso próprio “index.html”, gerado pelo nosso processo de construção acima.

Depois de concluirmos a configuração inicial, é hora de implantar.

Implantar

Executamos o seguinte comando:

firebase deploy

Este comando pegará tudo o que for encontrado em “build/” e hospedará no Firebase, e nos mostrará a URL que ele gera para visualizar nosso projeto em produção.

A URL gerada para este exemplo é a seguinte: https://barajas-mx.firebaseapp.com/

**Bônus

**

Configurar implantação

Podemos continuar trabalhando em nosso projeto e se precisarmos fazer alguma alteração em nosso projeto, basta executar o comando “npm run build” para gerar todos os nossos arquivos prontos para produção novamente e então executar “firebase deploy“.

Você pode adicionar este comando aos nossos scripts dentro de “package.json” chamando nosso script de implantação: “firebase deploy”.

O que nos permitirá executar o seguinte comando no console:

npm run build && npm run deploy

Configure um domínio no Firebase Hosting

Configurar um domínio é extremamente fácil no Firebase, se já tivermos um podemos ir até a seção “Hospedagem” e escolher “Conectar um domínio” seguir as instruções que validarão nosso domínio com um registro TXT e uma vez validado procederemos à adição dos registros principais do tipo “A” para nosso domínio e em questão de minutos poderemos ver em https://tudominio.com seu projeto funcionando.

No meu caso utilizei meu domínio https://barajas.mx onde está localizado meu portfólio.

Vou preparar outro manual sobre como integrar o Firebase Database para exibir informações do portfólio.

Breve…