--- title: "Reaja em produção com Firebase Hosting" description: "Firebase Hosting é um serviço de armazenamento de conteúdo em nível de produção do Google voltado para desenvolvedores para que possam implantar aplicativos da Web com conteúdo estático de forma rápida e simples." author: "Oscar Barajas Tavares" language: "pt-BR" canonical: "https://gndx.dev/pt/blog/react-en-produccion-firebase-hosting/" datePublished: "2017-10-10T00:00:00.000Z" dateModified: "2017-10-10T00:00:00.000Z" categories: ["others"] tags: ["base de fogo","reagir","recursos"] --- # Reaja em produção com Firebase Hosting > Firebase Hosting é um serviço de armazenamento de conteúdo em nível de produção do Google voltado para desenvolvedores para que possam implantar aplicativos da Web com conteúdo estático de forma rápida e simples. **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_](https://github.com/gndx/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](http://firebase.google.com)) e habilitar um novo projeto escolhendo um nome para seu novo aplicativo. ![Reagir Firebase](https://i1.wp.com/gndx.co/wp-content/uploads/2017/10/react-firebase-gndx-01.png?resize=700%2C482&ssl=1) 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. ![Reagir Firebase](https://i0.wp.com/gndx.co/wp-content/uploads/2017/10/react-firebase-gndx-02.png?resize=691%2C839&ssl=1) 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. ![Reagir Firebase](https://i0.wp.com/gndx.co/wp-content/uploads/2017/10/react-firebase-gndx-03.png?resize=700%2C402&ssl=1) **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/](https://barajas-mx.firebaseapp.com/) ![Reagir Firebase](https://i1.wp.com/gndx.co/wp-content/uploads/2017/10/react-firebase-gndx-04.png?resize=700%2C453&ssl=1) \*\*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](https://tudominio.com)_ seu projeto funcionando. No meu caso utilizei meu domínio [https://barajas.mx](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… --- Fuente canónica: [https://gndx.dev/pt/blog/react-en-produccion-firebase-hosting/](https://gndx.dev/pt/blog/react-en-produccion-firebase-hosting/) Autor: [Oscar Barajas Tavares](https://gndx.dev/pt/about/)