I have a asp.net core web application. My application has some reactjs components, that runs client side.
In my asp.net core views, i use IViewLocalizer to localize my pages and it works just fine.
I have found some projects like react-localization to handle this on reactjs. To use it, I need to do one of the following:
In my view create an object with my resources and give it to react-localization
Create an endpoint that return my resources, call it inside reactjs component and give it to react-localization
My question is, what is the best approach to bring localization to reactjs components?
When i posted this question, i had a simple react application with less than ten resources.
I chose the number one option, in my view create an object with my resources and give it to react because it is a more simple solution.
On another big react project, i chose the number two option: create an endpoint that return my resources and call it inside reactjs. It is a bit more complex, but all logic is inside reactjs and the html does not have a giant script object with all resources.
Related
My company has a fully functioning ASP.NET MVC app (with Razor views).
They want to move to using React on the frontend.
Now I understand how to inject a React app it's just they want to do it bit by bit. Replace couple of components on the page then maybe the whole view and the move to another one.
Normally React creates a bundle that you just import to your index file. But that's just one endpoint. Not sure if this would work in this scenario.
We have an existing legacy laravel application and like to convert it into a react application for this kind of application we want to migrate but can't do in a big bang way. what is Ideally needed? make a react application and put laravel application in an iframe and then migrate one by one section? thinking of using httpclient and parse dom.
do we have a better way?
Well, firstly you need to actually analyze the scope of work that needs to happen.
Ideally, you migrate component of your Laravel app step by step to React app.
I have a complex requirement, where we have an asp.net webforms site we want to try and upgrade in a step by step way. We are considering using React (frontend, with asp.net core backend) for this purpose. The website has an iframe in the centre, and we want to try and replace the old content with the new completely separately hosted React content. This needs to occur after clicking a link on the asp.net webforms page.
I managed to create a ‘Create React app’ website prototype and it was simple to load it into the iframe by linking directly to the React website. I came unstuck when I wanted to try and add an authentication token into the header (oauth2 with openid connect for use with IdentityServer). The only way I could see to do this was to try using javascript to add the header by making an XMLHttpRequest object (or I tried also using the Fetch API) and this partially worked but not everything was correctly loaded.
I see for example an answer here How to embed React App into another website which I assume is the best way to add the website into an iframe.
So, I can’t find much on the internet about dealing with authentication… I guess because asp.net webforms are so old by now, but I assume others have wanted to do something similar before. The question I have, is what would be considered to be the best way to do this? I don’t know if I’m going in completely the wrong direction.
We have huge enterprise application written in angularjs.
Now we have to migrate to angular, so we have ruled out an option of hybrid approach angular suggests using "ngUpgrade".
So now we are creating a new application in angular, which means we have 2 applications "angularjs(old)" and angular(new).
So to switch between these two applications can be done without refresh using angular-spa.
I was trying to find if there is another framework, where navigating between two apps happens without refreshing(without refreshing entire page by navigating to new html).
Possible solution:
Use a new Angular application as a wrapper, then just use iframe to show the application you want depends on the context - old or new. The issue you might face is changing the iframe, but I guess you can use postMessage to communicate between the apps.
A bit more sophisticated:
Use Angular Elements to create your hybrid app.
I really recommend you to watch Erin talks from the last Angular connect about how Google made the migration from js to Angular.
I've recently tried the micro-frontend architecture described here:
https://www.martinfowler.com/articles/micro-frontends.html
Each app on different code repository, runtime build and quite easy to implement. Take a look :)
I am trying to create a complex CRUD React Application using Gatsby JS. The ability for the user to Create Posts, Edit Posts, Delete Posts will also need to be available. This app will have many users. We are not using a third-party CMS. Everything will be done within the Gatsby App. There will also need to be several different pages that will need to handle state, display, and sort the different posts based upon options. My question is, is this sort of project overload for Gatsby JS since it breaks the page model? Gatsby doesn't have a native way to generate dynamic routes or views, only pages. Its sort of a social networking app, is Gatsby JS the wrong tool for the job?
You can create pages "dynamically" using the createPages API.
https://www.gatsbyjs.org/docs/node-apis/#createPages
There's also a great series of videos from Scott Tolinski that demonstrate the use of this API.
However, GatsbyJS is a static static site generator, it's designed for performance and more content-based sites. The only way you're going to get CRUD functionality is through API calls from the front-end which could have some security implications that you need to consider.
As an alternative, you might want to take a look at Next.js. Same kind of idea but the pages are served by Express.js rather than just served off the file system so you have a lot more options for more dynamic sites.