CUSTOM PROXY IN WEBPACK DEV SERVER LIKE CRA

// TIPS AND TRICK CUSTOM PROXY IN WEBPACK DEV SERVER BY restuwahyu13
//NOTE this method like using CRA in React

// manual proxy before
module.exports = {
    devServer: {
        open: true,
        compress: true,
        hot: true,
        inline: true,
        lazy: true,
        contentBase: resolve(process.cwd(), 'build'),
        port: process.env.PORT || 3000,
        proxy: {
          '/api/*', {
            target: 'http://localhost:3001',
            secure: false,
            changeOrigin: true,
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Credentials': '*',
                'Access-Control-Allow-Methods': '*'
            }
          }
        }
        liveReload: false
    }
}

// custom proxy after
module.exports = {
    devServer: {
        open: true,
        compress: true,
        hot: true,
        inline: true,
        lazy: true,
        contentBase: resolve(process.cwd(), 'build'),
        port: process.env.PORT || 3000,
        before: (app, server, compiler) => {
            const pathProxy = resolve(process.cwd(), 'src/setupProxy')
            return require(`${pathProxy}`)(app)
        },
        liveReload: false
    }
}