React: Unable to set proxy server for react appllication - reactjs

Question

I have my own react app and I tried adding proxy to the package.json, but it is not working.
On the other hand The simple create-react-app (as in the react basic example) works just fine but it does not have any webpack configured.
Here is my webpack:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('./dist'),
filename: 'index_bundle.js'
},
module: {
loaders:[
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.jsx$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: "style-loader!css-loader?modules"
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
},
resolve: {
extensions: ['.js', '.jsx' ,'.json'],
modules: [path.join(__dirname, 'src'), 'node_modules']
},
plugins: [HtmlWebpackPluginConfig]
}
My package.json:
{
"name": "A2ZPressMaterial",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --history-api-fallback",
"webpack-watch": "webpack -w",
"express-server": "node ./server",
"dev": "concurrently --kill-others \"npm run webpack-watch\" \"npm run express-server\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
"proxy": "http://localhost:3001",
"dependencies": {
"classnames": "^2.2.5",
"css-loader": "^0.28.7",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"material-ui": "^0.19.2",
"path": "^0.12.7",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-lazyload": "^2.2.7",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.5.6",
"webpack-dev-server": "^2.8.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"concurrently": "^3.5.0"
}
}
I get 404 on my ajax/fetch calls.
My express sever is running on 3001.
The simple create-react-app is able to hit this server.
I run the react app as yarn start and express server as npm start

Answer 1

Looks like the issue here is that you're trying to use the proxy setting using your own webpack setup.
The proxy setting is a feature of create-react-app so if you're making your own setup you'll need to implement that manually.
Note that the documentation for the proxy setting is found in the create-react-app documentation, not the React documentation:
https://create-react-app.dev/docs/proxying-api-requests-in-development/
Late answer in case anyone finds this question in the future.