so i've this situation, my API it's on localhost:5000 and on the React project i used proxy, so every fetch i do with
fetch('api/*') etc etc
he used proxy localhost:5000, but i've a problem when i used on one page with router different
it's try to proxy on
fetch('api/:searchId')
he used the router where i call the fetch, so on localhost:3000/movie/:searchId for example
he try to call fetch on movie/api/searchId how can i resolve this?
If you don't have a / at the beginning of the path given to fetch, it will use the given path relative to the current browser path.
Add a / in the beginning and the fetch will be independent from the browser path.
fetch('/api/:searchId')
Related
I have a React application running on port 3000, I have an express backend running on port 5000. I would like React to instead of using index.html as the base HTML for the application to instead call port 5000 and use that html (I have a route there, index.html that when I do localhost:5000/index.html responds correctly). How can I tell React to not look in the public/index.html and instead pull it from the backend?
I think you could minimize this kind of problem by using everything in just one project.
The thing is that, you need a mount point for your React app. So, you could fetch for what it's in localhost:5000/index.html (you may need to enable CORS), and obviously you should use DOM Parser to parse the incoming response to text, and then to a manipulable DOM, after that find a mount point element for your application, and finally render everything as a string in your current html document.
So, you'd need to do something like this; and then using a querySelector to find the mount point in you application, and then use DOMParser to render.
However, you'd need to have an arquitecture in which every component you're using in your application is provided. You may need to use react-router so this is achieved.
You can do this with a proxy and CORS.
In your React app in your package.json you can specify
"proxy": "http://localhost:5000"
You should also install the CORS library on your express server
I'm a bit confusing how routing works with react-router.
Normally when a request comes to the server for a request like:
http://www.example.com/path/to/file
A request will make it to the server for that file, and then the framework will handle the request.
With react router, how does this work? Do things somehow get intercepted at the client side (browser) and then only a request to index.html will be made to the actual web server?
I'm assuming somehow the request to /path/to/file gets trapped by javascript and only a request to index.html makes it to the server, but how does it do this?
React router is a client side router, so when we do configs for nginx or any webserver in general with react router we specify and send only 1 file known as index.html and then the JavaScript code provided by react router figures out which component to serve by looking at the path and history of the browser.
So no matter which path you request it's indirectly index.html which gets the request but with a different path which then figures out what to do.
One part of the answer is looking at the basename prop of the Router. Everything that comes after that is handled at client side as the location corresponding to the app current state.
Another part of the answer is that when using BroswerRouter (as opposed to a HashRouter that uses the # separator in the URL before the local app state), the server has to serve the app "index.html" for any route that does not correspond to an actual static ressource or an API route. This is usually treated as the fallback behaviour of the server.
When using BrowserRouter, if your server base url is http://example.com/app, and your current app state is /user/12, that makes the current browser url http://example.com/app/user/12. If you refresh your browser, it will make a request to http://example.com/app/user/12 and your server app has to answer with the index.html of the app. When loaded, react router will interpret the current state as /user/12, following the configured basename.
When using a HashRouter, with the same server base url and app state, the current browser url would be http://example.com/app/#/user/12 and when refreshing the page, the browser would make a request to http://example.com/app/
I have a backend using express to serve a static directory, to the path /, in which is contained a single page frontend. This backend also serves an API REST.
The frontend is built in React, and uses react-router to route the user from the different views of the web application.
If my react-router have two entries, let say /app and /config,
how can I redirect the client to that view of the application, if the user enters directly the URL in the web browser's address bar?
Right now, if I do that, Express gets the request and obviously returns a 404 message, as the single page is served to / path.
A simple way to resolve that is to always (even on 404s) send to user the index.html in your express route handlers.
See: https://stackoverflow.com/a/25499007/2624575
However, you need to take care of some things:
1) Your React Router code should start to handle 404s: https://stackoverflow.com/a/37491381/2624575
2) You need to handle correctly the path to your assets (icons, css, js, etc), otherwise you'll send the same index.html to those kind of resources (which will make your page render incorrectly)
3) Make sure that react-router is using browserHistory (the history that doesn't use hashes #), This way React will be able to render your routes correctly
Hope it helps!
Recently I am using MERN stack as my web development stack. However, I could not figure out that how to handle client side rendering and server side rendering.
I have a URL like: http://localhost:3000/addItem and I route this URL using react router. It works well. But when I input the URL in the browser and hit the enter button, 404 paged showed.
I understand the reason is I did not set up the get request in express.js
However, my question is should I just leave it in this way? or I should also implement the get request in express as well?
In your index.html file you might have included the js bundle in the script tag file like below.
src="js/bundle.min.js"
It should be
src="/js/bundle.min.js"
You need the '/' to make it absolute path. else it'll try to find the JS file in the relative path of the URL you entered.
So, I have a single page angular app that is opened when I navigate to a URL. If I use the links, moving around within the app is fine - new URLs load just fine. However, if I enter a new URL in the browser URL window and hit enter, the back end framework - Laravel in my case - tries to resolve the URL.
How do I either
Intercept the URL change so that I can simple direct it to the appropriate state in the app
Tell Laravel to ignore the new URL and let the angular app handle it
Thanks
If I understand your question correctly, you don't want Laravel handles it because the routes is defined in javascript, not in server side. If that's the case, you can simply solve it by using wildcard.
Let's say in your laravel's routes you have this line to load your app, views, javascripts etc:
Route::get('/', 'PagesController#index');
You can use the wildcard modifier to ignore whatever url that has appended, and always serve your index view instead:
Route::get('/{any?}', 'PagesController#index')->where('any', '.*');
I'm not sure why it's not in the latest documentation, but you can find the docs at Laravel 5.2 doc regarding regular expression constraints