404 Error when deploying React App on custom domain

Question

It seems like I followed all the necessary in the documentation but it keeps giving a 404 Error: "There isn't a GitHub pages here" when I go into https://juliesong.me. I got my custom domain through GoDaddy and configured the DNS like so:

Then I changed my package.json file to have

"homepage": "https://www.juliesong.me",

Added a CNAME file in the root directory containing www.juliesong.me

And lastly went into settings in GitHub pages:

I searched my issue up and a lot of people said it might have to do with the React Router, so I edited to include a basename:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter as Router } from "react-router-dom";
import * as serviceWorker from './serviceWorker';

const routing = (
  <Router basename={process.env.PUBLIC_URL}>
    <App />
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

This is my App.js:

import React, { Component } from 'react';
import {Route} from 'react-router-dom';
import { withRouter } from 'react-router'
import { GlobalStyles, } from "./util/GlobalStyles";

import Home from './containers/Home'


class App extends Component {

  render() {
    const home = () => <Home />

    return (
      <main>
        <GlobalStyles />
          <React.Fragment>
              <Route exact path="/" component={home} />
          </React.Fragment>
      </main>
    );
  }
}

export default withRouter(App);

If anyone could help on this issue, that would be great:)

@ksav could you elaborate on this? I'm not sure exactly what you mean on this. — jiyoon
– jiyoon, Commented May 17, 2020 at 6:15
I guess your project is missing an index.html but even if you had one; github.io is a static file server so if you use routes like yoursite/my/info then it will give a 404 because there is no such file called my/info/index. What needs to go to github.io is not the react project itself but the result of a build of that project. — HMR
– HMR, Commented May 17, 2020 at 7:24

Muhammad Abdul Rauf · Accepted Answer · 2021-12-17 07:28:44Z

2

Try this one add new file named .htaccess in your build folder example of file and add this code into your .htaccess file the code

answered Dec 17, 2021 at 7:28

Muhammad Abdul Rauf

235 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Ajamal Khan · Accepted Answer · 2021-03-18 17:50:24Z

Unless you share how you are generating the build and pushing it to GitHub Pages, it is very difficult to identify the cause of this issue.

Still let me share a general way you would deploy a react app in GitHub pages.

You don't need to add basename in your router
Good thing is you are using HashRouter instead of BrowserRouter, because GitHub pages doesn't support history api like normal browser, it will look for a specific file in given path
To deploy your app you need to run the following command in same order -

npm run build # this will generate a build folder

gh-pages -d build # this will publish the build folder to GitHub pages

This is very important that you publish the build folder, because its contains the index.html file, which GitHub will point.

You can read more about deploying react app to GitHub Pages here

A Ralkov · Accepted Answer · 2021-03-14 05:41:42Z

0

React-app out of the box is client-server application, and you should compile it first to html + client side js before deploying.

There are lots of good docs: create-react-app.dev, medium.com and the shortest way here

answered Mar 14, 2021 at 5:41

A Ralkov

1,04410 silver badges20 bronze badges

Collectives™ on Stack Overflow

404 Error when deploying React App on custom domain

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related