I need to create some iframe, but there is a lot of components from the current project that can be used.
So the question is how to configure webpack to create multiple builds, i.e one is standard build and second is iframe_build.
Reason for this approach is the reusability of components from the main project.
Is this even possible or I will need to start a new project from scratch and copy components from the main into a second project?
So after short investigation i found that
best solution for keep iFrame generation on main project and reuse components without create new project is to create public route and create component that can be used to show content in iFrame on other domain.
Related
I am currently working on multiple projects(that means each project is in different repo) which is using storybook(one common repo which is getting redundant in each project). I want to publish or do want to place that somewhere on the cloud so that, code doesn't get redundant every time.
I am using storybook in my reactJS project.
I managed to successfully create Laravel packages that expose API endpoints. These packages have their own databases, their own migrations, their own seeders, and their own models, controllers and routes.
They can be installed by teammates and they won't clutter the main app's directories.
Now I want to create a base layout for admin panels. Here are my constraints:
This base layout should be in React (our UI stack is decided to be React)
It has to remain inside the package folder, inside vendor folder. Reasons:
Because if we publish its content to main app, then git add adds them to the main app.
Because we want developers to only focus on their tasks, and not see the base layout at all.
Because we want developers to not change the base layout, both intentionally or accidentally.
Base layout (React admin panel) is developed and maintained by another team, in another git repository.
I managed to create a package that contains HTML, CSS and JavaScript. And I could use them in the main app, but only through publishing them to the main app.
But I'm unable to make the main app access the index.html from inside the package for example. And I can't make that index.html load CSS and JS from inside the package.
How can I tell Laravel to read and load web technologies, form inside the package?
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!
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.
I have an existing angular application and I want to start changing some of it to a vueJS application.
My application, in dev mode, loads all scripts in the main html file (in production mode its bundled into app.js but I want to start testing to dev mode).
I want to change on of the states to use vue, so I read it's possible in the following way: https://medium.lucaskatayama.com/migrating-from-angular-to-vuejs-71277cdc3dd9
However, I want to use a .vue files syntax and I don't know if that's possible without using webpack or any other bundler in dev mode.
So my question is - Is that possible? Can I use .vue files inside my ng app with the current configurations? Furthermore, is there a nice way to webpack only the vue files and components (even though I have to initialize them inside and angular controller as it seems).
If there are any good tutorials for adding vue into angular app, I would love to get them, as I failed finding good ones.
Thanks
ngVue member here :)
At Dawex (the company I'm working at), we're using Vue within a big AngularJS application, with ngVue. It's in production for several months now and it works very well. You can find more informations on this article I wrote before last summer: https://medium.com/dailyjs/how-to-migrate-from-angularjs-to-vue-4a1e9721bea8. Hope that helps!
That could be tough, because the build for the vue code will basically be a separate application.
One thing you could do is build them as completely different parallel apps, use two build steps, include two javscript files and then use window.postMessage to communicate between the two.
So for example your current application will come to a point where a particular div is to contain vue code instead of angular. You could then post a message from your angular code, telling the vue app to load into that div, e.g.:
window.postMessage({ app: 'vue', bind: '#vue-content' })
The vue app, instead of binding on DOMContentReady would listen to window events, and then bind to the element it receives. It would then communicate back to the host app by posting messages also. This would keep them fairly seperate and allow you to build them independently.