Como implantar aplicativos front-end nas páginas do Cloudflare?

A implantação de aplicativos front-end é um dos grandes problemas do passado. Mas hoje é moleza. Mesmo um novato pode implantar aplicativos com a ajuda de serviços de super hosting.

Muitas plataformas de hospedagem nos permitem implantar aplicativos front-end em minutos. Nosso site estará pronto publicamente em minutos.

Não é ótimo?

Sim é.

Vamos aprender como implantar aplicativos front-end no Cloudflare Pages.

Aplicativos de front-end

Antes de mergulhar na parte de implantação do aplicativo, precisamos criar um aplicativo front-end.

Como fazer isso?

Até você sabe disso. Portanto, não vamos discutir isso aqui agora.

Sabemos que existem muitas bibliotecas e frameworks para criarmos aplicativos front-end. Mas, a parte central dessas bibliotecas ou estruturas é JavaScript. Você conhece tudo isso, pois já está procurando uma maneira de implantar seu aplicativo de front-end. Você pode pular esta parte e pular para a implantação se estiver procurando apenas a parte de implantação.

Existem React, Vue, Angular, JavaScript e muitos mais. Pode-se criar aplicativos com base em seus requisitos.

Como podemos ver, existem várias opções para criar aplicativos front-end. E sobre a implantação? É o mesmo processo para todos os aplicativos de front-end?

Sim, o processo de implantação é o mesmo para todos os aplicativos de front-end. Porém, o processo que torna os aplicativos front-end prontos para implantação pode variar de acordo com as bibliotecas e estruturas.

Haverá um comando para construir para a maioria dos aplicativos front-end construídos com bibliotecas e estruturas. Você já deve saber sobre isso. Se você não sabe o que é, pode ser necessário examiná-lo com base em sua biblioteca ou estrutura de front-end.

Precisamos de um aplicativo para implantar. Vamos configurar um aplicativo simples. Você pode pular esta parte se já tiver um aplicativo de front-end para implantar.

Configurar

Antes da configuração, precisamos estar cientes de uma coisa. O ponto de entrada deve ser index.html para nosso aplicativo front-end implantá-lo nas páginas Cloudflare. Você pode encontrar o arquivo index.html (a localização pode variar de acordo com a biblioteca e a estrutura) após o processo de construção.

Vamos criar um aplicativo simples React e Plain JavaScript para a demonstração. Você pode escolher qualquer outra biblioteca ou estrutura com a qual esteja familiarizado. Vamos configurar o aplicativo React primeiro.

Execute o seguinte comando para criar o aplicativo React.

 npx create-react-app demo

Atualize o aplicativo com sua criatividade ou deixe-o como está. Vou apenas mudar algo para garantir que seja implantado corretamente no final.

Agora, vamos criar um aplicativo JavaScript simples.

Ter index.html é obrigatório para nós. Então, vamos criar o arquivo com o nome index.html . Agora, você pode adicionar mais arquivos como styles.css, script.js, imagens, etc., para torná-lo mais sofisticado. Mas não é obrigatório :).

Nossa configuração simples para implantação agora está concluída. Qual o proximo? É hora de implantação. Mergulhe nisso.

Desdobramento, desenvolvimento

As páginas do Cloudflare nos permitem implantar nosso aplicativo front-end do GitHub. Portanto, o processo de implantação tem duas partes.

• Primeiro, precisamos ter o código do nosso aplicativo no GitHub.
• Em segundo lugar, implantar o aplicativo nas páginas do Cloudflare.

Na maioria das vezes, você não terá que se preocupar com a primeira parte, pois mantemos nosso código em plataformas de hospedagem desde o primeiro dia do projeto. Você pode pular a primeira parte e passar para a parte de implantação.

Se você não enviou seu código para o GitHub ou se ele está em outras plataformas de hospedagem de código, pode ser necessário mudá-lo para o GitHub para implantar nas páginas do Cloudflare. Você pode seguir as etapas abaixo para enviar seu código ao GitHub ou fazê-lo por conta própria.

1. Enviando código para GitHub

Você tem uma conta GitHub? Sim, acho que na maioria dos casos. Caso ainda não tenha um, crie um aqui.

• Vá para GitHub e faça login em sua conta.
• Crie um repositório com o nome do seu projeto. Aqui, estamos nomeando-o como o demo .

• Um repositório recém-criado terá a seguinte aparência. Ele mostra alguns comandos git para preencher seu repositório com código.

Vamos enviar nosso código para o repositório que criamos agora. Você pode seguir as etapas abaixo ou fazer você mesmo, se já estiver familiarizado com elas. Vamos começar abrindo nosso projeto no terminal ou cmd.

