Search code examples
reactjsnginxdeploymentgithub-pagesproduction

Code is deployed, but page is blank-Deploy a react app which was created using create react app on nginx and github pages

I tried to deploy my react app which was created using create react app to,

1.nginx 2.github pages

In both instances, only the react app logo and the title is visible in the tab but nothing appears in the body of the page. (The page is blank even though the code is deployed)

Does anyone know why this happens?

Solution

  • This is caused if you have used the Browser Router in your react project.

    Both GitHub Pages and nginx serve your app from a non-root folder (i.e. username.github.io/repo-name/) as opposed to from a root folder (i.e. username.github.io/). React Router does not consider your app's URL as a match for any of the routes defined in your app.

    For example, if you define a route using <Route exact path="/" component={SomeComponent} />, React Router will see that / and /repo-name/ do not match exactly and will, thus, not render the component.

    To overcome this error use base name prop in the BrowserRouter and name it according to the non-root folder name.

    example:- if your app is served inside a folder named "folder1" in your server, do as follows.

    Hope my answer helps someone struggling with the same issue.cheers! @iii @R2B