I am running my node backend on port 8000 and my dev server front end on port 9002. Ive tried a few ways to proxy to my backend when running dev, but all seem to fail (maybe because i also have
"type": "module"
)? I have tried http-proxy-middleware, but with no success.
In my server.cjs file, I have an app.get('/properties'....). It retrieves an array of objects with address, city and zip. On postman, running on port 8000, I get the correct response. Additionally, when i run start on port 8000 on my frontend, I also get the correct response. However, when I run on port 9002, my error is http://localhost:9002/properties 404, not found.
For development purposes, I need to be able to work on development, that way I wint have to run build for every UI change I make. Here is some snippets of my code below:
package.json
{
"name": "properties-three",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"proxy": "http://localhost:8000",
"scripts":
{
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.cjs",
"start": "nodemon --use_strict server.mjs",
"build": "webpack --mode production"
}, "
author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.19.6",
"@babel/preset-env": "^7.19.4",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"copy-webpack-plugin": "^11.0.0",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"axios": "^1.1.3",
"cors": "^2.8.5",
"express": "^4.18.2",
"http-proxy-middleware": "^2.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"webpack-dev-server": "^4.11.1"
}
}
setupProxy.js
import {createProxyMiddleware} from "http-proxy-middleware";
module.exports = function(app) {
app.use(
'/api/properties',
createProxyMiddleware({
target: 'http://localhost:8000',
changeOrigin: true,
secure: false,
ws: true
})
);
};
webpack.config.cjs:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
entry: "./src/index.js",
output: { // NEW
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js",
publicPath: "/"
}, // NEW Ends
devServer: {
port: 9002,
static: path.join(__dirname, 'dist'),
hot: true,
historyApiFallback: true
},
resolve: {
extensions: ['.ts', ".js", ".jsx"],
},
mode: "development",
plugins: [htmlPlugin],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
server.mjs
import express from 'express';
import cors from 'cors';
import path from "path";
import properties from './routes/properties.routes.js'
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express();
const PORT = 8000;
app.use(express.static(`${process.cwd()}/build`));
app.use(express.static(`${process.cwd()}/public`));
app.use(cors());
app.use(express.json());
app.use("/properties", properties);
app.use(express.static(path.join(__dirname, '/dist')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
app.listen(PORT, () => console.log(`server is running on http://locahost:${PORT}`));
App.js
import React, {useState, useEffect} from "react";
import axios from "axios";
function App() {
const [properties, setProperties] = useState([]);
useEffect(() =>{
axios.get('/properties').then((response) =>{
setProperties(response.data)
})
}, []);
return (
<div className="App">Test</div>
);
}
export default App;
I have tried changing my setupProxy.js to use
import {createProxyMiddleware} from "http-proxy-middleware";
instead of
const { createProxyMiddleware } = require('http-proxy-middleware');
I have also tried changing in the component
axios.get('/properties')
to
axios.get('/api/properties')
