1

I am building a web application from the ASP.Net Core React template, whose "ClientApp" React portion appears to be a 'create-react-app' project. When I deploy the app to IIS, it gets hosted in a subfolder from the root, i.e. http://myserver.com/SubApp. Because of this, I have changed the "homepage" value in package.json to http://myserver.com/SubApp.

What I am now experiencing is that when I am making fetch calls in my javascript code locally, if I use fetch('/myendpoint'), the the url requested locally is https://localhost:44315/myendpoint (which works), but when deployed, this url becomes http://myserver.com/myendpoint, which does not work.

Conversely, when I make the endpont fetch('myendpoint') (no leading slash), the server requests the correct URL http://myserver.com/SubApp/myendpoint but localhost fetches the incorrect URL, https://localhost:44315/SubApp/myendpoint.

I understand that the leading slash makes the request from the root, but the root appears to be different in localhost vs. on the server.

For local debugging purposes, I tried setting a proxy in package.json to https://localhost:44315 so that hopefully fetch('myendpoint') (no leading slash) would work in my local environment, but when I try this, chrome prompts me to sign in repeatedly without ever successfully making the request.

I feel like I am almost there, but I must be missing something. How can I configure my package.json (or other project configuration) to make the fetch commands succeed on both localhost and my server, without doing something hacky like checking the URL in the javascript code before every fetch?

Improve this question
2
  • I made a sample code with the template react in Visual Studio and it worked and I got the publisher and I tested it in the local web server and it worked. Commented Oct 27, 2020 at 7:00
  • Try "homepage": "." in package.json For reference: create-react-app.dev/docs/deployment/… Commented Oct 27, 2020 at 14:44

2 Answers 2

Reset to default
1
+50

What you need is Proxying API Requests in Development.

It easily allows you to call any endpoint in development and forward it to your backend or other location without CORS issues or your problem of mismatched endpoints.

You will have to use the manual configuration option, since the default proxy setup only helps with host/port forwarding.

Install http-proxy-middleware as a dev dependency:

$ npm -i http-proxy-middleware --save-dev

Following the guide linked above, you can use this configuration:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/SubApp/*',
    createProxyMiddleware({
      target: 'localhost://44315', // or anything else, point to your dev backend
      pathRewrite: {
          '^/SubApp': '/', // remove base path
      },
    })
  );
};

You can then fetch with the /SubApp part in the request which will be removed in developement. You can use other configurations to achieve this, this is one example.

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

As soon as I installed http-proxy-middleware and then added this setupProxy.js file, I am receiving this error when I try to run locally...
An unhandled exception occurred while processing the request. AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'start' exited without indicating that the create-react-app server was listening for requests. The error output was: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: rimraf ./build && react-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Forgot to include this, you need to add http-proxy-middleware as a dev dependency. npm i http-proxy-middleware --save-dev
Hmmm... I am still getting the same error after running the install with --save-dev.
No, you should set the basename of <BrowserRouter> to fix the react router issue. You can still leave homepage
|
1

I had this same experience as well and found that setting the homepage value in the package.json is a dead end. What you want to do is make use of the PUBLIC_URL environment variable to set a full absolute url in your .env . There may be a way to use relative urls, but there were some edge cases that just made it cleaner to use an absolute URL.

When you set this environment variable you want to make use of it in the following places:

  • Your Routes (if you use react router)
    • The path should be prefixed by process.env.PUBLIC_URL
  • Your internal links should also be prefixed by the env var.
Improve this answer

2 Comments

In what file should I try to change process.env.PUBLIC_URL?
Ok I have just created a new file, .env, in the root of my project. It has the line PUBLIC_URL=http://myhostname.com/SubApp in it, but when I print process.env.PUBLIC_URL from within my app, I get the exact same relative URL as when I just set the homepage value in package.json... Both just print out "/SubApp".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.