What if I have React and ASP.NET Core Web API projects created using the React and ASP.NET Core template, where the React project folder is a sibling to the Web API project?
I want to add another ASP.NET Core Razor pages-based project that will primarily serve Razor-rendered pages, but for some sections of the screens (like a chat interface), I want to render those parts using the React project.
This can be seen in this video:
So, what should I do in this case to ensure a good development and production experience? Can the React project be configured so that its development and build/production artifacts are available to this ASP.NET Core web project with Razor Pages, where some of the pages will include React components from the sibling React project? I want the majority of pages to use Razor Pages rendered on the backend, while only specific parts (like the chat interface) will use React. Additionally, I need to enable routing to work as follows: for pages with React routing, the routing will happen on the client-side, and for others, they will be redirected to ASP.NET Core Razor Pages.
ASP.NET Core web project with Razor Pages which would contain razor components could make http calls to the third project (Web API) and it would be possible for some pure react pages to make http calls when rendering some dynamic content or sending/posting some content.
What if I have React and ASP.NET Core Web API projects created using the React and ASP.NET Core template, where the React project folder is a sibling to the Web API project?
I want to add another ASP.NET Core Razor pages-based project that will primarily serve Razor-rendered pages, but for some sections of the screens (like a chat interface), I want to render those parts using the React project.
This can be seen in this video: https://youtu.be/A5XNfDF7Eng?t=32
So, what should I do in this case to ensure a good development and production experience? Can the React project be configured so that its development and build/production artifacts are available to this ASP.NET Core web project with Razor Pages, where some of the pages will include React components from the sibling React project? I want the majority of pages to use Razor Pages rendered on the backend, while only specific parts (like the chat interface) will use React. Additionally, I need to enable routing to work as follows: for pages with React routing, the routing will happen on the client-side, and for others, they will be redirected to ASP.NET Core Razor Pages.
ASP.NET Core web project with Razor Pages which would contain razor components could make http calls to the third project (Web API) and it would be possible for some pure react pages to make http calls when rendering some dynamic content or sending/posting some content.
Since your ASP.NET MVC application is rendering the HTML pages, the solution is to make Razor pages to render React components.
There are two easy ways to do this:
Rendering Components with Window Object and ReactDOM
window object to render React components.// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import LiveChat from './LiveChat';
window.renderLiveChat = (containerId) => {
ReactDOM.render(<LiveChat />, document.getElementById(containerId));
};
<!-- Chat.cshtml -->
<div id="react-live-chat"></div>
<script src="path-to-react-app/main.js"></script>
<script>
// Mount React component
window.renderLiveChat("react-live-chat");
</script>
This approach makes an easy integration, but it loads the whole project binaries. Improving this would require a modular approach.