0

I am working on what should be a simple react application for a company (so I can't post very much code), and have been using webpack-dev-server for hotswapping to make development go more quickly. When I run my app on webpack-dev-server for development purposes, I am able to use the entire application with routing working as it should in production. When I tried to run my same application on localhost:8080, I am able to see my basic login screen and then home page, but after that point, none of the routing works and I consistently see "Cannot get /home", etc. which is a new behavior.

Every stack overflow question I've found has been addressing the exact opposite problem, where webpack-dev-server is not showing everything localhost is, and nothing I've found and tried has worked.

I have already tried regenerating the bundle.js to make sure that all of the changes were picked up, and I have gone over my webpack.config.js to make sure nothing has changed there (other than my additions to support hotswapping that I made weeks ago). Chrome Inspector shows no errors, so I'm really at a loss as to why the app is broken on localhost but not on webpack-dev-server.

In the end, all I want is for my react app to look the same on localhost as it does on the dev server, and for the life of me I can't figure out why it doesn't.

webpack.config.js:

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname+'/public',
        publicPath: '/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['react', 'es2015', 'stage-1']
            }
        },{
            test: /\.(s*)css$/,
            loader: combineLoaders([
                {
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader',
                    query: {
                        modules: true,
                        localIdentName: '[name]__[local]___[hash:base64:5]'
                    }
                }, {
                    loader: 'sass-loader'
                },
            ])
        },
        ],
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    },
    watch: true,
    watchOptions: {
        aggregateTimeout:300,
        poll: 1000,
        ignored: /node_modules/
    }
};
ripsnchips
  • 1
  • 1
  • 4
  • Hard to say without looking at a reproducible example. If you can, strip out all of your components to a bare-bones boilerplate, and then add two simple components for two different routes. If that has the same routing issue, post a gitlub link. – Matt Carlotta Feb 01 '19 at 17:39

1 Answers1

0

Found my problem - it lived in server.js. The top answer on this question helped: What's the correct way to serve production react bundle.js built by webpack?

Needed to replace:

app.get(['/', '/bom', '/items', '/products', '/segmentation'], function (req, res) {
    res.sendFile('index.html', {root: __dirname});
});

with:

app.get('*',function(req,res) {
    res.sendFile(path.resolve(__dirname,'public/index.html'));
});

And that fixed my localhost render issue.

ripsnchips
  • 1
  • 1
  • 4