Introdução

React é uma biblioteca de front-end ultra popular para a construção de interfaces de usuário. Como a saída é HTML, CSS e JavaScript, ele pode ser hospedado em vários serviços como páginas do Github ou Netlify, para citar alguns.

Recentemente, o Cloudflare Pages se tornou geralmente disponível , que o torna outro ótimo serviço para hospedar seu aplicativo React. O Cloudflare Pages é seguro, rápido e altamente escalonável.

Neste tutorial passo a passo, hospedaremos uma demonstração de configuração do aplicativo React nas páginas do Cloudflare. Vamos indo.

Por que páginas Cloudflare?

Claro, React (ou qualquer outra saída estática) pode ser hospedado em pelo menos meia dúzia de serviços gratuitamente. Por que devemos escolher Cloudflare Pages?

Além dos recursos regulares, como implantações de visualização e integração com Github, o Cloudflare Pages tem domínios personalizados, redirecionamentos e largura de banda ilimitada, tudo gratuitamente. Todos esses recursos a zero dólares por mês, e temos uma rede rápida, segurança com SSL grátis e escalabilidade incrível.

Pré-requisitos

Antes de avançarmos para o código abaixo, aqui estão alguns pré-requisitos:

1. 1. Conhecimento prévio de JavaScript e React
   2. Conhecimento prévio de npm e npx
   3. Node.js e npm/yarn trabalhando no ambiente de sua escolha
   4. Conhecimento prévio de Git e uma conta Github funcional
   5. Uma conta Cloudflare, para a qual você pode inscrever-se para grátis

É hora de começar.

Configurar um aplicativo React com Criar aplicativo React

Como a primeira etapa deste guia, configuraremos o React com Criar aplicativo React (CRA). Se você não tem o CRA instalado, pode fazê-lo com npm install-g create-react-app . Para iniciar um boilerplate do aplicativo React com CRA, executaremos o seguinte comando:

 bash
npx create-react-app react-cloudflare-pages

Isso configurará todo o boilerplate do React para nós. Assim que for executado, veremos uma saída como esta abaixo:

Levará alguns minutos para fazer o download e configurar o boilerplate React e terminar com o resultado da seguinte forma:

Conforme instruído na imagem acima, para verificar se nosso aplicativo React está funcionando, podemos executar:

 bash
cd react-cloudflare-pages
início do fio

Ele executará o servidor de desenvolvimento e você pode executar https://localhost: 3000 em seu navegador padrão para mostrar uma saída como esta:

Parabéns! Nosso padrão React com CRA está funcionando.

Em seguida, enviaremos este código básico para o Github e, posteriormente, alterá-lo para obter uma lista de usuários de uma API simulada e mostrar alguns de seus campos.

Envie o código clichê para o Github

Para implementar nosso boilerplate React básico, criaremos um novo repositório Github da seguinte maneira:

Não há problema em mantê-lo público e vazio. Role até a parte inferior da página e clique no botão Criar Repositório . Veremos uma página semelhante à abaixo:

Em seguida, copie o URL SSH para o repositório Github, que no meu caso era [email protected]: geshan/react-cloudflare-pages.git , e adicione-o como um controle remoto executando o seguinte comando na raiz do nosso projeto para enviar o código:

 bash
git remote add origin [email protected]: geshan/react-cloudflare-pages.git
git push origin master

Será algo parecido com o seguinte:

Consequentemente, iremos atualizar o código para chamar a API simulada e listar alguns dos detalhes do usuário. Se quiser, você pode criar um novo branch Git para fazer as seguintes alterações, mas vou deixar isso para você.

Atualize o boilerplate para chamar uma API simulada

Nosso texto padronizado React está instalado e funcionando, e também foi enviado ao GitHub. Agora, vamos alterar o código para chamar uma lista de simulação de 10 usuários e mostrar alguns campos em nosso aplicativo React.

Para fazer isso, vamos alterar o src/App.js para se parecer com o seguinte:

 js
import {Component} de'react';
importar usuários de'./components/users'; class App extends Component { estado={ Comercial: [] }; componentDidMount () { fetch ('https://jsonplaceholder.typicode.com/users') .então (res=> res.json ()) .então ((dados)=> { this.setState ({usuários: dados}) }) .catch (console.log) } render () { Retorna (  ) }
} exportar aplicativo padrão;

Observe que removemos o arquivo CSS e o logotipo desnecessários.

É hora de mergulhar um pouco mais fundo no que o código está fazendo. Primeiro, estamos importando Component do React e, em seguida, importando outro componente chamado users , que escreveremos a seguir.

