deploy-ghpages.md

Como fazer o deploy no github pages usando o react

Passo 1: Adicionar as duas linhas abaixo no arquivo package.json dentro de scripts

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Exemplo

"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",
	"lint": "eslint --no-inline-config --no-error-on-unmatched-pattern -c .eslintrc.json . --ext .js, .jsx"
},

Passo 2: Adicionar o homepage com o link do seu site no inicio do arquivo package.json

Formato:

"homepage": "https://Seu_usuario_github_aqui.github.io/Nome_do_projeto/",

Exemplo

Meu nome de usuario é Leandroswq e o nome do projeto é trybe-wallet

{
 "homepage": "https://Leandroswq.github.io/trybe-wallet/",
 "name": "trybe-wallet",
 "version": "0.1.0",
 "private": true,
 "engines": {
		"node": "16"
	},
	"dependencies": {
		"@testing-library/jest-dom": "4.2.4",
		"@testing-library/react": "10.0.4",
		"@testing-library/user-event": "7.2.1",
		"bootstrap": "4.5.2",
		"prop-types": "^15.8.1",
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"react-icons": "3.11.0",
		"react-redux": "7.2.1",
		"react-router-dom": "5.2.0",
		"react-scripts": "3.4.3",
		"redux": "4.0.5",
		"redux-devtools-extension": "^2.13.8",
		"redux-thunk": "2.3.0",
		"stylelint-order": "4.1.0"
	},
	"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",
		"lint": "eslint --no-inline-config --no-error-on-unmatched-pattern -c .eslintrc.json . --ext .js, .jsx"
	}
	}

Passo 3 instalar o github pages no repositorio do seu projeto

Comando

npm install gh-pages --save-dev

Passo 4 use o HashRouter no lugar do BrowserRouter

Exemplo

    <HashRouter>
        <App />
    </HashRouter>

Passo 5 de um commit

Passo 6 de o deploy use o comando

npm run deploy

Passo 7 sempre que quiser atualizar o deploy repita os passos 5 e 6