score:28
after trying many different things through trial/error, the solution is quite simple:
serve the /client/build folder in the static call, like so:
app.use(express.static(path.join(__dirname, '../client/build')));
score:0
//on your react app run
npm run build
//the insert the following code on your server
const path = require("path");
app.use(express.static(path.join(__dirname,"nameofyourreactapp","build")))
//replace nameofyourreactapp with the name of your app
score:0
my project structure
project
-->client
back end(express)\
after using npn run build i found out that index.html in build was using wrong directory of css files or static instead of using
const path = require('path');
app.use(express.static(path.join(__dirname, '/client/build/')));
i know i also tried ../client...... but not working
so what i did is cut and paste static folder of build in root directory this image can give you the idea, and its working structure
score:2
i had the same problem for a while and i would say that the solution that works is divided into 2 parts to avoid problems with the routers
- server the static from the cra build (in your case the client/build)
const buildpath = path.normalize(path.join(__dirname, '../client/build'));
app.use(express.static(buildpath));
- set a final route (after all other routers in your server) to use the following:
const rootrouter = express.router();
/*
* all your other routes go here
*/
rootrouter.get('(/*)?', async (req, res, next) => {
res.sendfile(path.join(buildpath, 'index.html'));
});
app.use(rootrouter);
Source: stackoverflow.com
Related Query
- How to serve ReactJS static files with expressJS?
- Is it possible to serve Static files with create-react-app from public folder?
- How to serve static generated pages via CDN with Next.js
- node express Server does not serve compressed static files with brotli and gzip compression
- How to integrate ReactJS with expressJS
- How to serve the same static files regardless of the route?
- Not Sure How to Start and Deploy ReactJS App on Production Server with ExpressJS
- How can i set my html files with css in reactjs
- Switch from parcel v1 -> CRA, how to serve static web file with reload during development
- How to serve static Image path in img tag with webpack in React JS application
- How to get static files served dynamically with Rollup (and work along with node-resolve)?
- Serve static files with Koa2
- How should I set my WebSecurityConfig antMatcher to permit all frontend Router URL if I want to serve static React build files through Spring Boot
- How do I serve static assets (html) to a node server running with nginx?
- Conditionally serve React static files with Node (express.static)
- Problem serving static files with Node.js, sometimes files is found, sometimes not, how to solve it?
- Reverse proxy to serve local reactjs application on a static url with virtualmin
- serve static files on nginx: how should I know it works?
- How to load image files with webpack file-loader
- How to use JQuery with ReactJS
- How to use different .env files with nextjs?
- How to avoid 'children with same key' when replacing state in ReactJs component
- Webpack: How to compile, write on disk and serve static content (js/css) using webpack-dev-server
- Serve another(standalone) page or static file in website built with react
- How to make react router work with static assets, html5 mode, history API and nested routes?
- How to build a responsive website with ReactJs
- How to make Puppeteer work with a ReactJS application on the client-side
- How to use data toggle collapse in Reactjs with Bootstrap?
- How to update ReactJS component based on URL / path with React-Router
- How can I serve robots.txt on an SPA using React with Firebase hosting?
More Query from same tag
- React state not updating in app but I can console.log correct updated state
- The component isn't updating when I pass in a filtered variable on a timer
- props is not defined when using MapStateToProps
- Building a function dynamically?
- TypeError: _mappings__WEBPACK_IMPORTED_MODULE_1__.a[iconName] is not a function
- React component doesn't refresh
- Getting type of HTML element's attributes
- Unable to access properties of object stored in a React state
- Code splitting/react-loadable issue
- How does one store "pointers" to nested nodes in an immutable tree in React/Javascript?
- How to query relational data with GraphQL, Firebase and Gatsby
- Set default value in DatePicker Antd with React-Hook-Form V7
- Toggling a recursive fetch request based on React state using `useEffect`
- Changing the name of a service worker?
- React.js, why my class component doesn't rerender the element, but functional component can work?
- error in react.js when clicking npm start
- Adding an image - ReactJS
- How to conditionally apply styles in a react component with CSS Modules?
- React-Warning-Keys with no List or .map
- Is it possible to upload multiple files, get their ids and then bind those ids to the parent resource with ImageInput?
- npm postinstall runs only when not installing anything
- React - how to set inline CSS for each element of map function?
- Module not found: Can't resolve 'react-bootstrap/Offcanvas'
- React Formik : How to useEffect with formik values?
- Form is clearing blank inputs prev set data
- material ui - makeStyles doesn't create style properly
- ReactJS: How to update a component from another
- How to use async await in React component
- How to modify CSS using JavaScript in React.js
- DataSearch and RR Redirect