Search code examples
javascriptreactjsreact-routerbrowser-historyredux-saga

Create-React-App shows blank page on WHM/cPanel server

I am trying to deploy a React app into production and it seems I'm running into a problem I can't fix with any of the online answers I researched through so far.

I've created an app with a simple login/register system and used redux+saga to do so.

After I run:

npm run-script build

I get a message such as that the build folder is ready to be deployed (all good so far). After I upload my files to the 'public_html' folder in cPanel, I get a blank page with React App as title and favicon loaded.

What I have tried so far to fix this:

  1. set homepage as '.' in package.json (no luck, checking the network tab shows that all files load with a 200 status, OK)
  2. update to the latest version of my dependencies
  3. installed node and tried to 'serve' the build (I really did not understood this part)

Also, I have an error in the console (probably totally unrelated to the web app not showing anything since I have redux dev tools in the config):

console log error:

enter image description here

I am pretty desperate to find a solution to this. Thank you for your contribution and time.

store.js:

import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router'
import createSagaMiddleware from 'redux-saga';

import rootReducer from './index';
import rootSaga from './sagas';

const defaultState = {};

export const history = createBrowserHistory()

const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  rootReducer(history),
  defaultState,
  compose(
    applyMiddleware(
      routerMiddleware(history),
      sagaMiddleware
    ),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

sagaMiddleware.run(rootSaga);

export default store;
Solution

  • The Problem is with the compose function. For development, it will work but for production mode, you need to remove devtools.

    Try the different compose method for development and production. Example code snippet given below.

    const devTools = process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() : null

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk), devTools)
)

    You may also try the library 'redux-devtools-extension' to compose.