Como implantar um aplicativo React gratuitamente com páginas do GitHub

Aprenda como implantar um aplicativo React roteado em GitHub Pages em algumas etapas simples.

Se você tem um projeto e deseja hospedá-lo gratuitamente sem comprar um domínio, usar o GitHub Pages é uma ótima opçã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ê em todo o processo, desde a criação de um repositório GitHub até a hospedagem de um site.

Crie um aplicativo React

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

No terminal, execute o comando create-react-app para criar rapidamente o scaffold de um projeto React:

npx create-react-app react-gh

Navegue até a pasta criada e inicie seu aplicativo.

npm run start

Em seguida, abra a pasta do projeto com seu editor de código preferido. Na pasta src, exclua tudo, exceto App.js e index.js. Substitua o conteúdo em App.js pelo seguinte:

function App() {
  return (
    <div>
     <h2>Github Pages</h2>
     <h3>Deploying React to Github</h3>
    </div>
  );
}
export default App;

Adicionar roteamento

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

npm install react-router-dom

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

import { Link } from "react-router-dom";
function App() {
  return (
    <div>
      <Link to="/about">About</Link>
     <h2>Github Pages</h2>
     <h3>Deploying React to Github</h3>
    </div>
  );
}
export default App;

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

const About = () => {
    return ( 
        <div>
          <Link to="/">Home</Link>
          <h2>About Page</h2> 
        </div>
        );
}
export default About;

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

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

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { HashRouter, Routes, Route } from "react-router-dom";
import About from "./About";
ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <Routes>
        <Route path="/" element={<App/>} />
        <Route path="/about" element={<About/>}/>
      </Routes>
    </HashRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

Observe como você usou HashRouter em vez de BrowserRouter. Usar BrowserRouter 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 hash do URL para sincronizar a UI com o URL.

A etapa final é submeter todas as novas alterações ao Git:

git add .
git commit -m "Create React app"

Criar repositório GitHub

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

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

git remote add origin <https://github.com/><username>/<repository name>.git

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

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

Implantar o aplicativo React nas páginas do GitHub

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

npm install gh-pages

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

Em seguida, vá para o arquivo package.json e adicione a página inicial que será a URL inicial do aplicativo:

"homepage": "https://<username>.github.io/<repository-name>/",
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build", 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

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

npm run deploy

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