CODEWITHSUNDEEP
javascriptreactjsapache
Abdul Moiz
Abdul Moiz

Reputation: 317

Why is that when i run my react build on Apache...Just blank page appears..?

app is working fine in node server but i am getting blank page in Apache server even though i used absolute path.

Here is the index.html code

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link rel="manifest" href="/manifest.json">
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>React App</title>
  <link href="./static/css/main.0778317d.css" rel="stylesheet">
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script type="text/javascript" src="./static/js/main.1b4d826e.js"></script>
</body>

Here are the screen shots.. enter image description here

enter image description here

Upvotes: 3

Views: 3270

Answers (3)

Sujay U N
Sujay U N

Reputation: 5340

If the website is hosted on http://namweb.com/NamFdr
Add the Folder name "NamFdr" in the below config :

|+> Add in package.json

"homepage": "/NamFdr",

|+> Add Router basename config in index.js

ReactDOM.render(
    <BrowserRouter basename='/blocal'>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
)

[Or] Add Router basename config in app.js

import { BrowserRouter, Route, Switch } from 'react-router-dom';

-------------------------

<BrowserRouter basename="/NamFdr/">
    <Switch>
        <Route exact path="/" component={App} />


    </Switch>
</BrowserRouter>

Upvotes: 0

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

I was not able to get my app using React Router v4 to work on Apache hosting, even after trying the steps mentioned by @Abdul Moiz.

I found this answer : https://stackoverflow.com/a/50657757/7867822

Basically changing <BrowserRouter/> to <HashRouter/> worked for me.

Upvotes: 2

Abdul Moiz
Abdul Moiz

Reputation: 317

I am using the react router 4. so when i used Router it create problems and not working with absolute paths. instead of Router using BrowserRouter and used basename for folder shop where i copied the build of my project.

import { BrowserRouter, Route, Switch } from 'react-router-dom';

<BrowserRouter history={history} basename="/shop/">
      <div>
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="/cart" component={Cart} />
          <PublicRoute path="/login" component={LoginPage} />
          <PrivateRoute path="/dashboard" component={DashBoardPage} />
          <PrivateRoute path="/checkout" component={checkOut} />
          <PrivateRoute path="/favourite" component={favourite} />
          <PrivateRoute
            path="/payment_Information"
            component={PaymentInformation}
          />
          <Route path="/product_details/:pid" component={ProductDeatils} />
          <Route path="*" compononent="NotFound" />
        </Switch>
      </div>
    </BrowserRouter>

and in package.json file "homepage": "/shop" to create paths.

Upvotes: 4

Related Questions