Created
November 4, 2021 05:19
-
-
Save peacefixation/a0bb0fd9a65d34c225ccef344a6e3640 to your computer and use it in GitHub Desktop.
Path rewrite for webpack dev server proxy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://webpack.js.org/configuration/dev-server/#devserverproxy | |
| // https://github.com/chimurai/http-proxy-middleware | |
| // https://github.com/chimurai/http-proxy-middleware#context-matching | |
| // https://www.npmjs.com/package/micromatch | |
| /* config-overrides.js */ | |
| module.exports = { | |
| // The Webpack config to use when compiling your react app for development or production. | |
| // webpack: function(config, env) { | |
| // //do stuff with the webpack config... | |
| // config = rewireSass(config, env); | |
| // config = removeSWPrecachePlugin(config); | |
| // | |
| // return config; | |
| // }, | |
| // The function to use to create a webpack dev server configuration when running the development | |
| // server with 'npm run start' or 'yarn start'. | |
| // Example: set the dev server to use a specific certificate in https. | |
| devServer: function (configFunction) { | |
| // Return the replacement function for create-react-app to use to generate the Webpack | |
| // Development Server config. "configFunction" is the function that would normally have | |
| // been used to generate the Webpack Development server config - you can use it to create | |
| // a starting configuration to then modify instead of having to create a config from scratch. | |
| return function (proxy, allowedHost) { | |
| // Create the default config by calling configFunction with the proxy/allowedHost parameters | |
| const config = configFunction(proxy, allowedHost); | |
| config.before = function (app, server, compiler) { | |
| app.use('/', function (req, res, next) { | |
| console.log(`from ${req.ip} - ${req.method} - ${req.originalUrl}`); | |
| next(); | |
| }); | |
| } | |
| config.proxy = { | |
| ...config.proxy, | |
| '/api/**': { | |
| // route this path to the backend API | |
| target: 'http://host.docker.internal:8000' | |
| }, | |
| '/path/styles.+([0-9]).css': { | |
| target: 'http://localhost:8002', // webpack dev server | |
| pathRewrite: { '^/path/styles.([0-9]+).css' : '/styles.$1.css' } | |
| }, | |
| } | |
| // Return your customised Webpack Development Server config. | |
| return config; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment