Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rockchalkwushock/cra-gh-pages-deployment
Example for using browserHistory when deploying a create-react-app to gh-pages.
https://github.com/rockchalkwushock/cra-gh-pages-deployment
browserhistory create-react-app gh-pages react-router
Last synced: 18 days ago
JSON representation
Example for using browserHistory when deploying a create-react-app to gh-pages.
- Host: GitHub
- URL: https://github.com/rockchalkwushock/cra-gh-pages-deployment
- Owner: rockchalkwushock
- Created: 2017-03-14T06:20:19.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-14T16:28:45.000Z (almost 8 years ago)
- Last Synced: 2024-11-05T20:10:37.962Z (2 months ago)
- Topics: browserhistory, create-react-app, gh-pages, react-router
- Language: HTML
- Homepage: https://rockchalkwushock.github.io/CRA-gh-pages-deployment/
- Size: 2.17 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Using `browserHistory` with Gh-Page deployments for `create-react-app`
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
**Live Demo**: https://rockchalkwushock.github.io/CRA-gh-pages-deployment/
## Disclaimer
You should read the section on [client-side-routing](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#notes-on-client-side-routing) in the `create-react-app` documentation for understanding why Github Pages does not play well with client-side-routing.
- This demo is using `[email protected]`.
## SPA-Github-Pages
As noted in the `create-react-app` docs if not choosing to use `hashHistory` one needs to follow the documentation in this [repository](https://github.com/rafrex/spa-github-pages) for using the `browserHistory` method.
## The Problem:
The SPA-Github-Pages fix is a very clever way to handle the issue with client-side routing; however, it fails to handle this case:
> _The root path of the client-side-routing does not match the url passed as `"homepage":` in the `package.json`._
_Routes.js_
```javascript
import { browserHistory, Route, Router } from 'react-router';
import App from './App';
import { Page404 } from './pages';
// "homepage": "https://.github.io//",
export default () => (
)
```
The current configuration has the _root path_ as `/` which will match `'https:/.github.io/'`. In this instance the view seen on traveling to the GitHub Pages link will be the `Page404` because the router reads `//` as an undefined route. On traveling to `'https:/.github.io/'` the Github 404 will be seen because it is not hosting `//` anymore.
## The Solution:
`create-react-app` has an env var that is exposed called `process.env.PUBLIC_URL`. This env var provides the application with the data provided to the `package.json` as `"homepage":`
> See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/paths.js#L62
> See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/env.js#L29
With this exposed across the whole application we can make the following adjustment:
_Routes.js_
```javascript
```
Now when visiting the Github Pages link you will be directed to the root path's view.
### Routing Tree for `` vs Browser
All subsequent _routes_ on the router will replace `//`:
| Router | Browser |
|---------|-----------------------------------------------|
| `'/'` | `'https://username.github.io/project-name/'` |
| `'/one'` | `'https://username.github.io/one'` |
| `'/two'` | `'https://username.github.io/two'` |
| `'*'` | `'https://username.github.io/project-name/*'` |
GitHub 404's will be reached if traveling to:
- 'https://username.github.io/'
- 'https://username.github.io/onex'
- 'https://username.github.io/one/x'
> _**Please Note that any navigation back to the root path outside of the `` must explicitly be stated in the same manner.**_