Skip to content

Instantly share code, notes, and snippets.

@peacefixation

peacefixation/config-overrides.js

Created November 4, 2021 05:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save peacefixation/a0bb0fd9a65d34c225ccef344a6e3640 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save peacefixation/a0bb0fd9a65d34c225ccef344a6e3640 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. peacefixation created this gist Nov 4, 2021.
    52 changes: 52 additions & 0 deletions config-overrides.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    // 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;
    }
    }
    }