Abhishek Singhal's Blog

To upload react app on git hub with the link:

Abhishek Singhal's photo
Abhishek Singhal
·

2 min read

Step 1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page not found</title>
<script type="text/javascript">
var pathSegmentsToKeep = 1;

var l = window.location;
l.replace(
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~'): '') +
l.hash
);

</script>
</head>
<body>
</body>
</html>

Step 2:

<!-- github -->
<script type="text/javascript">
(function (l) {
if (l.search[1] === "/") {
var decoded = l.search
.slice(1)
.split("&")
.map(function (s) {
return s.replace(/~and~/g, "&");
})
.join("?");
window.history.replaceState(
null,
null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
})(window.location);
</script>

Step 3:

ReactDOM.render(
<Router basename="/PATH_OF_GITHUB" >
  <App />
</Router>,
document.getElementById("root")
);

Step 4:

"homepage": "https://abhimrt.github.io/GITHUB_REPO_NAME/",

Step 5:

npm install --save gh-pages

Step 6:

"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

Step 7:

Step 8

npm run deploy

BONUS:

<img src={require("../images/img-1.png")} alt="" />

Reactreact-router-dom404 pagereact deploy