CODEWITHSUNDEEP
reactjs
beshacat
beshacat

Reputation: 45

Deployed Build Reactjs Project shows white screen

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;

Upvotes: 1

Views: 4342

Answers (1)

glneto
glneto

Reputation: 527

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.

Upvotes: 4

Related Questions