HapiJS + create-react-app + webpack-dev-middleware configuration

Question

I am currently using a create-react-app with HapiJS as a proxy for serving the static files.

This is how my current setup looks like:

//server.js
const server = new Hapi.Server({
        port: process.env.PORT || 80,
        routes: {
            files: {
                relativeTo: Path.join(__dirname, '../build')
            }
        }
    });
await server.register(Inert);
server.route(routes); // comes from an array of routes defined in react-routes.js
await server.start();
console.log('Server running at:', server.info.uri);

//react-routes.js
//All the routes mapped here should return an index.html file.
//React will take care of routing.
const routes = [
    { method: 'GET', path: '/home', config: fileHandler }
    { method: 'GET', path: '/account', config: fileHandler }
    ]

const fileHandler = {
    handler: (req, res) => {
        return res.file('index.html');
    }
}

I am using nodemon in development to run the server and react-scripts start to run the react-app. Now the problem is, the HapiJS server only serves the static files from the build folder generated using react-scripts build. I understand that in order to connect to the webpack build, I need to use a middleware for HapiJS.

Looking at the webpack documentation, I see that it needs a reference to the webpack.config.js file. But I am not at liberty to use eject in order to access the webpack.config.js as required.

So the questions are:

How do I setup webpack-dev-middleware with HapiJS in conjunction with create-react-app?
How do I access the webpack.config.js without ejecting (and preferably without using any 3rd party modules)?

NOTE: This is not Server Side Rendering, I am using HapiJS as a proxy since there are cross-domain API calls involved and the proxy helps me avoid the infamous CORS error and serve the application as well.

HapiJS + create-react-app + webpack-dev-middleware configuration

0 Answers0