might be question is duplicated ,even though my business case is little bit different since I need help from experts.
First time, I am using Micro frontend architecture in current project with help of single spa framework
with reactjs.
I have experience in reactjs with redux(thunk,saga) but in single spa, I am unable to intercept the provider with store in individual MFE root component.
anybody has used reactjs with Single SPA framework along with redux with individual MFE.
my all MFE are in reactjs only.
#reactjs #redux #redux-saga.
I have implemented in some time back, was using redux for inter app communication between MFEs as well.
Store was build separately in child app.
This store would be imported by the master app and registered in global event distributor in the master app.
class GlobalEventDistributor {
constructor() {
this.stores = [];
}
registerStore(store) {
this.stores.push(store);
}
dispatch(event) {
this.stores.forEach((s) => s.dispatch(event));
}
}
This GlobalEventDistributor along with the store will be passed as a custom prop while registering application.
let storeModule = {},
customProps = {
globalEventDistributor: globalEventDistributor,
...additionalProps,
};
try {
storeModule = storeURL
? await SystemJS.import(storeURL)
: { storeInstance: null };
} catch (e) {
console.error(`Could not load store of app ${name}.`, e);
}
if (storeModule.storeInstance && globalEventDistributor) {
// add a reference of the store to the customProps
customProps.store = storeModule.storeInstance;
// register the store with the globalEventDistributor
globalEventDistributor.registerStore(storeModule.storeInstance);
}
// register the app with singleSPA and pass a reference to the store of the app as well as a reference to the globalEventDistributor
singleSpa.registerApplication(
name,
() => SystemJS.import(appURL),
hashPrefix(hash, wild),
customProps
);
After passing as customer props store and GlobalEventDispatcher will be available in the rootComponent passed to singleSpaReact of child app. From rootComponent it will be passed as a prop to Provider
I have referred below repo while implementing it.
https://github.com/me-12/single-spa-portal-example
Note: Currently we have are migrating to Module Federation instead of using singleSPA you can try that too.
Related
I want to build a templating engine for user profiles. After picking a design, which might consist of HTML, CSS, and JS, I would like to be able to server-side/static render a users profile page using their chosen template.
I'm looking for a good place to start / for someone to point me in the right direction. Assuming there are templates already stored in a database, or saved as files to AWS, how might I dynamically load and render the template along with the users profile data using Next.js? What might be an optimal way of storing the templates?
Thank you,
Try use nextjs GetStaticProps or GetStaticPatch
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
https://nextjs.org/docs/basic-features/data-fetching/get-static-props
write this function in some NextPage file
export async function getStaticProps(context) {
//all logic done here will be rendered server-side.
return {
props: {}, // will be passed to the page component as props
}
}
It can consume a database within this layer, do not want to use an external API, in some projects I use the ORM Prisma to facilitate the process.
https://www.prisma.io/nextjs
// Fetch all posts (in /pages/index.tsx)
export async function getStaticProps() {
const prisma = new PrismaClient()
const posts = await prisma.post.findMany()
return {
props : { posts }
}
}
It is possible make ssr app with nested mobx stores? Problem is how serialize root store and restore it?
Example of my stores:
export default class RootStore {
session = new SessionStore(this);
ui = new UIStore();
}
export default class SessionStore {
serverActionChecking = new ActionStore(this);
}
If you are referring to the process of rendering content on the server, and then hydrating the same stores in the frontend (like Next.js), you could do something like this:
You could have a special function that creates your root store and depending on if the function is called with or without data, it calls the root store hydration method. Then the root store, after instantiation of the child stores, calls their hydration methods. Hydration data should be an object that has keys that correspond to the child stores, so you could just pass specific keys to specific stores.
function initializeStore(initialData ) {
const store = new RootStore();
if (initialData) {
store.hydrate(initialData);
}
return store;
}
class RootStore {
hydrate(data) {
if(data.childStoreOne){
this.childStoreOne.hydrate(data.childStoreOne);
}
}
}
class ChildStoreOne{
hydrate(data){
//do something with the data
}
}
Now all that is left to do is to get the hydration data to the browser. One of the solutions is to embed the data in the script tag and pass it to the initialization function.
I want to upload an image to Azure Blob Storage using React.
I've tried a lot of examples and none of them work.
The one that seemed the best was this one but still didn't manage to get it working on React.
What I'm trying right now is to use the createContainerIfNotExists method just to test and the error is Cannot read property createBlobServiceWithSas of undefined
My code is the following:
import AzureStorage from 'azure-storage';
const account = {
name: 'x',
sas: 'x',
};
const blobUri = `https://${account.name}.blob.core.windows.net`;
const blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri, account.sas);
export const createContainer = () => {
blobService.createContainerIfNotExists('test', (error, container) => {
if (error) {
// Handle create container error
} else {
console.log(container.name);
}
});
};
export default createContainer;
According to my research, because you develop A React application, we can not use the createBlockBlobFromBrowserFile method. We just can use the method in the browser. For more details, please refer to the document.
According to the situation, I suggest you use the other method(such as uploadStreamToBlockBlob) to upload image with V10 sdk. For more details, please refer to https://learn.microsoft.com/en-us/javascript/api/#azure/storage-blob/?view=azure-node-latest
I'm building an ordering app, where I do the backend with Laravel and the front end with both ReactJS and React Native
I want real-time updates whenever a customer posts an order and whenever an order gets updated.
Currently, I managed to get WebSocket running that uses the pusher API using devmarketer his tutorial.
I'm successful in echoing the order in the console, but now I want to access the channel using my react app
And at this step is where I am facing difficulties.
As I'm unsure how to create a route that is accessible to both my apps and how to access the channel through this route.
The official laravel documentation gives an example of how to access pusher but not how to connect to it with for example an outside connection (example: my react native app)
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'rapio1',
host: 'http://backend.rapio',
authEndpoint: 'http://backend.rapio/broadcasting/auth',
auth: {
headers: {
// Authorization: `Bearer ${token}`,
Accept: 'application/json',
},
}
// encrypted: true
});
window.Echo.channel('rapio.1').listen('OrderPushed', (e) =>{
console.log(e.order)
})
So my question is how can I access a broadcasting channel on my React apps?
ADDED BACKEND EVENT
class OrderPushed implements ShouldBroadcastNow
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $neworder;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct(Order $neworder)
{
$this->neworder = $neworder;
}
/**
* Get the channels the event should broadcast on.
*
* #return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
//return new Channel('Rapio.'.$this->neworder->id);
return new Channel('Rapio');
}
public function broadcastWith()
{
return [
'status' => $this->neworder->status,
'user' => $this->neworder->user->id,
];
}
}
Are you using the broadcastAs() method on the backend?
It's important to know this in order to answer your question properly because if you are, the Laravel echo client assumes that the namespace is App\OrderPushed.
When using broadcastAs() you need to prefix it with a dot, to tell echo not to use the namespacing so in your example, it would be:
.listen('.OrderPushed')
Also, you don't need to do any additional setup on the backend in order for each client application to connect to the socket server unless you want to have a multi-tenancy setup whereby different backend applications will make use of the WebSockets server.
I also use wsHost and wsPort instead of just host and port, not sure if that makes a difference though
If you can access the data on the frontend by simply console.log'ing to the console you should already be most of the way there.
The way you would actually get the data into your react components depends on if you're using a state management library (such as redux) or just pure react.
Basically, you would maintain a local copy of the data on the frontend and then use the Echo events to update that data. For example, you could have a list of orders in either redux, one of your react components, or somewhere else, that you could append to and modify based on creation, update, and deletion events.
I would personally create an OrderCreated, OrderUpdated, and OrderDeleted event on the backend that would contain the given order model.
class OrdersList extends React.Component {
componentDidMount() {
this.fetchInitialDataUsingHttp();
//Set up listeners when the component is being mounted
window.Echo.channel('rapio.1').listen('OrderCreated', (e) =>{
this.addNewOrder(e.order);
}).listen('OrderUpdated', (e) =>{
this.updateOrder(e.order);
}).listen('OrderDeleted', (e) =>{
this.removeOrder(e.order);
});
}
componentWillUnmount() {
//#TODO: Disconnect echo
}
}
Where would I store the API URI centrally in a ReactJS Application? The URI only changes between environments and should be easily configurable (i.e. through environment variables).
I have looked into this package and into the new Context API, but am unsure it's the best way to achieve this. I have also looked into dotenv, but I don't like that I would have to use process.env.REACT_APP_SERVICE_URI in every component that wants to access the API. What is the usual approach?
I am not using Redux.
I don't think you need an external dependency to do that.
I usually create simple module called api-client.js, which is responsible for calls to external API and defining endpoints.
In your case you might have:
import axios from 'axios' // some http client lib
const endpoint = process.env.REACT_APP_SERVICE_URI? process.env.REACT_APP_SERVICE_URI : 'https://foo.api.net/'
export default {
getAllProducts () {
return axios.get(endpoint + 'products').then(response => {
log.debug(`api client fetched ${response.data.length} items`)
return response.data
}).catch(err => {
log.error(err.message)
throw err
})
}
},
getProductById (id) {
...
},
}
You read process.env.REACT_APP_SERVICE_URI only once.
I like to put this module inside api directory (and any other API related stuff).