Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

React é uma biblioteca JavaScript popular para construir interfaces de usuário funcionais em aplicações web dinâmicas. Talvez você tenha passado muitas horas depurando o código React na tentativa de criar o próximo Instagram ou Airbnb.

Independentemente do que você está construindo, o objetivo final é sempre mostrar seu trabalho para o mundo. É aqui que as plataformas de hospedagem, como o Netlify, são úteis. Eles fornecem um conjunto de ferramentas que agilizam o processo de implantação.

Acompanhe para saber como implantar seus aplicativos React usando as ferramentas de implantação fáceis de usar do Netlify.

O que é Netlify?

O Netlify é uma plataforma de desenvolvimento baseada em nuvem com recursos que facilitam muito a hospedagem e a implantação de aplicativos na Web. Simplificando, ele fornece uma variedade de ferramentas e serviços que agilizam e simplificam o processo, permitindo que você implante e hospede um aplicativo da Web em segundos.

instagram viewer

Principais recursos do Netlify

O Netlify possui uma variedade de recursos que simplificam o processo de implantação.

  • Ele fornece acesso essencial e recursos de controle de versão para permitir que as equipes de desenvolvimento colaborem de maneira eficiente e eficaz em projetos.
  • Oferece serviços de hospedagem seguros que você pode ajustar para atender às suas necessidades. Além disso, fornece backups automatizados em caso de perda de dados.
  • Ele se integra perfeitamente com serviços populares de desenvolvimento em nuvem, como GitHub, GitLab e Bitbucket.
  • Ele fornece recursos que facilitam a configuração de um URL de domínio personalizado e um certificado SSL para seu aplicativo.

Crie um aplicativo React de demonstração

  1. Para começar, você precisará primeiro criar um aplicativo React de demonstração que você eventualmente implantará no Netlify. Execute o comando abaixo em seu terminal para criar uma aplicação React: 
    npx create-react-app demo-react-netlify-app
  2. Em seguida, execute este comando de terminal para ativar o servidor de desenvolvimento: 
    npm start
    Vá em frente e visualize os resultados em seu navegador em http://localhost: 3000.
  3. Por fim, execute este comando para criar uma versão pronta para produção do seu aplicativo: 
    npm run build
    Este comando gera os arquivos de produção e ativos necessários dentro de uma nova pasta no diretório raiz chamada build. A pasta de compilação captura uma versão minificada de todo o aplicativo, contendo tudo o que é necessário para implantar o aplicativo.

Implante o aplicativo React no Netlify

O Netlify fornece três métodos que você pode usar para implantar seu aplicativo React. Você pode:

  • Importe seu projeto de um host de repositório Git, como o GitHub.
  • Use o recurso de arrastar e soltar.
  • Use a ferramenta de linha de comando, CLI do Netlify.

Implantar usando o recurso de importação do GitHub

  1. Começar por criando um repositório no GitHub para hospedar seus arquivos de projeto de aplicativo React. Como alternativa, você também pode hospedar seus arquivos de projeto em qualquer outro provedor Git compatível, como GitLab, Bitbucket ou Azure DevOps.
  2. Em seguida, inscreva-se para uma conta em Netlify. Depois de se inscrever, navegue até o painel da sua conta e selecione o Sites aba.
  3. Clique no Importar do Git botão.
  4. Selecione sua plataforma de provedor de Git preferencial. O Netlify solicitará que você se autentique com seu provedor Git para conceder acesso à sua conta e repositórios.
  5. Depois de fazer isso, o Netlify exibirá uma lista de repositórios em seu provedor Git. Selecione o repositório do projeto React que você inicialmente enviou para seu provedor Git.
  6. Depois de selecionar o repositório, você precisa especificar como o Netlify deve lidar com o processo de implantação. Normalmente, para sites estáticos, você não precisa fazer nenhuma alteração, no entanto, para sites dinâmicos, como aplicativos React, você terá que definir as configurações de compilação. Felizmente, o Netlify, por padrão, detecta automaticamente a estrutura usada para criar o aplicativo e preenche os campos com as configurações de compilação necessárias.
  7. Finalmente, clique Implantar site para terminar o processo.

Clique no URL fornecido para visualizar o aplicativo em seu navegador. Se você tiver um URL de domínio personalizado, poderá instruir o Netlify a usá-lo com seu site atualizando o URL nas configurações do site.

Implantar usando o recurso arrastar e soltar

Este é o método mais simples para implantar seu aplicativo React no Netlify. Você só precisa arrastar e soltar a pasta de compilação na interface de usuário de arrastar e soltar do Netlify.

  1. No painel do Netlify, selecione o Site aba. A seguir, clique em Adicionar novo site e então selecione Implantar manualmente nas opções do menu suspenso.
  2. Na página do recurso arrastar e soltar, selecione a pasta que contém os arquivos de compilação do React e solte-a nesta interface do usuário. O projeto será implantado instantaneamente no Netlify. Alternativamente, você pode clicar em Navegue para carregar para selecionar sua pasta de construção no sistema de arquivos.

Implante usando a interface de linha de comando do Netlify

Usando a interface de linha de comando (CLI) do Netlify, você pode implantar seu aplicativo React diretamente de um terminal. Além disso, a CLI do Netlify permite que você configure a implantação contínua para que, quando você confirmar e enviar novas atualizações ao seu repositório Git, elas sejam implantadas automaticamente.

  1. Execute o comando abaixo em seu terminal para instalar a CLI do Netlify: 
    npm instalar netlify-cli -g
  2. Agora, execute o comando abaixo para implantar seu aplicativo. Verifique se você está no diretório de trabalho do projeto antes de implantar. 
    netlify implantar
    A CLI do Netlify solicitará que você permita que ele faça alterações em sua conta. Depois de conceder a permissão, forneça o nome da conta da equipe que você forneceu ao se inscrever, em seguida, escolha se deseja vincular o diretório do aplicativo a um site existente ou criar e configurar um novo um. Termine fornecendo um nome de site personalizado e o nome da pasta de compilação.
  3. A CLI implantará uma versão de rascunho do seu aplicativo. Verifique se tudo funciona conforme o esperado.
  4. Por fim, execute o comando abaixo para implantar seu aplicativo em produção. 
    netlify implantar --prod

Comparando os três métodos de implantação

O método de importação do GitHub é o mais eficiente para implantar aplicativos de produção, pois permite vincular seu repositório Git diretamente para o Netlify e mantenha seu código sincronizado com o site ou aplicativo ao vivo. Quando você confirma e envia alterações para seu repositório Git, o Netlify atualiza automaticamente o site.

O método de arrastar e soltar é mais simples para implantar sites estáticos, pois não requer codificação ou configuração. No entanto, ele não permite atualizações automáticas quando você faz alterações em seu repositório.

O método CLI é o mais abrangente, pois oferece controle total sobre o processo de implantação e permite configurações personalizadas. Este método é mais adequado se você já tiver um bom conhecimento do Netlify e se sentir confortável trabalhando com a linha de comando.

Todos os três métodos são úteis para implantar aplicativos no Netlify. Em última análise, a escolha de qual usar dependerá das necessidades de cada projeto individual.

Usando o Netlify para implantar outros aplicativos

Netlify é uma ferramenta poderosa e versátil que você pode usar para implantar outros aplicativos que apenas React. Você pode usá-lo para implantar e hospedar sites estáticos e aplicativos dinâmicos criados com diferentes estruturas, como Angular.

A interface amigável facilita a configuração, o gerenciamento e a implantação de suas APIs.