CODEWITHSUNDEEP
node.jsreactjsexpressproxyreact-router
Maximilian Braun
Maximilian Braun

Reputation: 73

How to use proxy in production mode with npm like proxy parameter in package.json?

I think i need to explain a little bit more about my issue. I have setup a react app and a typeorm backend. In my react app i set the proxy parameter to 'localhost:3001' which is my backend. (my react app runs on 'localhost:3001'). This works like a charm IN DEVELOPEMENT. However when it comes to production (for example when i build my react app and serve it with npm serve -l 3000) i am forced to do the proxying myself. I googled for this and i think the first few answers to this topic showed me that express is the way to go. So i googled more and found a package called 'http-proxy-middleware'.

This is my code:

const { createProxyMiddleware } = require('http-proxy-middleware')
var app = require('express')();
const port = 80;

var apiProxy = createProxyMiddleware('/api', { target: 'http://localhost:3001' });
var normalProxy = createProxyMiddleware('/', { target: 'http://localhost:3000' });

app.use(apiProxy);
app.use(normalProxy);

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

It works but not like i want it to.
When i make a call to 'http://localhost/api' it proxys to my backend.
When i make a call to 'http://localhost/' it proxys to my react app.
Now when i try to call 'http://localhost/db/home' for example it gives me an 404 Error (it should proxy to 'http://localhost:3000'). I think it also has to do with the react dom router package that i use. Because of that here is the content of my 'App.tsx':

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.css';
import './App.scss';
import MainTab, { IMainTabProps } from './staticTabs/MainTab/MainTab';
import { MainTab as DBMainTab } from './dashboardTabs/MainTabs/MainTab/MainTab';
import Tab404 from './staticTabs/Tab404/Tab404';
import StaticTabsLayout from './staticTabs/StaticTabsLayout';
import DashboardTabsLayout from './dashboardTabs/DashboardTabsLayout';
import Profile from './dashboardTabs/MainTabs/Profile/Profile';
import Settings from './dashboardTabs/MainTabs/Settings/Settings';

function App() {
  return (
    <Router>
      <Switch>
          <Route path="/db/home">
            <DashboardTabsLayout>
              <DBMainTab />
            </DashboardTabsLayout>
          </Route>
          <Route path="/db/me">
            <DashboardTabsLayout>
              <Profile />
            </DashboardTabsLayout>
          </Route>
          <Route path="/db/settings">
            <DashboardTabsLayout>
              <Settings />
            </DashboardTabsLayout>
          </Route>
          <Route path="/db/">
            <DashboardTabsLayout>
              <DBMainTab />
            </DashboardTabsLayout>
          </Route>
          <Route path="/index.html">
            <StaticTabsLayout>
              <MainTab />
            </StaticTabsLayout>
          </Route>
          <Route path="/verify/:UserID/:VerifyID" component={(props: JSX.IntrinsicAttributes & JSX.IntrinsicClassAttributes<MainTab> & Readonly<IMainTabProps> & Readonly<{ children?: React.ReactNode; }>) => <StaticTabsLayout><MainTab verify={true} {...props} /></StaticTabsLayout>} />
          <Route exact path="/">
            <StaticTabsLayout>
              <MainTab />
            </StaticTabsLayout>
          </Route>
          <Route component={Tab404} />
      </Switch>
    </Router>
  );
}

export default App;

Update
I also tried calling 'http://localhost:3000/db' in my Browser and this gives me also an 404. So i think it could also possibly be that my 'react-router-dom' code doesn't work.

Upvotes: 2

Views: 5134

Answers (1)

Maximilian Braun
Maximilian Braun

Reputation: 73

So i found the problem myself. I had the feeling that it has something to do with the react app it self. So i looked up the deployment section under the create-react-app-website and i found out that i used the serve -l 3000 command in build directory to host my frontend. Then i saw in the documentation that i should use serve -s build -l 3000 outside of my build directory to serve it correctly. Thanks also to @eol's answer as it probably would be the next thing that might had helped if it wasn't the problem that i had with serve.

Also if your'e problem was the same as mine (with serve) you just need to use a middleware proxy with '/' put no one with '*'. So it would look like this:

const { createProxyMiddleware } = require('http-proxy-middleware')
var app = require('express')();
const port = 80;

var apiProxy = createProxyMiddleware('/api', { target: 'http://localhost:3001' });
var frontendProxy = createProxyMiddleware('/', { target: 'http://localhost:3000' });

app.use(apiProxy);
app.use(frontendProxy);

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

Upvotes: 4

Related Questions