Example 1: npm webpackdev server
npm install webpack-dev-server --save-dev
Example 2: npm dev server
$ npm install dev-server -g
Example 3: webpack dev server
devServer: {
open: true,
compress: true,
hot: true,
inline: true,
watchContentBase: true,
contentBase: resolve(process.cwd(), 'build'),
historyApiFallback: true,
before: (app, server, compiler) => {
const fileExist = existsSync('./src/setupProxy.js')
if (fileExist) {
const pathProxy = resolve(process.cwd(), 'src/setupProxy')
return require(`${pathProxy}`)(app)
}
},
port: process.env.PORT || 3000,
liveReload: false
},
Example 4: webpack dev server
// 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
}
}
Example 5: webpack dev server
devServer: {
open: true,
compress: true,
hot: true,
inline: true,
watchContentBase: true,
contentBase: resolve(process.cwd(), 'build'),
historyApiFallback: true,
before: (app, server, compiler) => {
const fileExist = existsSync('./src/setupProxyx.js')
if (fileExist) {
const pathProxy = resolve(process.cwd(), 'src/setupProxy')
return require(`${pathProxy}`)(app)
}
},
port: process.env.PORT || 3000,
liveReload: false
},