The ulti-mate-page from beamanator

ulti-mate-page's Introduction

See create-react-app page for basic `README.md` file.

Set a "homepage" property in your package.json file, and set it to "https://[your-user-name].github.io/[your-repo-name]".
Add a few extra "scripts":
- "predeploy": "npm run build" - specifies the command to build before deployment. This just runs the "build" script.
- "deploy": "gh-pages -d build" - specifies which branch and directory to deploy.
Install the gh-pages package with npm install --save-dev gh-pages
To get your app onto github pages, just run npm run deploy, and then your app should be running on the link you just set in homepage above.

Not easy to use BrowserRouter with gh-pages - until this point, haven't found a need for it, so just use HashRouter.
If page doesn't update quickly, you can almost instantly update it by going to ...page/index, hard refreshing the page (Ctrl + Shift + R), then going back to the root route '/' and hard refreshing that url.
- Example: if your root route is https://<github username>.github.io/my-repo, first go to https://<github username>.github.io/my-repo/index, do a hard refresh (at this point your app should be working), then go back to https://<github username>.github.io/my-repo and do another hard refresh - your app should be working - at least, this works for me.
Jss (Css in javascript) doesn't easily do content: ' ' when adding the :before / :after pseudoclasses - remember you have to do content: '" "' to actually keep the double-quotes in the string.

Blog on codeburst.io - very useful intro steps and explanations, but didn't explain the BrowserRouter / hard refresh issues I ran into.
Blog on itnext.io - has some interesting commentary about getting BrowserRouter to work, but I haven't tried it yet.
react-github-pages - some boiler plate code for getting a react app set up in Github Pages
sample-react-github-pages - sample react app set up with github pages (including video link with some extra explanation)

ulti-mate-page's People

Idea = anywhere text should be displayed (example: <h4>Name / Location</h4>), change the text with:

<h4>{textPiece.<name>.<lang>}</h4>

Where:

textPiece is a dictionary of strings
<name> is a string key name (like ADD_PICKUP_TABLE_GROUP_TITLE_NAME_LOCATION)
<lang> is the language needed, probably stored in global settings / redux (English / Arabic would be first 2 languages)

Recommend Projects