Deployed Build Reactjs Project shows white screen

Question

I have a react project, it's working perfectly fine in a local server but when I try to upload it in a production server it shows white/blank screen without having any errors in the console.

What I did was run 'npm run build', then upload the files compiled on the build project on my production instance. I also modified the package.json and put "homepage":"http://50.31.112.112/new_vehicle_management"

What's wrong with what I did?

This is the code for Route

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import {Login} from './components/Login';
import {Menu} from './components/Menu';
import {NewProcess} from './components/NewProcess';
import {ContinueProcess} from './components/ContinueProcess';
import {SearchProcess} from './components/SearchProcess';
import {CreateProcess} from './components/CreateProcess';
import {ProcessActivity} from './components/ProcessActivity';
import {ProcessContinueActivity} from 
'./components/ProcessContinueActivity';
import {ProceedProcess} from './components/ProceedProcess';

function App() {
  return (
    <div className="App">
      <Router>
        <Route path="/login" component={Login}/>
        <Route path="/menu" component={Menu}/>
        <Route path="/newprocess" component={NewProcess}/>
        <Route path="/continueprocess" component={ContinueProcess}/>
        <Route path="/searchprocess" component={SearchProcess}/>
        <Route path="/createprocess" component={CreateProcess}/>
        <Route path="/processactivity" component={ProcessActivity}/>
        <Route path="/processcontinueactivity" component= 
         {ProcessContinueActivity}/>
        <Route path="/proceedprocess" component={ProceedProcess}/>
       </Router>
     </div>
   );
 }



export default App;

I tried "homepage":"/new_vehicle_management" it still shows white screen. I used CRA. — beshacat, Nov 04 '19 at 00:45
I see your html has 2 `
` elements, may not be the cause but I think you'd want to fix that. Can you add your router code to your post? — glneto, Nov 04 '19 at 00:47
I've removed the duplicate
. And also added the code for route in the post. — beshacat, Nov 04 '19 at 01:00

glneto · Accepted Answer · 2019-11-04T00:57:56.627

4

You may need to add basename="/new_vehicle_management" to your router.

<Router basename="/new_vehicle_management" />

When you run in localhost, your routes are in the server root (i.e.: localhost/login) but since you hosted the website in a deeper level you need to specify the basename, otherwise the pathname will never match any route.

Also don't forget to set something in path /, otherwise your website will render nothing when the user visits it.

<Route path="/" component={YourLandingPageComponent}/>

Edit.: basename works in react-router v4, otherwise you may need to set the basename in each route.

See https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string for more details.

edited Nov 04 '19 at 00:57

answered Nov 04 '19 at 00:51

glneto

527
3
10

I'll try this one. Thanks! – beshacat Nov 04 '19 at 01:00
Oh and don't forget to remove your homepage parameter from package.json. It's not very recommended since it can mess up your file imports. In your case you just need it for routing, so I suggest you use only the basename property. – glneto Nov 04 '19 at 01:04
Thank you so much for this, I am now able to view the screen. :) – beshacat Nov 04 '19 at 02:02

Deployed Build Reactjs Project shows white screen

1 Answers1