What we want to do:
We have two projects:
A consumer focused frontend
A business focused dashboard
The frontend uses cool custom styling, while the dashboard is rather boring. The idea is that you can edit and create objects in the dashboard and then preview them in the styling of the frontend (imagine setting up an amazon product and then previewing it as the product page). Ideally we would also like to offer live editing, meaning you see the proper rendered product page and you can edit the information live.
Our Setup
Two separate repositories
Both use React + Tailwind
There are not many custom CSS classes as everything is styled via tailwind classes in the code
What would be the best solution?
I have a couple of solutions, that might work with more or less success (e.g. sharing components via bit.dev). Did someone built something similar or could recommend some best practices?
Depends on what is the best solution for you. What is best for you, might not be the best for me, or the other way around.
Bit is a way to share components. Components are isolated pieces of functionality (UI, Hooks, Themes, whatever) That can be used and consumed across several projects.
You could totally have a Bit workspace, where you design, create and edit your components, export them once finished, and consume them in both your repositories.
bit new react my-shared-components-workspace --default-scope LeonardCompany.LeonardRemoteScope
cd my-shared-components-workspace
bit create react shared-button
# edit your button
bit tag -m "initial tag" shared-button
bit export shared-button
In your repos:
npm install #bit/LeonardCompany.LeonardRemoteScope.shared-button
Want to update the button? Edit it again in your workspace, export, and update the projects. Ultimately, those projects could be App components too.
Let me know if it helped.
Related
I work on a large project built on Magnolia CMS and FreeMarker templates and I want to add React to it. Is it possible to integrate React components and grow gradually until the whole project is React based? I looked for this information but the resources are quite limited in this area.
Have you had a look at this one? https://docs.magnolia-cms.com/product-docs/6.2/Developing/SPA-development-and-Magnolia/Mapping-between-Magnolia-and-SPA-components.html#_mapping_between_magnolia_and_reactjs
Basically, you can do the mapping between Reach and Magnolia components as described above.
Recently I've joined a new job and they are working with Salesforce. They have all pages with APEX and I propose to migrate to Lightning components.
I've created the first 7 components and I'm using Atomic Design Methodology (https://atomicdesign.bradfrost.com/chapter-2/) to develop these components.
I want to implement stories (with Storybook) or another similar library to document and put examples of each web component.
My question is... Is it possible? I try to install Storybook in the project and isn't working. The question is simple, whether or not you can. And if not, if you know any alternative to it.
Thank you!
In order to use Storybook, you will need to follow the provided Storybook documentation for lightning "Web Component" rather than the other available options like React and configure your VS Code to work with your SF Environment. Also, you might want to look into downloading the lwc-services, lwc-webpack-plugin and mo-dx-plugin dependency.
My story:
I want to launch very quickly one page, but I am really bad at CSS. I know react and wanted to get better there so I bought two application templates from themeforest. One is landing page, another one is kind of a dashboard page. All styled, independently works great. Now I would like to integrate them into a one application, so when user clicks on "login" in landing page he will be redirected to the dashboard application login page. Both applications are indepented. Both are made using CRA. Backed will be writted in .NET.
How should I do this? What are the best ways to do this? I could "copy-paste" some of the files of the smaller application (landing) to the dashboard app and change the root of the react, this is doable but will take some time to move everything, and build properly. Maybe there is another way that you can think of?
Most of the react developers(not good in CSS) will be in a similar situation. There is no readily available solution I can think of. I suggest you to manually go through the landing.html and dashbaord.html and split it into 2 react components minimum. You mentioned that you know react, so it will be easy for you. The toughest part for you will be resolving CSS class conflicts. The two HTML files might be using the same classes. Here you need to go case by case or change the names of the CSS class for either landing-style.css file or dashboard-style.css file.
Time to learn CSS basics. Good luck with your CSS learning.
Why to merge the codebase, instead deploy them separately.
For example:
Let's deploy landing page to www.example.com and dashboard to app.example.com.
Once the user clicks on signup/sign-in just redirect to app.example.com.
This way you can focus on important aspects of each application.
Landing page for SEO and dashboard for new features.
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.
My team is creating the administration panel of a CMS using React, Typescript, TSX and Webpack. Each page of the administration panel has been created as a React component, and each page contains many other child components (one for each section).
The CMS distribution currently includes a bundled version of the javascript needed to run the web app, but not the original TSX files.
Now, we would like to make it possible to the developers using our CMS to extend the web app by
1) Injecting additional sections into the UI using a "slot-fill" approach
2) Possibly even overriding the existing sections rendering a different component in the same place.
<div>
<SidebarComponent />
<Section1Component />
<Section2Component />
// How to inject a possible PluginComponent here?
</div>
From the research we've conducted so far, there seem to be no "official" way to do this, so I'm wondering what would be the best approach in this case.
I am facing the same issue where I need a component from a plugin to interact with a component from another plugin with a hook system. I have a created a small codesanbox with the same approach adapted to your need.
Basically the approach is to create a injectedComponents.js at the root of your plugin that specifies in which plugin and area your component needs to be injected.
Here is ademo
single-spa has some good options in order to achieve this.
Please see if it can be help for you.
Microfrontends
Parcels
I am late to this but
Just create a utility class with registry function, and register each component to the registry (just dictionary of key value pair, where key is a constant and Value is the component). T
Then when you display a component in your base app, get it from the registry using a key. Then once you publish this whole base app as package ( make sure to export the utility registry). A user can register a component with the same name and override the default component.
For communication between totally independant components, you can use and EventEmitter