Publicar o projeto usando github.io

Olá

Você está usando o browserHistory?

Se sim, não vai funcionar com as páginas estáticas do Github.

O browserHistory requer um servidor backend que redirecione para o index.html nas primeiras requisições, recurso que você não possui usando as páginas estáticas do Github.

A solução seria:

1. trocar para o hashHistory
2. ou colocar em um servidor com backend, por exemplo no Heroku com ExpressJS

Hmmm estou usando o browserHistory sim!

Vou tentar esses dois approaches que vc sugeriu e te aviso!

Muito obrigada!

Joselia,

Tava olhando aqui e o problema é de links relativos/absolutos. Como a URL da sua pagina final é https://joselialcosta.github.io/curso-react-alura/ os seus assets precisam estar relativos a esse path /curso-react-alura/. Mas eles estão absolutos, com / na frente.

Exemplo: <link href="/static/css/main.02a51ad2.css" rel="stylesheet">

Precisa mudar pra ficar relativo ai ele acha: <link href="static/css/main.02a51ad2.css" rel="stylesheet">

Isso pra tudo: JS, CSS etc

Então, mudei os caminhos, como o Sergio sugeriu mas não deu certo... Ele agora até acha os scripts, mas não carrega nada na página.

Tentei então fazer o deploy no heroku, encontrei inclusive outra dúvida disso aqui no fórum. Segui esse tutorial https://blog.heroku.com/deploying-react-with-zero-configuration , mas confesso que não tive muito sucesso. Consegui subir um deploy fazendo tudo do zero, mas a minha aplicação completa não subiu.

Esse é o link do deploy feito seguindo o tutorial: http://my-first-deploy-hero.herokuapp.com/

:(

Opa, eu nunca fiz o deploy usando o github.io, vou tentar e posto aqui o resultado.

Beleza! Fico no aguardo!

Olá Josélia,

No seu README existe uma explicação do porquê usar o hashHistory (feito pelo pessoal do create-react-app)

https://github.com/joselialcosta/curso-react-alura#github-pages

Sobre o Heroku

Eu dei fork no seu projeto e roda normal https://blooming-badlands-42714.herokuapp.com/

Depois de clonar seu repo local rodei os seguintes comandos:

$ cd <projeto>
$ heroku create -b https://github.com/mars/create-react-app-buildpack.git
$ git push heroku master
$ heroku open

Encontrei um problema até agora:

 $.ajax({
      url:'http://localhost:8080/api/autores',
      //url: 'https://cdc-react.herokuapp.com/api/autores',

A url está para localhost:8080 o que não é verdade mais.

Sugiro mudar para /api/autores se você tiver implementado a API ou para o fornecido pelo curso (cdc-react.herokuapp.com)

Obrigada, Lucas! Quanto ao github pages, eu consegui fazer o deploy de uma maneira mais fácil do que eu imaginava!!

Vou postar aqui para o caso de alguém precisar solucionar isso num futuro, rs:

Run npm run build

Add to package.json :

"homepage": "http://myname.github.io/myapp",

Run again

npm run build

Run

 npm install --save-dev gh-pages

Adicione o script abaixo no package.json

    // ...
    "scripts": {
      // ...
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    }

E finalmente rode

npm run build

Com isso, tem que rodar. Eu tentei no meu repo mas a página ainda abre em branco, nao tenho bem certeza se é o timing do github pra publicar ou se eu ainda tenho algo errado no meu ambiente... Mas de qualquer forma rodei um outro app em React tbm e foi de boas!

Alberto, se vc tiver conseguido uma solução diferente dessa, por favor me avise!

Eu sei que tudo isso ta escrito no terminal quando vc começa a rodar o npm run build pela primeira vez, mas vai que ajuda algum perdido como eu, rsrsrs

Obrigada a todos pela força!

Só para testar um recurso.... tente acessar o /autor e dar refresh na pagina

@lucas, vc diz no repo do heroku que vc subiu? testei aqui e ele acessa, mas no refresh retorna um 404 Not Found + nginx :/

Isso esse eh o problema de não possuir server backend configurado para browserHistory...

O mesmo deve ocorrer no Github

É então, eu entendi isso, porém não entendi como de fato implementar o hashHistory a partir do código que eu já tenho.

vc nao precisa implementar... eh soh substituir o import de browserHistopry para hashHIstory...

Assim o react-router vai se comportar de forma diferente... colocar o hash #... ai o browser nao ve como link requisitando uma url nova no refresh...

Ai, percebi =x Desculpa a atrapalhação, é que eu tava tentando fazer isso em 2 projetos diferentes ao mesmo tempo e como foi meu primeiro contato com react, são muitas dúvidas!

Depois de trocar pra hashHistory funcionou tudo normal!! Obrigada por me ensinar 2 coisas! heroku e esse esquema do github pages!!!

Hasta!

Tranquilo...