5 maneiras de implantar um aplicativo React gratuitamente

Este artigo explora cinco maneiras de implantar seu aplicativo React gratuitamente usando plataformas de nuvem como Back4app e Netlify.

O React se tornou uma biblioteca popular para a criação de interfaces de usuário dinâmicas no desenvolvimento moderno da Web.

No entanto, a jornada do desenvolvimento até a implementação geralmente tropeça em um ponto crítico: o custo.

A necessidade de soluções de hospedagem acessíveis aumentou com o crescente número de aplicativos React que são desenvolvidos diariamente.

Principais conclusões

• Aprenda várias maneiras de implantar um aplicativo React, incluindo IA, arrastar e soltar e via CLI
• Visão geral da experiência de implementação usando várias nuvens, como Back4app e Vercel
• Compare as opções de implementação de acordo com seus requisitos

Visão geral das opções de hospedagem React

Implante seu aplicativo React com o agente de IA do Back4app

O Back4app é uma plataforma em nuvem que simplifica o processo de criação, implementação e gerenciamento de aplicativos da Web. É uma ótima opção para hospedar um aplicativo React e vamos começar.

O Back4app permite que os usuários implementem o React gratuitamente e oferece vários serviços, incluindo um Backend as a Service (BaaS), um Container as a Service (CaaS) e um agente de IA.

O serviço BaaS da Back4app permite que você configure facilmente o backend de seus aplicativos móveis e da Web, eliminando a complexidade de criar e manter a infraestrutura normalmente associada à configuração de um backend para seus aplicativos React a partir do zero.

O serviço BaaS oferece gerenciamento de banco de dados e autenticação de usuários, entre outros recursos.

O serviço CaaS permite que você gerencie e implemente seu aplicativo da Web usando contêineres do Docker. O serviço elimina a lacuna entre o desenvolvimento e a produção, automatizando tarefas repetitivas e gerenciando sua infraestrutura do lado do servidor.

O agente de IA do Back4app permite que você use prompts para todos os serviços do Back4app e simplifica a maneira de hospedar um aplicativo React.

Você pode gerenciar repositórios de código, criar e gerenciar aplicativos e implementar aplicativos da Web.

Abaixo estão instruções detalhadas sobre como implantar seu aplicativo React com o Back4app AI Agent

Para implantar seu aplicativo React usando o agente de IA e os contêineres do Back4app, você precisa de algumas coisas:

• Uma conta da Back4app. Visite o site da Back4app e clique no botão Registrar-se para criar uma conta.
• O aplicativo Back4App Containers GitHub está instalado em sua conta do GitHub.

Depois de instalar o aplicativo Back4app Containers GitHub, você precisa conceder ao aplicativo acesso ao repositório que deseja implantar.

Além disso, seu repositório precisa ter um Dockerfile. Aqui está um exemplo de Dockerfile que você pode adicionar ao seu repositório:

FROM node:17-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "npm", "run", "dev" ]

Observe que, se o seu projeto React foi criado usando o Vite. Você também precisará modificar o arquivo vite.config.ts.

Assim:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 8080,
  }
})

Esse bloco de código configura o servidor para aceitar conexões em todas as interfaces de rede e define a porta na qual o servidor de desenvolvimento será executado.

Nesse caso, o servidor poderá ser acessado em http://localhost:8080.

Depois de adicionar seu Dockerfile e modificar seu arquivo de configuração do Vite, certifique-se de enviar as alterações para o repositório do GitHub.

Faça login na sua conta e clique no botão “AI Agent” para acessar o Back4app AI Agent.

Isso o levará à página do agente de IA do Back4app.

Em seguida, solicite à IA que “Implemente meu aplicativo da Web a partir do GitHub“

O agente responderá com uma lista de itens para iniciar o processo de implantação, como o repositório do GitHub do aplicativo que você deseja implantar.

Forneça à IA a URL do seu repositório do GitHub usando o prompt “Here’s the URL to the GitHub Repository: <Your_GitHub_URL>” ou similar.

Responda a quaisquer outras perguntas que o agente possa ter para você, como “a ramificação a ser implantada”, para iniciar o processo de implantação.

Conforme mostrado na imagem acima, o agente de IA está atualmente implantando seu aplicativo React. Depois de algum tempo, a implantação deverá ser bem-sucedida, e a URL fornecida pelo agente de IA deverá funcionar.

Se a implantação falhar, o AI Agent fornecerá opções de solução de problemas e possíveis correções para garantir que seu aplicativo seja implantado com êxito.

Para confirmar se a implantação está concluída, você pode solicitar ao AI Agent o status atual da implantação do seu aplicativo.

Implante seu aplicativo React usando o Drag-and-Drop da Netlify

