score:2

Accepted answer

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 to http://localhost:3000/. you can then go to localhost: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 by htmlwebpackplugin. webpack-dev-server is serving bundle.js through /, the publicpath you've specified in webpack's output option. this works just fine as long as you access your site through localhost:3312 or localhost:3000. however, your express.js server running on port 5000 has no idea webpack-dev-server is serving bundle.js at /; as a result of that, you end up seeing none of your react code when you go to localhost: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 to http://localhost:3312/. now, as long as you have webpack-dev-server running (with browsersyncplugin), you can access your site at localhost:5000 and your bundle.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>
);

Related Query

More Query from same tag