I have an ASP.NET MVC Framework project. It's time to move the client part to modern React. The project is very big. How to organize all this correctly or can you share the project on the GitHub?
Foundation task. Do it together with ASP.NET MVC. What would both fronts work together on the same site. What would create the React routing and not break the current ASP.NET MVC routing?
If you want to use React or any SPA framework it means that you need to use SPA(Single Page Application) approach of building WEB application.
Please see more about this here:
https://developer.mozilla.org/en-US/docs/Glossary/SPA
Here are general advices:
Backend: Since you use ASP.NET MVC it would be flexible and easy to migrate your backend part to ASP .NET WEB API ( build REST endpoints). As contrary to MVC Razor pages approach, WEB API Controllers will return data, not a view.
Of course you need to revise you logic at backend side and transfer from Razor pages required pieces of code that related to handling data etc.
Frontend: Create a simple React application(here you can see the guide):
https://reactjs.org/docs/getting-started.html
You React application will send requests to the new WEB API Controllers not to MVC Controllers. Once you receive data from the backend side, store it and handle it at your Client-side.
For storing your data I highly recommend you to use Redux Store:
https://redux.js.org/api/store
Routing: React has router https://v5.reactrouter.com/web/guides/quick-start using this router you will render and manipulate you pages on client side without page-refreshing according to the SPA conception, hence, no need to worry about your MVC routing.
Example of application you can find at official page here:
https://reactjs.org/community/examples.html . But I think once you complete the guide, this question is going to be skipped.
Related
I want to learn React.js, but most of the tutorials show how to integrate ASP.NET Core Web APIs with React.js, while I did not find any tutorial for using React.js with ASP.NET Core MVC. Any advice? Can I assume that React.js works only with ASP.NET Core Web APIs, where React.js is used to consume the JSON returned from the API?
I want to learn React.js, but most of the tutorials show how to
integrate ASP.NET Core Web APIs with React.js, while I did not find
any tutorial for using React.js with ASP.NET Core MVC. Any advice? Can
I assume that React.js works only with ASP.NET Core Web APIs, where
React.js is used to consume the JSON returned from the API?
No, the react.js could work with Asp.net core web API and the Asp.net core MVC. In this scenario, the react.js act as the Front-End, and the API and MVC controller will act as the backend.
To answer the question more clearly, we need to understand the concept of front-end and back-end separation. As we all know, in the MVC pattern, it can be divided into data layer, logic layer and view layer. This view layer is what we call the front-end, which is mapped to the code level, namely, HTML, JS, CSS and other code files. The data layer and logic layer are more back-end parts. These files will be in a project and will not be developed, tested and deployed separately.
For the Front-End separation application, front-end and back-end are separated in different projects. The front-end has special front-end developers to develop and test, while the back-end has back-end developers to develop and test. They interact with each other through API.
So, to create the Front-End separation application, most developers will choose to create a React.js(Angular.js or Vue.js) application as the front-end application (because the React is a JavaScript library for building user interfaces) and use Asp.net core project as a back-end.
To use the React.js with Asp.net Core MVC application, you could use the React project template create a Asp.net core application (choose the react template when create Asp.net Core application via visual studio), then, in the React page, you could call the MVC controller to get data (it is similar with the API), after that render the data. Like this:
We use Web Api with angular framework or react so that we can bind data coming from the database with the angular or react controls in easy way by just calling HTTP services.
If you are planning to use normal mvc web application, you can do that, but real question is how will you transfer data coming from database in your mvc controller to angular or react components
I have two isolated applications one as a Web API using .Net core 3.1 and another one for Client-side using React and the two apps contact each other by HTTP requests now the challenge is I wanna integrate both of them as MVC so what is the recommended steps to do the integration.
If you'd like to migrate your existing WebAPI backend and React frontend apps to ASP.NET Core MVC, you may need to implement these functionalities from scratch in your new ASP.NET Core MVC project.
You can check each React component and the data passed/handled in that component, then create corresponding controller action and view page to implement same in MVC.
Note: normally WebAPI backend response and return data to React frontend, then we handle data on frontend and render it to expected html. In MVC, controller action usually return view result and pass view model data to view for rendering the web page.
For more information about "Passing data to views", please check this doc:
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/overview?view=aspnetcore-5.0#passing-data-to-views
Besides, partial view and view component in ASP.NET Core enables us to implement a reusable and modular unit, we can implement reusable rendering logic as partial view or view component, then invoke it in other view.
For details about partial view and view component, please check these docs:
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-5.0
https://learn.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-5.0
I’m new to React JS and would like to following on the selection of the presentation layer App project. I’m using ASP.Net core API survives for backend. I’ve found mainly 2 ways to create the frontend app project.
Option 1 - Create a react app using Node command “npx create-react-app” and working on the Visual Code without any C#.Net components and call the API services.
Option 2 - Create an ASP.Net Core MVC Project and add ReactJS.Net and continue working (https://reactjs.net/tutorials/aspnetcore.html).
Following are the questions I’m having.
And If I follow the option 1 path, will it be difficult to manage the app security, routing, authentication and authorization etc.? Will there be any added support from ASP.Net Core in terms of handing security, routing, authentication and authorization?
What are the benefits of taking option 2 approach?
I would like to go for option 1 approach as setting up a pure JS app for frontend what are the challenges that I might face.
Thanks.
I am trying to integrate Angular with Django. I have 2 approaches which one is the best way:
Build a separate angular app and serve it's static files to django to render. In this way the routing and rendering everything will be handled by Angular.
Or to build templates in django using Angular directly and use MVT architecture of Django only.
Which is the correct way from architecture point of view? If not these two please suggest any good approach.
I'm not using AngularJS (actually I'm using VueJS but it's kinda the same) but here is what is usually done :
You do your models as usual, using Django. It defines your database structure.
You build an API that exposes your datas. For that you can use DRF (Django Rest Framework) for a REST API or graphene-django to build a GraphQL API)
You code components to build pages. And you retrieve your datas to display from the API.
For my project, I personnally use :
Django
graphene-django for a GraphQL API
Apollo Client to fetch data from the GraphQL API
VueJS for the frontend components
There are lots of tutorials on how to combine all of these so I guess there are some for AngularJS too.
You should be able to do something similar with AngularJS.
Finally, it is more like the first approach that you described. You'll have some build step that will create a bundle of files with a index.html or similar. The thing to do is to tell Django : "Hey, for any URL, point to that file".
Note that the thing I'm describing is for building a SPA (Single Page Application).
Currently I have an application built with Angular 2 (all the front-end side) and Symfony 3 (web framework) . I have defined each view as an Angular application.
I think it's the time to migrate to a Single App but I have some questions before I venture into the lion's den.
If a user change manually the URL, of course, they, should enter to the requested URL, but how can angular know which url is trying to open?
I should create multiple controllers or only one that catch all the requests?
If none of above are the right way, please, can you suggest any way to do it?
Thank you so much.
If you're trying to build a Single Page application, it means that your routes will be managed by your front-end, here by Angular 2 via #angular/router.
Symfony can then be only used as a back-end web service (i.e. a Restful API) that will answer to your front-end calls via JSON responses. Depending on the size of your API, you may wish to use FOSRestBundle for that purpose.
So you don't have to worry about Symfony routing interpretation since your urls will be managed by Angular router. Symfony routes will be called directly by your Angular application to get/post/put/delete/patch your back-end data.
UPDATE
To answer you comment, a user who directly enters a URL will simply see the page you linked to this url via Angular routing, there is (almost) no difference between front-end and back-end routing.
If you want to dive deeply in how hash routing works in javascript, you can check this article.
To see a real-life example of a SPA with full Angular routing, ga.me is a good start.