Então, na classe App que estende o componente React, estamos introduzindo um estado com o array users . Quando o componente é montado, buscamos uma lista de 10 usuários de nossa API simulada- http://jsonplaceholder.typicode.com/users -e defina-o nos users do state . Em caso de erro, nós o registramos.

Para a etapa final no componente principal App , renderizamos o componente Usuários que escreveremos a seguir.

Como usamos o componente users acima, criaremos um novo arquivo src/components/users.js que conterá o seguinte:

 js
const Users=({users})=> { Retorna ( 
  
 Usuários do aplicativo 
  {Array.isArray (usuários) && users.map ((usuário)=> ( 
 
 
 {user.name} 
 
 {user.email} 
 
 Empresa: {user.company.name} 
 
 
 
 ))} 
 )
}; exportar usuários padrão

Vejamos como este arquivo funciona. É um componente muito simples que depende de os usuários serem passados ​​como um array. Verificamos se é um array e percorremos os usuários. Em seguida, imprimimos o nome do usuário, e-mail e o nome da empresa do usuário.

Se quisermos, podemos excluir os arquivos desnecessários após essa alteração com o seguinte comando:

 bash
rm-rf src/App.css src/logo.svg src/App.test.js

Depois disso, podemos executar yarn start e ver o seguinte resultado:

Viva! A API simulada está sendo chamada corretamente e vemos o nome do usuário, o e-mail e o nome da empresa renderizados corretamente. Depois disso, enviaremos nossa alteração de código ao GitHub e conectá-la ao Cloudflare Pages. Se você quiser ver quais arquivos foram alterados, você pode dar uma olhada neste solicitação pull .

Envie o aplicativo para o Github

Para enviar nossas alterações para o branch master, executaremos os seguintes comandos na raiz do projeto:

 bash
git add.
git add-u #porque nós deletamos arquivos
git commit-m"Chamar API de usuários fictícios"
git push origin master # se você estiver em um branch diferente, empurre-o e abra um PR

Após o envio, você deve ver as mudanças refletidas em seu repositório Github também. Agora é hora de obter um URL de páginas do Cloudflare para nosso aplicativo React.

Faça login nas páginas do Cloudflare

Para conectar seu aplicativo React às páginas do Cloudflare, crie uma conta do Cloudflare se ainda não tiver feito isso. Em seguida, faça login no Cloudflare e clique em Páginas à direita:

Veremos uma página semelhante a abaixo:

Clique em Conectar conta Github . Seremos redirecionados para o Github, onde podemos configurar as contas e repositórios que queremos que o CloudFlare acesse:

Clique na conta para a qual você enviou o aplicativo React acima (provavelmente será sua conta pessoal) e escolha o repositório certo para se conectar: ​​

É melhor dar acesso apenas ao repositório necessário. Após conceder acesso, seremos redirecionados para as páginas do Cloudflare onde podemos implantar o aplicativo React, selecione o repositório e clique em Iniciar configuração conforme abaixo:

A seguir, vamos configurar o branch principal como master:

Role abaixo nessa página para definir as configurações de construção da seguinte maneira:

Tive que atualizar npm build com yarn build no campo de comando build porque o CRA usa yarn no lugar de npm.

Em seguida, clique em Salvar e implantar . Se tudo correr bem, o projeto será criado e começará a ser implantado conforme mostrado abaixo:

After a couple of minutes, the build should be done, and if we click the title of the project react-cloudflare-pages we will see a page like below:

If we click the link below Deployment, which is a pages.dev URL, we should be able to see our React app deployed on Cloudflare Pages as follows:

As seen above, it is an HTTPS Cloudflare Pages URL on pages.dev.

Preview deployment in action

For us to see how previewing deployment works, I am going to change the Company label to Company Name on line 10 of src/components/users.js.

We will push it in a branch called preview-deployment, which will give us a preview on Github when we open a pull request. After it is built successfully on Cloudflare Pages, it will give us a unique link to the changes as a comment, which can be seen here:

This is a very neat feature to see the changes on a fully functioning URL.

Next steps

We can easily configure a custom domain for our React app on Cloudflare Pages, which is free as well. In addition, redirects and access control for the preview deployments can also be configured. I will leave it up to you to explore them.

Conclusão

As we have seen in this step-by-step tutorial, Cloudflare Pages is easy to set up for your React app or any other frontend framework. There is no need to configure a build process on something like Github actions or another CI system.

Connect your Github repo with Cloudflare Pages, and use the build command once as each pull request automatically gets a preview deployment URL. Exploit the power of Cloudflare Pages for free and make your websites fly.

The post Cloudflare Pages tutorial: Deploy a React app via Github appeared first on LogRocket Blog.