score:2
Accepted answer
having looked at your repo for server.js you are sending all your traffic that hits your server (even your own api requests) to your front end.
first make sure your server-side routes start with something distinguishable such as
app.get('/api/*',(req,res)=>/*somecode*/)
this is because your server will confuse something like '/login' if it is also a route in your front end and will only end up serveing one or the other depending on when they are defined.
then update your server.js to match this and it should work:
//api requests handled first
require('./routes')(app);
//non api requests in production
if (process.env.node_env === 'production') {
app.use([someproductionmiddleware()])
// express will serve up production assets i.e. main.js
app.use(express.static('client/build'));
// if express doesn't recognize route serve index.html
const path = require('path');
app.get('*', (req, res) => {
res.sendfile(
path.resolve(__dirname, 'client', 'build', 'index.html')
);
});
}
Source: stackoverflow.com
Related Query
- Routing with an Express API and a ReactJS SPA
- How to create contact form with ReactJS and send the values with API - Express
- all routes returning 'get' error on production when page is refreshed - nodejs, express api with webpack and reactjs client
- Post an object with fetch using react js and express API server
- Making CORS API requests with create-react-app and webpack - no express
- Vimeo API with ReactJS and Plyr
- React and Express iTunes Search API :: Error: Request failed with status code 404
- ReactJS: Express API and ReactJS Structure Limit ShowData per Row
- Delete data from API with Axios and ReactJS
- How can I create a button which Fetches image from API and download to the local with using ReactJs
- How to fix Reactjs admin and frontend routing with react-router-dom v6 BrowserRouter insted of Switch
- How to contact twitter api with client authentication using express as proxy and xhr as client
- Do i really need to use forceUpdate with fetch API and ReactJS
- Why isn't Node.js Express with MongoDB responding to fetch API calls (ReactJS and Redux)?
- How to get a variable from Frontend to the Backend using get API in reactjs with Express API
- React app served with express and helmet cannot make API requests
- Call API and redirect to next page with same click ReactJS
- Where to save uploaded images in "asp.net core web api with react" spa template and serve images to client?
- ReactJS and Express with Axios returning 404 Error message
- CORS error with NodeJS Express and ReactJS
- Posting to .NET Core WebAPI with ReactJS frontend and fetch api
- API Fetch with reactjs and show into graph
- ReactJS and socket.io with express session - socket not using the right session and creating many others
- Can't log in with Laravel and ReactJS using custom REST API
- Use external REST API with ReactJS and NodeJS
- Not sure what to put in callback function for routing with express and react front end
- NGINX net::ERR_CONNECTION_REFUSED with PM2 ReactJS Frontend and Express Backend in an AWS
- Pass data from API to another component with TypeScript and ReactJS
- How to make API requests correctly with Reactjs and Axios?
- ReactJS Bootstrap Navbar and Routing not working together
More Query from same tag
- Using immutability-helper in React to set a value of a (maybe nested) object
- Anyone know why my Component Keeps Remounting?
- Accessing state of array of children from parent
- React inline style doesn't affect my custom component
- Customize material UI Switch when checked and disabled
- How to pause setInterval for the image elements inside a React Carousel Component?
- How to load JWT token on to React during initial download after authentication from Multi Page Application?
- Duplicate image shown - useEffect issue?
- How to send info from a reusable input to the other components in React
- React + Typescript + Dynamic import HOC typings
- npm install succeeds but npm run start fails to find both rimraf and react-scripts despite them being installed
- Redux-way in the real life
- how to make Navigation or top search bar like Myntra
- ReactJS nav items, not wrapping in toolbar component
- React simple Higher Order Component
- Can't use Material UI in external library with webpack/rollup/react
- Importing stateless functional components with styles in Reactjs
- Html's "align" attribute is not supported in ReactJS
- Module build failed: ReferenceError: [BABEL]
- checkbox onclick changing only after refreshing react js
- right way to POST data to a server and handle response with redux
- Internationalizaton of next.js website through subpath not working on sub-directories?
- Javascript/react - highlight matching parenthesis
- Material UI Autocomplete: Unable to populate nested array data as seperate label options
- useEffect doesn't run after rendering
- How to add react reference to HTMLCollection items?
- How to group messages in a chat instead of having each new message in a new section?
- Rendering one component into another
- How to make for loop on react-select?
- Clear Formik field with initial value React