CommerceJS not working on githubpages deployment

Patrick Mahloy 0
Viewed 16
commerce github-pages deployment reactjs
1 Answers

GitHub Pages does not support browser history like your browser does. In your case, the route https://ploymahloy.github.io/ecommerce-material-ui/ doesn't help GitHub Pages understand where to point the user (since it is a frontend route).

Solution 1

You need to use a Hash Router instead of a Browser Router in your application. This type of router uses the hash portion of the URL to keep the UI in sync with the URL.

// index.js

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Solution 2

You can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html.

You can read more about both approaches here: https://create-react-app.dev/docs/deployment/#github-pages

g0rb0
Related