Como implantar um aplicativo React gratuitamente com o GitHub Pages

Se você tem um projeto e deseja hospedá-lo gratuitamente sem comprar um domínio, usar o GitHub Pages é uma ótima opção. O GitHub Pages converte seus repositórios em sites e permite hospedar sites de projetos ilimitados.

A implantação de um site React com navegação requer configuração extra em comparação com a implantação de um site estático. Este tutorial orienta você por todo o processo, desde a criação de um repositório do GitHub até a criação de um site hospedado.

Crie um aplicativo React

Para fins de demonstração, você precisa criar um projeto React com roteamento que você implantará mais tarde. No entanto, se você já tiver um Reagir projeto, sinta-se à vontade para pular esta etapa.

No terminal, execute o criar-reagir-aplicativo comando para montar rapidamente um projeto React:

npx create-react-app react-gh

Navegue até a pasta criada e inicie seu aplicativo.

npm executar início

Em seguida, abra a pasta do projeto com sua preferência editor de código. No src pasta, exclua tudo, exceto App.js e index.js. Substitua o conteúdo em App.js pelo seguinte:

função App() {
 Retorna (


Páginas do Github

Implantando o React no Github




 );
}
exportar aplicativo padrão;

Adicionar roteamento

Para adicionar roteamento ao seu aplicativo, primeiro, instale react-router-dom:

npm instala react-router-dom

No App.js, adicione o link para a página sobre:

import { Link } de "react-router-dom";
função App() {
 Retorna (


Sobre
Páginas do Github

Implantando o React no Github




 );
}
exportar aplicativo padrão;

Como o App.js funcionará como sua página inicial, você só precisa criar o Sobre componente:

const Sobre = () => {
 Retorna ( 


Casa
Sobre a página




 );
}
exportar padrão Sobre;

Agora, você precisa criar as rotas e configurar um roteador React.

Modifique index.js para corresponder o URL aos respectivos componentes:

importe Reagir de "reagir";
importe ReactDOM de "react-dom";
importar App de "./App";
import { HashRouter, Routes, Route } from "react-router-dom";
importar Sobre de "./Sobre";
ReactDOM.render(



} />
}/>


,
 document.getElementById("raiz")
);

Observe como você usou HashRouter ao invés de NavegadorRoteador. Usando NavegadorRoteador geraria um erro 404. Isso ocorre porque o roteamento funciona de maneira diferente nas páginas do GitHub. Hashrouter não gera um erro porque usa a parte de hash da URL para sincronizar a interface do usuário com a URL.

A etapa final é confirmar todas as novas alterações no Git:

gi adicionar.
git commit -m "Criar aplicativo React"

Criar repositório GitHub

Desde a Páginas do GitHub irá hospedar seu aplicativo convertendo o repositório em um site, você precisa criar um repositório GitHub. Acesse sua conta do GitHub e crie um novo repositório com o mesmo nome do seu projeto.

Em seguida, adicione o repositório do GitHub ao seu repositório local como remoto:

git remote adicionar origem /.git

Por fim, envie o repositório local para o GitHub:

git branch -M main
git push --set-upstream origin main

Implante o aplicativo React nas páginas do GitHub

Para usar o GitHub Pages, você terá que instalá-lo primeiro:

npm instala gh-pages

páginas gh permitirá que você crie o páginas gh branch onde você implantará seu código.

A seguir, vá para o seu pacote.json arquivo e adicione a página inicial que será a URL inicial do aplicativo:

"página inicial": "https://.github.io//",
"roteiros": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts start",
 "build": "construir scripts de reação",
 "teste": "teste de scripts de reação",
 "eject": "react-scripts ejetam"
 }

Execute o seguinte comando para concluir o processo de implantação:

npm executar implantação

Seu aplicativo agora está implantado no GitHub e você pode visitá-lo em https://.github.io/.

Faça mais com as páginas do GitHub

O GitHub Pages fornece uma maneira simples de implantar sites na Internet gratuitamente. Embora você tenha visto apenas como implantar um projeto React simples, o GitHub Pages permite que você faça muito mais. Por exemplo, você pode criar um blog completo usando Jekyll e até mesmo hospedá-lo usando um domínio personalizado.

Como hospedar um site de graça usando o GitHub Pages

Leia a seguir

Sobre o autor