A Netlify é uma plataforma de computação em nuvem que fornece um conjunto de ferramentas para desenvolvimento, implantação e hospedagem na Web.

É uma opção popular para desenvolvedores e empresas que desejam criar e implementar aplicativos da Web modernos sem o incômodo de gerenciar a infraestrutura.

A Netlify pode criar seu aplicativo da Web a partir de qualquer repositório de código-fonte, incluindo GitHub, GitLab e Bitbucket. Ele é compatível com muitos geradores de sites estáticos e estruturas como React, Vue.js e Angular.

Com a Netlify, você pode implantar seu aplicativo da Web em uma rede global de servidores e hospedá-lo gratuitamente.

A Netlify também oferece uma variedade de planos pagos que vêm com recursos adicionais, como domínios personalizados, implementações privadas e colaboração em equipe.

Abaixo estão instruções detalhadas sobre como implantar seu aplicativo React usando o Drag-and-Drop da Netlify

Para implantar seu aplicativo com a Netlify, visite o site da Netlify e faça login em sua conta Netlify existente. Se você for novo na Netlify, clique no botão “Sign Up” (Registrar-se) para criar uma conta.

Navegue até o painel de controle de sua conta e clique no menu suspenso “Add new site” (Adicionar novo site ). Na lista suspensa, selecione a opção “Deploy manually” (Implantar manualmente).

A opção “Deploy manually” (Implantar manualmente) o leva a uma página onde você pode arrastar e soltar os arquivos de compilação do seu aplicativo React.

Você pode obter os arquivos de compilação do seu projeto React executando o comando abaixo:

npm run build

O comando acima gera uma pasta dist em seu projeto. Arraste e solte a pasta dist na página do Netlify. Isso inicia o processo de implantação.

Observação: se o seu projeto foi criado com create-react-app, o comando gera uma pasta de compilação.

Após a implantação bem-sucedida, a Netlify o redirecionará para o painel do seu aplicativo, onde você encontrará o URL do aplicativo implantado.

Implante seu aplicativo React estático usando o GitHub Pages

O GitHub Pages é um serviço de hospedagem de site estático oferecido pelo GitHub, uma plataforma de controle de versão e colaboração de código.

Ele permite que você hospede seu site diretamente do seu repositório do GitHub e foi projetado para hospedar sites estáticos que não exigem processamento no lado do servidor.

Abaixo estão as instruções sobre como implantar seu aplicativo React com o GitHub Pages

Para implantar seu aplicativo React com GitHub Pages, seu projeto deve ter um repositório do GitHub.

Se o seu aplicativo não tiver um repositório do GitHub, você precisará criar um, adicionar o código do seu aplicativo, confirmá-lo e enviá-lo para o repositório.

Em seguida, você precisa instalar o pacote gh-pages em seu aplicativo. Você usará esse pacote para criar uma compilação de produção do seu aplicativo e enviá-la para a ramificação gh-pages do seu repositório.

Para instalar o pacote gh-pages em seu projeto, execute o seguinte comando em seu terminal:

npm install gh-pages --save-dev

Depois de instalar o pacote, adicione uma propriedade de página inicial e um script de reimplantação e implantação ao seu arquivo package.json, conforme mostrado no bloco de código abaixo.

{
	"homepage": "http://<github-username>.github.io/<your-repository-name>",
	// other fields
}
"scripts": {
	"redeploy": "npm run build",
	"deploy": "gh-pages -d build",
	//other scripts  
}

A propriedade homepage deve ser o link para seu repositório. Substitua github-username e your-repository-name no bloco de código pelo seu nome de usuário do GitHub e nome do repositório.

Envie as alterações para seu repositório do GitHub e execute o script de implantação em seu terminal.

Assim:

npm run deploy

Depois de executar o comando acima, o GitHub Pages hospedará seu aplicativo. Você pode verificar isso acessando o repositório do seu aplicativo no navegador da Web.

A verificação das ramificações no repositório revelará uma ramificação “gh-pages”.

Em seguida, selecione o botão “Settings” (Configurações ) na barra de navegação.

Na página “Settings” (Configurações ), selecione a opção “Pages” (Páginas) na barra lateral. Na guia Pages, você encontrará o URL do seu aplicativo.

Para visualizar seu aplicativo, navegue até a URL fornecida em seu navegador da Web. Além disso, observe que toda vez que fizer alterações no aplicativo, será necessário executar o npm run deploy novamente para atualizar o site do GitHub Pages.

Implante seu aplicativo React usando a CLI da Vercel

A Vercel é uma plataforma de nuvem que permite implementar e hospedar aplicativos e serviços da Web com facilidade.

Ele é perfeito para as estruturas modernas da Web que você pode estar usando, como Next.js, React, Angular, Vue.js e outras.

