Question

我目前正在将create-react-app与HapiJS用作提供静态文件的代理。

这是我当前设置的样子：

//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');
    }
}

我正在开发中使用nodemon来运行服务器，并使用react-scripts start来运行react-app。现在的问题是，HapiJS服务器仅提供使用build生成的react-scripts build文件夹中的静态文件。我了解到，要连接到Webpack版本，我需要为HapiJS使用中间件。

看着webpack documentation，我发现它需要引用webpack.config.js文件。但是我并不能随意使用eject来根据需要访问webpack.config.js。

所以问题是：

如何结合使用HapiJS和webpack-dev-middleware来设置create-react-app？
如何在不弹出（最好不使用任何第三方模块）的情况下访问webpack.config.js？

注意：这不是服务器端渲染，我使用HapiJS作为代理，因为其中涉及跨域API调用，并且代理可以帮助我避免臭名昭著的CORS错误并为应用程序提供服务。

Answer 1

转到我的存储库，您会找到问题的答案

Here

别忘了给我的仓库加星标，就是你得到了答案。

HapiJS + create-react-app + webpack-dev-middleware配置

1 个答案: