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:
- set homepage as '.' in package.json (no luck, checking the network
tab shows that all files load with a 200 status, OK) - update to the latest version of my dependencies
- 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:
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;
javascript reactjs react-router browser-history redux-saga
edited Nov 15 '18 at 12:31
c-chavez
2,35221833
asked Nov 15 '18 at 10:14
Demeterca Ionuţ-AlexandruDemeterca Ionuţ-Alexandru
137
add a comment |
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:
- set homepage as '.' in package.json (no luck, checking the network
tab shows that all files load with a 200 status, OK) - update to the latest version of my dependencies
- 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:
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;
javascript reactjs react-router browser-history redux-saga
edited Nov 15 '18 at 12:31
c-chavez
2,35221833
asked Nov 15 '18 at 10:14
Demeterca Ionuţ-AlexandruDemeterca Ionuţ-Alexandru
137
I think the problem with creating a store using middleware. Can you please post the code for creating store and middleware.
– kumar k
Nov 15 '18 at 10:57
I've added my store.js file (please note that I'm using version 5+ of connected router)
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 11:24
add a comment |
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:
- set homepage as '.' in package.json (no luck, checking the network
tab shows that all files load with a 200 status, OK) - update to the latest version of my dependencies
- 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:
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;
javascript reactjs react-router browser-history redux-saga
edited Nov 15 '18 at 12:31
c-chavez
2,35221833
asked Nov 15 '18 at 10:14
Demeterca Ionuţ-AlexandruDemeterca Ionuţ-Alexandru
137
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:
- set homepage as '.' in package.json (no luck, checking the network
tab shows that all files load with a 200 status, OK) - update to the latest version of my dependencies
- 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:
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;
javascript reactjs react-router browser-history redux-saga
javascript reactjs react-router browser-history redux-saga
edited Nov 15 '18 at 12:31
c-chavez
2,35221833
asked Nov 15 '18 at 10:14
Demeterca Ionuţ-AlexandruDemeterca Ionuţ-Alexandru
137
edited Nov 15 '18 at 12:31
c-chavez
2,35221833
asked Nov 15 '18 at 10:14
Demeterca Ionuţ-AlexandruDemeterca Ionuţ-Alexandru
137
edited Nov 15 '18 at 12:31
c-chavez
2,35221833
edited Nov 15 '18 at 12:31
c-chavez
2,35221833
edited Nov 15 '18 at 12:31
c-chavez
2,35221833
2,35221833
asked Nov 15 '18 at 10:14
Demeterca Ionuţ-AlexandruDemeterca Ionuţ-Alexandru
137
asked Nov 15 '18 at 10:14
Demeterca Ionuţ-AlexandruDemeterca Ionuţ-Alexandru
137
asked Nov 15 '18 at 10:14
Demeterca Ionuţ-AlexandruDemeterca Ionuţ-Alexandru
137
137
I think the problem with creating a store using middleware. Can you please post the code for creating store and middleware.
– kumar k
Nov 15 '18 at 10:57
I've added my store.js file (please note that I'm using version 5+ of connected router)
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 11:24
add a comment |
I think the problem with creating a store using middleware. Can you please post the code for creating store and middleware.
– kumar k
Nov 15 '18 at 10:57
I've added my store.js file (please note that I'm using version 5+ of connected router)
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 11:24
I think the problem with creating a store using middleware. Can you please post the code for creating store and middleware.
– kumar k
Nov 15 '18 at 10:57
I think the problem with creating a store using middleware. Can you please post the code for creating store and middleware.
– kumar k
Nov 15 '18 at 10:57
I've added my store.js file (please note that I'm using version 5+ of connected router)
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 11:24
I've added my store.js file (please note that I'm using version 5+ of connected router)
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 11:24
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 15 '18 at 12:25
kumar kkumar k
34416
Apparently this solves the problem. I haven't tried this even though I've had some doubts about that. Thank you! Note to self: remove developer redux extension code before going into prod or change the environment mode.
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 12:35
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317077%2fcreate-react-app-shows-blank-page-on-whm-cpanel-server%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 15 '18 at 12:25
kumar kkumar k
34416
Apparently this solves the problem. I haven't tried this even though I've had some doubts about that. Thank you! Note to self: remove developer redux extension code before going into prod or change the environment mode.
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 12:35
add a comment |
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.
answered Nov 15 '18 at 12:25
kumar kkumar k
34416
Apparently this solves the problem. I haven't tried this even though I've had some doubts about that. Thank you! Note to self: remove developer redux extension code before going into prod or change the environment mode.
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 12:35
add a comment |
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.
answered Nov 15 '18 at 12:25
kumar kkumar k
34416
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.
answered Nov 15 '18 at 12:25
kumar kkumar k
34416
answered Nov 15 '18 at 12:25
kumar kkumar k
34416
answered Nov 15 '18 at 12:25
kumar kkumar k
34416
answered Nov 15 '18 at 12:25
kumar kkumar k
34416
34416
Apparently this solves the problem. I haven't tried this even though I've had some doubts about that. Thank you! Note to self: remove developer redux extension code before going into prod or change the environment mode.
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 12:35
add a comment |
Apparently this solves the problem. I haven't tried this even though I've had some doubts about that. Thank you! Note to self: remove developer redux extension code before going into prod or change the environment mode.
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 12:35
Apparently this solves the problem. I haven't tried this even though I've had some doubts about that. Thank you! Note to self: remove developer redux extension code before going into prod or change the environment mode.
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 12:35
Apparently this solves the problem. I haven't tried this even though I've had some doubts about that. Thank you! Note to self: remove developer redux extension code before going into prod or change the environment mode.
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 12:35
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317077%2fcreate-react-app-shows-blank-page-on-whm-cpanel-server%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think the problem with creating a store using middleware. Can you please post the code for creating store and middleware.
– kumar k
Nov 15 '18 at 10:57
I've added my store.js file (please note that I'm using version 5+ of connected router)
– Demeterca Ionuţ-Alexandru
Nov 15 '18 at 11:24