A Vercel oferece uma série de recursos, incluindo escalabilidade, funções sem servidor, redes de borda global etc., que simplificam o processo de desenvolvimento e implantação. Ele oferece uma solução fácil de usar para implantar e dimensionar seus aplicativos front-end e sites estáticos.

Abaixo estão as instruções sobre como implantar seu aplicativo React usando a CLI da Vercel.

Para implantar seu aplicativo React usando a Vercel, você deve ter uma conta na Vercel. Se ainda não tiver uma, visite o site da Vercel e inscreva-se.

Você pode se inscrever com sua conta do GitHub, GitLab ou Bitbucket.

Em seguida, é necessário instalar a CLI da Vercel em seu computador local, executando o comando abaixo no terminal:

npm i -g vercel

Depois de instalar a CLI, faça login na conta da Vercel em seu computador para implantar o aplicativo.

Para fazer isso, execute o comando abaixo no diretório de aplicativos do aplicativo React que você deseja implantar:

vercel

A CLI fornecerá algumas opções para fazer login na Vercel.

Você pode selecionar a opção que usou para se inscrever na Vercel anteriormente nesta seção. Depois de fazer o login com êxito, você poderá implementar o aplicativo.

Digite “Y” para implantar o aplicativo. A CLI da Vercel fornecerá alguns prompts para ajudá-lo a configurar a implantação.

Após a configuração, a CLI implantará o aplicativo e exibirá um URL que poderá ser usado para acessar o aplicativo no navegador da Web.

Implante seu aplicativo React usando a hospedagem do Firebase

O Firebase é uma plataforma de desenvolvimento baseada em nuvem desenvolvida pelo Google que oferece uma variedade de ferramentas e serviços para criar e gerenciar aplicativos móveis e da Web.

É uma plataforma rica em recursos que oferece várias ferramentas e serviços, inclusive um banco de dados chamado Firestore, hospedagem e muito mais. O Firestore é um banco de dados flexível e dimensionável que permite armazenar dados para desenvolvimento móvel, da Web e de servidores.

O Firebase Hosting é um serviço de hospedagem na Web rápido e seguro. Ele oferece fácil implementação de aplicativos da Web e conteúdo estático com uma CDN global, certificados SSL para conexões seguras e integração perfeita com outros serviços do Firebase.

Abaixo estão as instruções sobre como implantar seu aplicativo React usando a hospedagem do Firebase

Para acessar os recursos da Hospedagem Firebase, você deve ter uma conta Firebase. Se você ainda não tiver uma, visite o site do Firebase para criar uma.

Quando estiver conectado, clique no botão “Go to console” (Ir para o console), localizado na área superior direita. Crie um projeto na página do console clicando no botão “Add project” (Adicionar projeto).

Clicar no botão “Add project” (Adicionar projeto) o levará a uma nova página, onde você fornecerá um nome ao seu projeto.

Depois de dar um nome ao seu projeto, clique no botão “continuar”. Na próxima página, você poderá criar o projeto.

Depois de criar o projeto, o site o levará ao painel de controle do projeto. A partir daí, navegue até o menu suspenso “Build” e selecione “Hosting”. Isso o levará a uma página diferente.

Clique no botão “Get started” (Iniciar).

Ao clicar no botão “Get started” (Começar ), o site o guiará para uma página diferente que descreve as etapas envolvidas na hospedagem do seu aplicativo com o Firebase.

A primeira etapa é instalar a CLI do Firebase. Para fazer isso, execute o seguinte comando em seu terminal:

npm install -g firebase-tools

Em seguida, faça login na sua conta do Firebase executando o comando abaixo:

firebase login

Em seguida, inicialize um projeto Firebase no diretório raiz do seu aplicativo executando o comando abaixo:

firebase init

Esse comando o ajudará a configurar e preparar o projeto para a implantação, orientando-o por meio de uma série de prompts, conforme mostrado na imagem abaixo.

Depois de configurar o projeto, execute o seguinte comando para compilar o aplicativo:

npm run build

Por fim, implemente seu aplicativo executando o comando abaixo:

firebase deploy

O comando acima implantará o aplicativo e fornecerá um URL que permitirá acessar o aplicativo em um navegador da Web.

Você também pode acessar o URL do aplicativo no painel do seu projeto no site do Firebase, conforme mostrado na imagem abaixo.

Conclusão

Navegar pelo cenário de implantação de aplicativos React não precisa ter um preço alto.

Os métodos de implantação explorados neste artigo oferecem alternativas práticas e gratuitas para implantar seu aplicativo React.

No entanto, talvez seja necessário mudar para um de seus planos pagos econômicos se seus aplicativos consumirem muitos recursos.