Olá, meu projeto ta rodando certinho na Vercel, mas tentei hospedar no Github Pages tbm e só aparece uma página em branco. Já hospedei outros projetos e sempre deu certo, mas esse é o primeiro que tento usando React.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá, meu projeto ta rodando certinho na Vercel, mas tentei hospedar no Github Pages tbm e só aparece uma página em branco. Já hospedei outros projetos e sempre deu certo, mas esse é o primeiro que tento usando React.
Olá, bom dia.
Para aplicações React no GitHub Pages, você pode utilizar a lib gh-pages.
Passo 1: Instalar a Biblioteca
npm install gh-pages --save-dev
Passo 2: Configurar o package.json Adicione as três linhas abaixo
"homepage": "https://gitname.github.io/react-gh-pages",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
A url da homepage tem que seguir esse formato:
https://{nome_do_usuario}.github.io/{nome_do_repositório}
como no exemplo abaixo:
https://willianmedeiros14.github.io/teste_react/
No final o package.json tem que ficar parecido com isso:
{
"name": "my-app",
"version": "0.1.0",
"homepage": "https://WillianMedeiros14.github.io/teste_react",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Passo 3: Faça o commit das suas alterações:
Passo 4: Criar a Branch gh-pages
git checkout -b gh-pages
Passo 3: Faça o commit das suas alterações novamente:
Passo 5: Fazer o Deploy
npm run deploy
caso queira com uma mensagem diferente, pode rodar o comando abaixo adicionado sua mensagem.
npm run deploy -- -m "Deploy React app to GitHub Pages"
Passo 6: Configurar o GitHub Pages
Navegue até a página de configurações do GitHub Pages Acima do navegador de código, clique na guia "Configurações" Na barra lateral, na seção "Código e automação", clique em "Páginas" Defina as configurações de "Build e implantação" da seguinte forma: Origem: Implantar de um branch Ramo: Ramo: gh-pages Pasta: / (root) Clique no botão "Salvar"
É isso! O aplicativo React foi implantado no GitHub Pages!
Eu fiz uma aplicação de exemplo para testar, pode ser encontrada bos links abaixo:
https://github.com/WillianMedeiros14/teste_react https://willianmedeiros14.github.io/teste_react/
Sucesso Estudante.