I am currently working on a legacy app, and we are starting to migrate some pages to a new React app.
Because of various reasons, we have to split the legacy app and the new React in two different domains.
The React app is embed in my legacy domain. It looks like this:
The customer goes to legacy.mydomain.com
The app loads the React in a part of its page from react.mydomain.com
The React is rendered correctly
My current problem here is regarding assets, not the ones in the public folder, but the one compiled with my app.
Currently, react-scripts build generates those files and the HTML with a relative path (src="/my-image-rtybghb.png" for example), but I would like to force, during the build, the absolute path of the image so it is handled by the React domain and not the legacy one (I want to get src="react.mydomain.com/my-image-rtybghb.png).
I could not find anything regarding this in the React documentation, and I'm asking myself if I would need to configure something with React App Rewired
Related
I'm developing a web application using React and WordPress as a headless CMS, since WordPress as a backend is easy for my client to access and change. The React app is effectively finished. It taps the REST API on WordPress, gets all of my custom post types, and displays them nicely in the app. But I am unsure of how to get WordPress on the server to serve the React app in the root directory instead of the default theme template it does now. I have my React app on my local machine, and WordPress is installed server-side.
I've seen the plugin ReactPress, but I'm not sure that applies to me here. I don't need a local installation of WordPress (as best as I can tell) - the app already taps the API and is fully functional. Also, I do not want a slug to serve the React App as ReactPress seems to want. All I need to do is make it so that WordPress will serve the React app when the root directory of the site is accessed.
If anyone has any pointers on how to accomplish this, I would be very grateful!
I am using django on the backend and on the front end I am using react with create-react-app.
I have different apps on my web page that are somewhat independent from each other:
mydomainname/home
mydomainname/foo
mydomainname/bar
They are all somewhat connected but logically completely different which is why I separated them.
Is this handled with only one create-react-app and one index.html file in the build folder? And something like the browser router package for the different apps?
For example, if I look at the Facebook homepage (in case I want to build that with React) I understand that my news feed and my profile page and other people's pages are all connected and share similar components which is why it would make sense to have one index.html file.
But if I create a new public page (e.g. for a business figure), are all these components and functionalities handled in the same one index.html file? I could imagine that this will run into memory leaks and performance issues, or is this not the case? I can't seem to find anything about that neither in the create-react-app documentation nor through google.
React is not Html. In React you have only one page named index.html in folder public. The "pages" in react are named as 'Components', so you just create components and link them to each other. The first generated example component is App (App.js) component in src folder. All the transitions (transition from one component to second) will be done in index.html file.
So the question is if it is possible to split a React app into two different separate apps hosted on two different hosts, where the app A is a kind of a frame which controls the app B and C in the future. I have a problem, where I would like to make a common fundament for both apps (the A app) and then load two other as a content of it. It would be as if I had lazy loading with a bundle fetched from a different place. I was thinking about three main possibilities:
Iframe
Single SPA project from github
using ReactDOM.render method
I am not sure if it is possible at all, beacuse there still may be a problem with React Router - does the inside app have access to manipulate the browser routing?
It is quite possible to split your react Application into multiple smaller react applications.
Suppose you have a react application such as an e-commerce platform . You can choose to write the cart Page using a separate react-App and the products page using another separate react app and integrate them together using Module Federation Plugin webpack/lib/container/ModuleFederationPlugin.
A good reason to do something like that would be to develop different parts of your application in isolation ..and they can be taken care by different teams altogether.
There is a udemy course that teaches you exactly that. Very much recommended. You can make react dependency as singleton to avoid several installs of react.
All 3 of these options you've stated are valid and can be used to share components but there are few disadvantages to each one, for example- iFrames makes it hard to create responsiveness, ReactDOM splits your app so that the different parts won't have the same global scope...
Module-Federation is the best and most efficient way to share remote components that i know of, here is a github link to a basic project.
The MF plugin makes use of webpack's abilities, which means that the shared components are being consumed as runtime objects of the app's scope, rather then as a promise of an iframe.
NOTE: Debugging and updating a Module Federation project is a much deeper task then debugging a create-react-app application, you'll need to share dependencies correctly and remember to update desired changes at all the right places all the time.
This is not possible. Each react app can only have a single package.json in the hierarchy. if you nest it, the app will fail and say you have several installs of react. what you should do is think more react minded and objecty. You can have a folder for common components to share inside src/. You can also have src/A which is one "app". src/B which is another.
What you described in your question is exactly what you should do, just dont think of it as a react app separation, rather a seperation of component and app inside the src folder. App A can be comprised of components from /components as well as App B.
When creating an app with create-react-app,there is only one index.html,does that means React can only handle one SPA at a time? What if I want to develop multiple pages? Should I create another SPA with create-react-app and then put them together after building each of them?
Update:
Parceljs can do that. here is docs.
You can use Parcel instead of Webpack (which being used in create-react-app) and it provide you zero config environment to develop web apps (using react or anything else).
Having multiple pages (instead of SPA) is not what most React environments had in mind [before - see update above].
You can have different page URL's using react-router or similar client side routing solutions.
If the concern is bundle size, there are solutions using webpack or parcel to lazy load each bundle whenever they needed or cache bundle (using service workers) and so on (Tree shaking, ...). (check Code Splitting in React Docs)
Other concern I might have in my brain is SEO, in this case you may find Isomorphic app (react server side rendering) useful which initialize first view of requested URL HTML and sends it to client, then client will load react and react will take control of UI. This will help Google (or other search engines) find your URLs fast and user experience in transitions between pages will remain seamless.
I have created a succesfully working React JS / Redux application on localhost. Now it is time to upload my app. The application is basicly a logger and a complicated line of calculations which runs on front-end. There are no saved datas, once the user refresh the browser the app re-starts. The app relies on several libs as boostrap in react, Redux, Modal, DOM to image saver etc.
How does one migrate such an application for web? Would You upload like a classical static HTML site + the compiled script? Or does the entire file structure must be uploaded to the hosting provider.
Thanks,
Koppany
There are multiple ways of uploading/hosting such an app.
Use webpack and bundle all your code. You will get two output files
index.html
app.js
You can then upload them to services like surge
[Note:-] More files can be generated depending upon your webpack configurations. But the basic idea is the same. Upload them all to the hosting service (like surge).
You can upload your code to codepen. You can then specify external dependencies in codepen and so codepen will take care of it.