I have a pretty traditional ASP.NET MVC application. I would like to start using a Redux store in the application. One obstacle that I am facing is that much of the initialization happens in JavaScript (initial state, reducers, etc.). I can trace a setup ReactJs and Redux application through the startup of Index.js. I have also seen multiple examples of using VS to create a React/Redux application but unfortunately for me this is a "black box" of setup using webpack that I don't want to add to this project. Just Redux. But I am not sure where in this existing application the initialization for Redux should be as that startup seems to be in files like Global.asax and obviously I cannot make JavaScript client calls there. How do I insert Redux into an existing ASP.NET MVC application?
Related
I have a huge application which was developed in vb.net.
Our goal to convert this application to C# micro services, but in incremental manner.
So what ever new functionality that we are going to add to the existing application, we are planning to create them as a separate Micro Service with micro front end UI.
Since these are small api's with UI, I am trying to understand whether we can implement this API + UI in a single ASP.NET MVC project as a web component.
I tried 2 options:
Created an ASP.NET MVC application and added angular to same project. Is this better way to mix MVC and Angular in a single project?
I tried creating a sample ASP.NET MVC application with razor ui. But didn't understand how I can use this as a microfrontend component.
I am good in ASP.NET MVC and C#, but not that great in Angular. So planning to create microfrontend component in ASP.NET MVC razor.
Is it possible to do this? As I have to use this micro ui component in vb.net, I need this to be generated as js file to use further.
I have a functioning Blazor WebAssembly (WASM) component which is ASP.NET Core Hosted and contains three projects: client, server, and shared. The client-side component connects to a SQL Server database using Web API endpoints contained in a controller file within the server-side app.
I would now like to share this component with multiple apps. Would the best practice be to use a Razor Class Library (RCL) or to just keep the component in project format and directly add/reference it within projects that will use it? If an RCL is recommended, how do I handle the controller?
I found a partial answer to my question. It appears that prior to .NET 6 it was possible to share Blazor components by sharing their projects. However, with .NET 6 this now generates an error and Razor Class Library's (RCLs) are the recommended method for sharing WebAssembly components. Source: GitHub aspnetcore issue #36732
I also posted to MSDN and to date have been unable to find a way to combine client-side WASM classes and server-side controller classes into a single RCL. From what I have learned so far, I can see two options:
Use an RCL for the client-side component and a regular class library (or second RCL) for the server-side controller. (I have not tested this).
Convert to a server-side Blazor project. This is the solution I ended up using. It does not require a Web API/controller and sharing components via RCL works well. Bonus, coding/debugging is easier and the project loads faster. This solution is working well for my present needs.
In ASP.NET Core 2.2 it was rather straightforward to have an ASP.NET Core website with React front-end and working server-side rendering - since SSR was supported out-of-the-box in the ASP.NET Core+React template, which internally run the NodeServices to executed the javascript using node.
However with ASP.NET Core 3.1 things are not so easy anymore, mainly because the SpaServices and NodeServices classes are declared as obsolete and will be removed with .NET 5, according to this link. So no javascript execution with node from C# anymore.
Now, besides the information, that the server-side rendering suggested in ASP.NET Core 2.2 is now obsolete, the only suggestion how to go forward I found is from above article:
To enable features like server-side prerendering and hot module reload please refer to the documentation for the corresponding SPA frameworks.
But if I understand correctly, to have react-based server-side rendering, I need to have a node.js server which will perform the rendering on the server-side.
Does that mean, that if I want to have an ASP.NET Core 3.1 website with a React front-end with SSR - I should have one ASP.NET Core project for the WebAPI, and another separate Node.JS project for the front-end with SSR?
And then deploy them on two separate Azure AppServices?
Is that the recommended architecture for ASP.NET Core + React projects?
I came across exactly the same problem. It took me a few weeks to create a new set up where frontend is separate from the backend.
I published the prepared boilerplate on GitHub and wrote a blog posts that explains how to enable server-side rendering with ASP.NET Core and React in details. The solution is a combination of CRA (Create React App), Storybook for CRA and a standard ASP.NET Core MVC template.
To make a long story short I built my custom asp-prerender-module and asp-prerender-data attributes. They communicate with an Express server based on Node.js to get the rendered HTML. Thereafter the HTML served to the browser gets "hydrated" with actions.
After spending some time researching, that are the current options:
Live on .NET Core 3.1 with the NodeServices with an obsolete flag
Create separate projects for back-end (asp.net) and front-end (node.js)
Fork/copy NodeServices and maintain by myself
Hope that a there will be a community driven fork of the NodeServices in the comming months before .NET 5 release were it will be removed eventually
You can use a new library to invoke JS from .net which is
https://github.com/JeringTech/Javascript.NodeJS
You can use SSR on .net with the above library Razzle described here:
https://dev.to/pruttned/integrating-react-into-asp-net-core-using-razzle-with-all-the-goodies-like-ssr-routing-code-splitting-and-hmr-part-1-2-34g8
BUT at the time of writing I find that there is no information on how to deploy such an application.
Reactjs is working on the Server component to stream partially rendered UI in the form of JSON data to clientside. https://github.com/reactjs/rfcs/blob/2b3ab544f46f74b9035d7768c143dc2efbacedb6/text/0000-server-components.md
I think for future integration of Server component, it needs a native NodeJS process to handle server rendering.
I am trying to build an Enterprise System that will evolve over time with features being added as time progresses.
I am planing to go with ASP.Net Core microservices architecture with Angular for the UI. I am unable to find a sample that shows how we can introduce new modules without changing any existing angular code.
I was able to do this in the traditional winforms applications using technology like MEF and dropping the dll in to a folder that shell watches and loads.
Looks like there is no such example using the Angular framework. So I was curious if its even possible to achieve an architecture as shown below?
Module are the asp.net core services that serve the angular files that the shell can render and Service are the logic services that are used by the applications themselves.
I did see this post, that is close to what I want to do, but I am not sure if this is even the right solution being discussed.
Any pointers appreciated.
I tried to implement a plugin architecture making use of ABP, Angular and ASP.NET Core: https://github.com/chanjunweimy/abp_plugin_with_ui
Basically, I developed angular plugins using different angular application, then I dynamically add them together.
More Information on how I achieve it:
I have 2 angular-cli application, 1 is the main angular cli application, and another is the plugin angular cli application. The problem we are facing in Angular-cli plugin architecture approach is how we integrate them.
Right now, what I did was, I run ng-build on both of the applications, and put them into a "wwwroot" folder, which then hosted in a ASP.NET core 2.0 server.
abp_plugin_with_ui is a repository which works on developing a plugin which contains both the backend and Angular cli. For the backend, I made use of the aspnetboilerplate framework, which the frontend is developed using multiple angular-cli application.
To have the main application integrated with the plugin application, we have to run "ng-build" on both of the application (note that we have to change to href of the plugin application as well), then we move the built contents of plugin angular cli application, to the main application "wwwroot" folder. After achieving all this, we can then run "dotnet run" to serve the ASP.NET Core 2.0 Web Application to host the static files generated by "ng build". In this approach, plugin Angular UI applications are independent from the main Angular UI application: they are connected using IFrame.
Recently, I realized that we could create components on the fly, which means that maybe it is better to download the "NgModule" and create that module dynamically instead. This option is better because plugins UI would directly integrated into the main application UI. I am still trying out this method.
Another option suggested by #bruno was to develop the UI in SOA instead. This means that, we could choose not to separate the UI into plugins, but separate them into modules as independent service instead. You need to have a so-called "IT/Ops Client" that could help you manage what view to show in the UI, and the main UI is just a frame/template that will show what "IT/Ops Client" want to show. Using this way, we could register these services, and chose what service to be used. This is the microservice architecture and might be closed to what you want. The microservice expert Udi Dahan has a post blogged about this (link: http://udidahan.com/2014/07/30/service-oriented-composition-with-video/)
I have an application which is built in ASP.Net WebForms and Silverlight.
There is another WCF services application which is accessed by silverlight part of my application.
Now I have to Re create the whole application in an MVC Single Page Application(SPA) and of course the WCF one because now I would need Web API for that.
An initial solution comes into mind is to add a web api project into wcf services application and start creating web methods there and call wcf methods from there if that functionality was already there.
And for webform start a new spa with mvc project from scratch and use durandal or any other spa client framework(hell of coding).
Any useful solution/advise? as I am looking for simplicity.
I searched around and found some questions but really did not helped as they are about merging with existing apps.
Note: application is a large application with a lot of functionalities
You have to decide how confident your team is with client side frameworks. Development of Single page applications may not be easy in the beginning, but you will get used to it very quickly. It's very important to give your team the right training.
In my opinion, Durandal is the simpliest, most elegant and complete framework to build enterprise level SPAs. It is important to know how knockout, requre and durandal's router and composition work. For data centric application I would use breezejs to manipulate and cache data on the client side and request it from the server side. Breeze works best with Entity Framework on the server side, but it's not necessary. If you can use Entity Framework, it will simplify your development, because it can generate metadata of your database structure for breeze. If Entity Framework is not an option, metadata can be written by hand.
I would make server side as thin as possible. Serving data from your database using web api with ORM of your choice and some cshtml pages.
Durandal Get Started is a good place to start.
Durandal Auth is a very good template for enterprise level SPA. It may not suit you completely, but you can use it as a guidance to build different modules of your application.
Breeze samples I suggest you consider using breeze. There are good courses available on pluralsight.
Knockoutjs has good training on data-binding.