• Inicialize o git com o comando git init .
• Adicione todas as suas alterações ao git local usando o comando git add . .
• Confirme as alterações com o comando git commit -m "message" . Substitua a mensagem por uma mensagem adequada para o commit.
• Agora, temos que conectar nosso repositório remoto ao projeto local.
• O comando para conectá-lo é git remote add origin 'your_repo_path' . Substitua your_repo_path pelo seu repositório remoto. O caminho do repositório será o seguinte [email protected]:username/repo_name . O caminho do meu repositório para o demo é [email protected]:hafeezulkareem/demo .
• A etapa final é enviar o código para nosso repositório remoto. Podemos fazer isso usando o comando git push -u origin main .

Vamos ver os snaps do código no repositório GitHub.

Terminamos de enviar nosso código para o Github. Nossa próxima tarefa é implantá-lo nas páginas do Cloudflare . Sem mais delongas, vamos começar a implantação.

2. Implantando em páginas do Cloudflare

Vamos implantar o site nas páginas do Cloudflare. Antes de prosseguir, temos que criar uma conta Cloudflare. Se você ainda não tem uma conta no Cloudflare, crie uma aqui. Após a conclusão da criação da conta Cloudflare, você está pronto para implantar seu site.

• Vá para o site Cloudflare Pages.
• Faça login na sua conta. Você verá o painel da seguinte maneira.

• Se você estiver conectado ao site da Cloudflare , talvez não veja o painel de suas páginas.
• Navegue até o painel das páginas clicando no botão Páginas no lado direito do seu painel Cloudflare. Consulte a imagem abaixo.

• Clique no botão Criar um projeto no painel das páginas.

• Você irá navegar para a página seguinte.

• Clique na conta Connect GitHub para obter nosso repositório de aplicativos do GitHub .
• Você será redirecionado para a página de aplicativos do GitHub para autorizar o Cloudflare Pages.

• Podemos dar acesso a todos os repositórios ou alguns selecionados. É melhor dar acesso aos repositórios que estamos implantando no Cloudflare Pages. Você pode dar acesso a todos os repositórios se quiser.
• Selecione uma das duas opções.
• Se você selecionou Todos os repositórios , não há necessidade de selecionar o repositório específico dos repositórios. Clique no botão Instalar e Autorizar .
• Se você selecionou Repositórios selecionados apenas , você deve selecionar repositórios no menu suspenso. Clique na lista suspensa Selecionar repositórios que aparece após selecionar a opção Apenas selecionar repositórios .

• Insira o nome do seu repositório conforme a seguir.

• Seu repositório será mostrado assim que você inserir o nome. Selecione o repositório. Você pode ver o repositório selecionado no topo da lista da seguinte forma.

• Clique no botão Instalar e Autorizar . Você será redirecionado para a página de implantação do Cloudflare Pages.
• Você verá todos os repositórios autorizados na página.

• Selecione o repositório que deseja implementar.

• Após selecionar o repositório a ser implantado, clique no botão Iniciar configuração .

• Isso o levará às próximas etapas do processo de implantação, ou seja, Configurar compilações e implantações .

• Ao rolar para baixo, você encontrará uma seção chamada Configurações de compilação . Temos que selecionar o processo de compilação apropriado para nosso aplicativo de front-end.
• Temos que selecionar o processo de construção com base na estrutura ou biblioteca que estamos usando.
• Clique na predefinição de Estrutura para ver todas as opções.

• Aqui, estamos implantando aplicativos React e Plain JavaScript .
• Se você estiver implantando um aplicativo React , selecione Criar aplicativo React no menu suspenso.
• Para um aplicativo Plain JavaScript sem nenhum pacote, selecione Nenhum .

• Se você estiver implantando algum outro aplicativo de front-end, selecione a opção de compilação predefinida do Framework apropriada.
• Podemos selecionar Nenhum e inserir o comando de compilação personalizado também. Com base em seu aplicativo, selecione-o.
• Após a configuração da compilação, clique no botão Salvar e implantar para concluir nosso processo de implantação.
• Depois de clicar no botão Salvar e implantar , o processo de implantação começará da seguinte maneira.

• O processo levará alguns minutos para implantar nosso site. Espere e aproveite.
• Após a conclusão do processo de implantação, ele mostra a URL do site com uma mensagem de sucesso.

• Visite o site com o URL fornecido.

• Podemos atualizar as configurações do site na página do projeto.

• As páginas do Cloudflare implantarão automaticamente as atualizações sempre que enviarmos um novo código ao repositório.

É isso. Concluímos a implantação de nosso aplicativo front-end nas páginas do Cloudflare.

Conclusão

Viva! implantamos nosso aplicativo front-end nas páginas do Cloudflare. Depois de implantar o aplicativo frontend, você pode ter que alterar as configurações, atualizar coisas, etc ..; consulte a documentação do Cloudflare aqui. Se quiser ver as etapas para implantar um guia de estrutura específico, você pode acessar a seção de guias de estrutura na documentação.

Em seguida, que tal implantar o front-end para Netlify?

Nota: Os sites de demonstração mostrados no artigo podem não estar disponíveis publicamente depois de algum tempo.

Boa implantação