score:2
your react code is not showing up because index.html
is not including it. is public/bundle.js
your transpiled react code? if so, add the following line to index.html
, right after <div id="root"></div>
:
<script src="/public/bundle.js"></script>
if not, then change the path pointed by src to the correct one.
you can see your css styles just fine because you are already including those in index.html
.
update: a couple of points based on your webpack config:
change the port in which you are running webpack-dev-server to 3000. you will also have to change
browsersyncplugin
's proxy tohttp://localhost:3000/
. you can then go tolocalhost:3312
in your browser and requests will be proxied to the webpack-dev-server running on port 3000.correct me if i'm wrong, but you have not posted your
index.html
in its entirety. i'm guessing you already have a line that looks like<script src="/bundle.js"></script>
somewhere in that.html
file -- based on your latest comment, it seems it is being added byhtmlwebpackplugin
. webpack-dev-server is servingbundle.js
through/
, thepublicpath
you've specified in webpack'soutput
option. this works just fine as long as you access your site throughlocalhost:3312
orlocalhost:3000
. however, your express.js server running on port 5000 has no idea webpack-dev-server is servingbundle.js
at/
; as a result of that, you end up seeing none of your react code when you go tolocalhost:5000
. as for the styles, you are already serving them correctly through/public/assets/css
, which the express.js server understands because you've specified that in this line:app.use("/public", express.static(__dirname + "/../public"))
. the solution is to change the line<script src="/bundle.js"></script>
in your.html
file to:<script src="http://localhost:3312/bundle.js"></script>
also, in webpack's output option, change the
publicpath
tohttp://localhost:3312/
. now, as long as you have webpack-dev-server running (withbrowsersyncplugin
), you can access your site atlocalhost:5000
and yourbundle.js
file should be served just fine.
try the following:
webpack config
module.exports = {
devserver: {
contentbase: path.join(__dirname, "/public"),
historyapifallback: true,
port: 3000,
proxy: {
"/api": "http://localhost:5000"
}
},
entry: ["babel-polyfill", __dirname + "/src/index.js"],
output: {
path: path.join(__dirname, "/public"),
filename: "bundle.js",
publicpath: "http://localhost:3312/"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
new browsersyncplugin({
host: "localhost",
port: 3312,
files: [
"./public/*.html",
"./public/assets/scss/*.scss",
"./public/assets/variables/*.scss",
"./public/assets/mixins/*.scss",
"./public/assets/reset/*.scss"
],
proxy: "http://localhost:3000/"
})
]
};
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link
href="/assets/css/styles.css"
rel="stylesheet"
type="text/css"
/>
<title>site</title>
</head>
<body>
<div id="root"></div>
<script src="http://localhost:3312/bundle.js"></script>
</body>
</html>
score:1
oh sorry, it looks like the problem is in index.js. change {routes}
to <routes />
import react, { component } from "react";
import reactdom from "react-dom";
import { browserrouter as router, route, link } from "react-router-dom";
import routes from "./routes";
reactdom.render(<div><routes/></div>, document.getelementbyid("root"));
you have another problem in routes.js. export a component like
import react from "react";
import { browserrouter as router, route, switch } from "react-router-dom";
import homepage from "./components/homepage";
import aboutpage from "./components/aboutpage";
import contactpage from "./components/contactpage";
// make this a component
export default ()=>(
<router>
<switch>
<route exact path="/" component={landingpage} />
<route exact path="/about" component={aboutpage} />
<route exact path="/contact" component={contactpage} />
</switch>
</router>
);
Source: stackoverflow.com
Related Query
- Express Static files on server not loading correctly but React Front end is loading correctly?
- Express not serving static files correctly for react build
- Tryning to secure a front End react page with keycloak server but i have this error 'keycloak.init(...).then is not a function'
- Express server serves my static files but does not handle requests to my API. What is happening?
- React Js front end and Express backend - can't load static files properly
- Netlify / React front end not connecting to Node.js / Express / MongoDB Atlas / Heroku backend but works in development/locally
- Errors show correctly on Graphiql but not returned to Apollo Client in react front end
- node express Server does not serve compressed static files with brotli and gzip compression
- django+nginx deployment not loading static files correctly
- ASP.NET Core 3.1 Serving static files for react application: index.html and icons found, but js files not
- Fetch API work on POSTMAN and express server but does not work on React js
- Express server with React front end routing without server side rendering
- Express session not persisting between api calls from react front end
- props working in console, but not rendering on front end - React
- Allowing CORS from React front end not allowing Express back end to use Bing API
- Not sure what to put in callback function for routing with express and react front end
- Laravel Echo Server not working properly with React Front End and Laravel Back End
- Saved data values not saving correctly on react front end
- Why my react front end does not want to download my file sent from my express back end?
- Not loading React files when serving with Express
- how to share environment variables between react app and express js server hosting it as static site
- react-i18next not loading json translation files in React app created with create-react-app
- Dropdown with react-bootstrap works in build static file but not when served with web server
- React js Router changes url but not loading page
- Flask session is not able to create cookies (using set-cookie response headers) on react front end application
- Favicon not displaying in most browsers and shows odd src path. React + Express Server
- Data from my react front end not getting to mysql database
- React router changes url but not loading view
- React Router not working correctly on production with express backend
- Zip File Download via Axios from Express Server not working in React App
More Query from same tag
- Use of curly braces in React
- Module not found: Can't resolve 'fs' in Next.js application
- Why can't I use nested yield in for..in loop in Redux-Saga
- Can (and should) I use Lerna without publishing to NPM?
- React-Bootstrap Modals cause problems for window EventListener
- How to validate date inputs?
- React outer div assigned wrong id
- How to test a redux-thunk action that contains multiple API requests and array transformations?
- How to use material-ui-pickers's date picker with ReactJS's State Hook and pass date to the parent component?
- Handling errors in useEffect when fetching data from an API
- Next JS Use query parameter as variable in rewrite
- React: Having some trouble passing multiple pieces of state.
- ReactJS how to delete item from list
- How to compare nested array with the map or filter and only return with first match inside?
- Multiple versions of react (react-dom uses old react dependency)
- React autoplay <video /> (mp4) only when visible
- Why the useEffect hook does not work with state variable in context?
- How can I add an icon to Material UI Select options?
- Get specific post from CloudFirestore with React JS
- Conditional Rendering based on async function
- update of a buttons style on call of useState. how to convert variable of an object to string?
- Add nested property in Redux reducer
- TinyMCE input being written in reverse order
- Call a function on a react child functional component from parent
- What is the logic behind the arrow function behaves differently when taking values?
- How to access nested array object in React
- Reducer fires and it inadvertently clears input
- JavaScript action run file not change url path
- What would be the best way to differentiate between regular users and administrators in firebase?
- Why doesn't my session load when switching locales?