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
Related
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')
I created an app with
react-create-app client
inside my e-commerce website(it uses nodejs and express), in order to implement some other functionalities. The problem is that i don't understand how to make the react-app work with ejs template, instead of using index.html. First of all i want the root component to be in a .ejs file inside views folder(outside react app). I think i need to change something in webpack, but i'm really confused, i can't even find config and there are a lot of additional plugins and code that i've never seen before, it's really difficult to understand something. Also when i run my server on port 3000 and app on port 5000 (with proxy set on 3000) it says 'something already running on port 3000'. What should i do? I can't use react on the entire website (all buttons, menus) because it's too simple for react i think, and there is some simple rendering done with ejs that i don't know how to implement with react.
At first you shouldn't use create-react-app for just bunch of components on existing page, this is whole environment done for true SPA done purely in React. If you need to just plug React to the existing page you have no choice than to read docs and learn or find a way how to setup in your existing app (you didnt say anything about it so I am not answering how.)
Secondly you need to eject your react app with yarn eject which will expose you all configs. https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject
Then you need html-webpack-plugin which can accepts .ejs format as entry point https://github.com/jantimon/html-webpack-plugin.
I don't see any reason why not to use React for everything, because it is "too" simple. You can render plain HTML with PureComponents and it will cost almost 0 memory for browser to render it.
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!
I'm using create-react-app in my latest project and it's great! Now I'm facing one issue that I'm not sure how to solve properly.
I've created app using redux for my state managment, and that all is working well.
Now I don't have much experiance with server side renderin in React, but for my next feature I'll need to take one of the existing / working react components (that are connected to redux store) and render it on server that comes with create-react-app. The reason why I wanna do this is to be able to use some libs like pdf generators and simillar to be able to print out some of them (also some other stuff but that's the basic).
First thing I'm confused with, since I don't want to render everyting on server, what's the best / correct way (for development) to run webpack-dev server and node server that will do all those taks I mentioned above in parallel instead of just changing it's default port to let's say 8000, and run it manually?
Secound, should I be able to just use ReactDOMServer.renderToString on that existing component on server or there is something else that will complicate stuff (I know I'll need to add babel on server definitaly)?
Create React App does not support server rendering. You might want to migrate to Next.js which does.
Unfortunately, Create React App (CRA) doesn't have extensibility points to allow this. But there is a slightly altered version of CRA that allows compiling, testing and running both client-side and server-side code using regular CRA pipeline - npm start will compile and launch both cient-side and server-side portions of your app, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.
Using https://github.com/ayoubdev/reactjs-isomorphic-starterkit as a boiletplate.
I'm trying to figure out how to inject the client's bundle into the server rendering process.
As the webpack build for server and client is well separated, is there a simple trick to achieve this goal ?
Thanks
I'm not too sure about the specifics of this boilerplate repo. But I can try to explain the main idea, and you can dig deeper.
The basic idea is, use a bundler (in this case, webpack is used, gulp, grunt, whatever else is fine as long as you transpile) and build a bundle based on the entry point for your React components. Then link this bundle via script tag in some html file.
For the server side, you can use ReactDOMServer.renderToString. Import your component(s), pass them into ReactDOM.renderToString. Pass the HTML to some templater like ejs or use a raw HTML string and call React.render from the server.
Client side.
In your example, the entry point is here and hooked here. Notice the <div class= "app"> tag. This is tag we are referencing in our entry point. We also reference our bundled js from webpack via script tag, client.bundle.js.
Server side
In your example, the relevant code is here. Notice the renderComponent function. It builds a string based on the HTML of the component supplied from ReactDOMServer.renderToString, which is called on Line 39. It then sends all of that html back as a response in res.send
This blog article uses jade as an example, which you can use as an alternative if you find this boilerplate a bit much.