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.
Related
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
I am making a Single-Page React App [website]. Therefore, most of the links are on the same page, with ID #s, and that works fine for now.
The WIP present version of this particular app in question can be found here, for reference:
https://iworks.netlify.app/
In the Footer component, I have made a 'Legal' links' UL with Copyright, Privacy Policy and TOS, as standard HTML Files. These three basic HTML Files are placed in a sub-folder in the SRC folder itself, in production. This sub-folder is named 'html', and the links are set to open in a new tab.
The question is, how do I make React to recognise and build this sub-folder in the app, and to open these links relatively?
[Since these pages are not 'built' into the app, they certainly do not get included in the Build either. Now, one simple solution is definitely to just put them manually into the build, later on; but I also want to learn the fool-proof method to do this correctly. Hence this enquiry.]
Most of the discussions relating to React Routing on the web seem to either specify multi-page apps, setting components to open separately; or to place the entire react app in a sub-folder. However, I just want to manage these three links (i.e. HTML pages in 'html' sub-folder) as independent entities (for now).
What would be the most efficient manner to achieve this?
Duplicate of Is there a way to link non-react html files in a react app?
Just place your html files inside the public folder of you create-react-app application.
If you are not using cra, just place the html files in the folder of your web server set up to serve static content.
I made the shift from Vue over to React and I enjoy using the CRA tool to make interfaces on SharePoint. My normal methodology involves building the app and linking the build index.html file to a SharePoint Content Editor Web Part (CEWP).
I recently needed to have two CRA builds on the same page and I am running into the issue where control of the DOM by one build overwrites the content of the other build on the page.
It is now my understanding that multiple CRAs cannot exist on the same page. I do not want to eject my apps. In my research, it seems that webpack is assigning this["jsonpFunction...] to both apps. One suggestion I read involved finding and replacing all instances of this in one of the apps and changing it to "window.jsonpFunction...". I could not get that working either.
I want to continue using CRA and linking the index.html of the builds to different web parts on the same page.
Any suggestions appreciated.
Very Respectfully,
I solved my SharePoint on-premise issue with multiple React builds working in separate web parts by doing the following.
In package.json ensure the "name" field is unique. Also, ensure you have a "homepage" variable set to the location you intend to copy the build index.html file.
In index.js set the document.getElementById to a unique name not used by other React projects that will exist on the same page.
In index.html make sure the name used for the root div is identical to the one used in step 2 above.
In the manifest.json, provide a short name and name for your App. This step doesn't seem mandatory but I did it for consistency in my projects.
Now you can build and copy to SharePoint. I use Content Editor web parts with each pointing to the applicable index.html file for the app. Works great!
Every time I search about this I get something related to react router and lazy loading. Isn't there a way to create an entirely separate page independent of index.js?
I created admin.js within my react project. If I go to http://localhost:3000/admin, it still loads index.js. I quite do not understand this bit of react if it is possible.
No, this is not possible without router. And here is why: your index.js has nothing to do with what is loaded in the browser.
When navigating to http://localhost:3000 your dev server actually serves a index.html to your browser. In it is a reference to a bundle.js (or however you name it) containing a bundled version of your .js files. So, http://localhost:3000/admin references to a admin.html which does of course not exist (unless you create it). But, doing this has several disadvantages over react-router. Because at build (or bundle) time index.js and admin.js will be two separate apps. Two separate bundle.js. Twice the amount of work needed to package it. Twice the amount of (maybe generated) .html files. Means no shared data at all. Twice the loading time in your browser. And many more.
I'd opt for react-router ;)
Edit: Of course it is not exactly twice in the points mentioned above. I am aware of that. But you get my point.
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.