We're developing a web app in React using create-react-app. The backend is written in Python and therefore we define a proxy in package.json to forward API calls to it during development as described here.
This, however, seems to interfere with the live reloading of the React development server when a source file is modified. In the Browser console we see:
The development server has disconnected.
Refresh the page if necessary.
And the backend server sees unexpected requests:
127.0.0.1 - - [22/May/2019 08:01:38] "GET /sockjs-node/227/inixucqn/websocket HTTP/1.1" 401 -
Is there any way to fix this? I guess we could configure the proxy manually, but this must be a problem everyone has when using proxy.
Related
I have developped the application with DJango + ReactJS
when in developpment,
using
$python manage.py runserver
and
$yarn start
which launche the two servers on localhost:8000 and localhost:3000
However in production environment, I need to launch two servers??
When I use webpack before I run two server in developpment environment, but in Production just building in advance and use only on one server uwsgi
Could run under one server directly, I'll share other ways too.
Have your yarn build done and serve under Django's static files + listen for js/css/image assets. Now about your routing, you need to capture frontend routes such a way that (when direct url is entered), Django responds back static assets itself.
The downside in above is that your APIs' urls have to be following some pattern which won't interfere frontend URIs (routes).
Running two servers + CORS
Pack your react build with expressjs and serve it with some production grade server like pm2/ could use nginx + static files too but to tackle routes issue (of React), you'll need to tweak nginx to listen to not only "/" but also other routes in frontend.
Now, calling django APIs, do enable CORS config to support calling APIs from your React site.
Can also use serverless to send your static files + CORS behind the scenes.
If you're not having access to root of server, would need extra one to spare in former case. Otherwise to spin up a frontend + backend process in same server machine won't do much weight.
Good luck!
I have create created a react app for ticket management and for connect with backend i have defined proxy in package.json as shown in the figure. this is finely working in local host. when i publish to github page, it not able to connect to backend and get 404 error since the proxy in package.json is not considering now. So how i define a proxy as like in the packag.json to github page i have hosted
github ripo: https://github.com/pranavmappoli/supportdesk
hosted page: https://pranavmappoli.github.io/supportdesk/
backend URL: https://pranavhelpdesk.herokuapp.com/
how could i resolve this issue other than putting the path in .env file
The webpack proxy is designed to be used as a hack during development.
In production you are supposed to configure CORS on the API or deploy the app to the same origin as it so you don't need a proxy.
An an alternative (not one I'd recommend) you could build a production ready proxy. If you do that then it will need to support CORS and cannot be hosted on Github pages which only support statics files.
I'm running a very basic react app on Heroku and would like to force https on the production server, while still running localhost on https. I cannot for the life of me figure out how to do this on Heroku.
SSL and domain has been setup and works fine when I manually enter https:// before the domain. But if I manually type http:// this also works.
How do I redirect all http traffic to https for my react app on Heroko. I would like this to happen:
localhost:3000 still works in development
https is forced on production domain
create-react-app still runs without being "ejected"
Typically I'd set this up on the DNS, but Heroku only allows for a CNAME setup, so I cannot do this on the DNS level. I assume a custom server is required like express, but I cannot find any documentation on how to do this for production while stille working normally in development/localhost.
I use
"webpack": "3.8.1" ,
"react": "^16.5.2"
when start to yarn start app is working
but after the yarn build and serve -s build, not to call api. (but react-router is working)
In other words, it does not work for the http request. After the build
But as a yarn start, http request runs well.
(I use proxy in package.json. front-end is react, backend is spring boot)
I suspect your issue is like this. When you are developing you are using a proxy setup in your package.json as you have stated in your question.
When you have this proxy setting, webpack dev server will proxy your request from the client to the server. This is what allows you to leave the baseurl off your request in the app. In other words, because of this proxy you can simply write /api/endpoint/.
When you build and serve using the serve module however, webpack dev server is no longer the one serving your app the the browser, which means there is no more proxying requests from client to server. This means you are making a request to just /api/endpoint/ which means there is no server actually getting your request.
Without actually changing your react code to use the full url including the base url in requests, you would need to actually have the server be responsible for serving the build folder to the web statically. By doing this, your /api/endpoint will point back the server that served the app which is also your api.
I am using Keycloak authorization server with React hosted via ASP.NET and Webpack. When I do a build and host through ASP.NET I have no problems with getting authorized methods on the host. When I deploy the whole project on the server there are also no problems with React connecting to the host. But when I am trying to do localhost development with Webpack proxy to my remote server, than I recieve 302 redirection to Keycloak login page. I log into the deployed app before the fetch, but it looks like the proxy is not recognized as the same browser. I have the 'credentials':'include' statement in my fetch init.
The problem was with Kestrel-Keycloak and http/https security. It appears that when you use a proxy like Nginx, Kestrel doesn't copy the headers. The problem can by solved by using:
app.UseForwardedHeaders
in Startup class, Configure method.