CODEWITHSUNDEEP
node.jsreactjs
Tom Raganowicz
Tom Raganowicz

Reputation: 2470

npm start - developing React app - any way to set 'base href' or forward traffic to my back-end?

I am modifying existing React application which uses the relative URLs e.g.: /server/fetchRouteInfo. The react app runs in context of a hostname e.g.: local.website.com, so it all works nicely as URLs get resolved to: local.website.com/server/...

I've found the npm start convenient to use to develop this React application. The problem is because of npm, my front-end app gets hosted under: localhost:3000, so the relative URLs no longer resolve to correct back-end and external resources.

What's the best way to connect my front-end app to desired back-end?

I've tried to use HTML <base href="local.website.com"> but it breaks the npm internal calls e.g. to static.js.

I know that I could modify the relative URLs to full absolute, but that's not the way I want to go.

Perhaps there is a way to forward / proxy-pass any traffic that goes to npm to my endpoint? In other words if there is request like: localhost:3000/server/... it would get internally proxied to: local.website.com/server/....

What's the common way to solve my problem, namely how to connect front-end to external back-end given the front-end uses relative URLs.

Upvotes: 0

Views: 1396

Answers (2)

Tom Raganowicz
Tom Raganowicz

Reputation: 2470

On React page there is proxy section: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Looking up the component Github: https://github.com/chimurai/http-proxy-middleware

There is a way to provide custom filter.

Instructions:

  • Install component: npm install --save-dev http-proxy-middleware

  • Create file: src/setupProxy.js with this config

    const proxy = require('http-proxy-middleware');
module.exports = function(app) {

    var filter = function(pathname) {
        if (pathname.match('^/static')) {
            return false;
        }

        return !pathname.match('^/$');
    };

    app.use(
        proxy(filter,{
            target: 'https://local.backend',
            changeOrigin: true
        })
    );
};

  • npm start

This will redirect all traffic, except the: / (this is where my React app is served) and starting with /static (some NPM JavaScript).

I am not sure if it's the easiest way or not. I would've been easier if there is dedicated namespace e.g.: /api that you could use.

There was a caveat though. If you first need to login to your back-end which sets session cookies, those cookies won't persist if you use: localhost:3000 path (the localhost is not valid domain for cookies to be set). My workaround was to add the entry in: /etc/hosts and create bogus domain. 127.0.0.1 local.host then use: local.host:3000 endpoint.

Another issue you might encounter if the session cookie is: Secure, that means that it won't be set for unencrypted protocols. Simply start the npm with https support: HTTPS=true npm start and contact using: https://local.host:3000 endpoint.

Upvotes: 0

Nikhil Goyal
Nikhil Goyal

Reputation: 1973

You can set the proxy in package.json. Just add one more parameter proxy with the desired value.

For more information, please refer to Proxying in Development

Upvotes: 2

Related Questions