Re-direct dynamic URLs from express to react - node.js

Question

I have a react app, which uses a router and works fine if the URL is not entered directly into the address bar, but rather is set by react router when navigating the app. I have added ExpressJS to the app, by running the react app via the Express proxy. The goal is to re-direct any dynamic requests to the react app, so that it can handle it, instead of Express. I have looked at many examples and tried using them, but I had no luck in making the re-direct work.
The folder structure and key file locations are as follows:
[Root directory]
---- [client]
--------- [node_modules]
--------- [public]
--------- [scss]
--------- [src]
--------- package.json
--------- webpack.config.js
---- [server]
--------- index.js
---- [node_modules]
---- package.json
The "client" directory contains the react app. The "server" directory contains the Express app. The Express app's package.json is in the root directory, while react app's package.json is in the "client" directory.
server/index.js
const express = require('express');
const path = require('path');
const PORT = process.env.PORT || 5000;
const app = express();
// Serve static files
app.use(express.static(path.resolve(__dirname, '../client/public')));
app.get('*', function(request, response) {
response.sendFile(path.resolve(__dirname, '../client/public', 'index.html'));
});
app.listen(PORT, function () {
console.error(`Listening on port ${PORT}`);
});
client/package.json
Contains "proxy": "http://localhost:5000"
client/webpack.config.js
Contains the following for devServer, entry, and output (I excluded various loaders as irrelevant for URL processing):
const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');
module.exports = (env = {}) => {
return {
entry: {
index: [SRC_DIR + '/index.js']
},
output: {
path: BUILD_DIR,
filename: '[name].bundle.js'
},
devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
devServer: {
contentBase: BUILD_DIR,
compress: true,
hot: true,
open: true,
historyApiFallback: true
}
}
};
client/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import createHistory from 'history/createBrowserHistory';
import { Route } from 'react-router';
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux';
import rootReducer from './reducers';
// Wrapper
import SiteWrapper from './wrappers/SiteWrapper/'
// Pages
import Error404 from './ErrorPages/Error404/'
const history = createHistory();
const middleware = routerMiddleware(history);
const store = createStore(
combineReducers({
rootReducer,
router: routerReducer
}),
applyMiddleware(middleware)
)
ReactDOM.render((
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Route exact path="/404" name="Error 404" component={Error404}/>
<Route path="/" name="Home" component={SiteWrapper}/>
</div>
</ConnectedRouter>
</Provider>
), document.getElementById('root'));
I first run the Express app, which starts listening on port 5000, and then I run the react app. When entering a dynamic URL http://localhost:7500/dynamicurl/test-dynamic-url, the app no longer shows 404, but then it doesn't show anything at all, and this is what I see in the developer console:
Refused to apply style from 'http://localhost:7500/dynamicurl/index.fonts.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
test-dynamic-url:1 Refused to apply style from 'http://localhost:7500/dynamicurl/index.styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
test-dynamic-url:54 GET http://localhost:7500/dynamicurl/index.bundle.js net::ERR_ABORTED
What am I doing wrong here? Did I miss something?
Thanks in advance