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.

• reactjs
• asp-core
• asp-core-webapi
• razor-pages

Share Improve this question Follow edited Nov 16, 2024 at 20:56 marc_s 757k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Nov 16, 2024 at 12:13 RadRad 96322 gold badges1616 silver badges3333 bronze badges 1

• Could this help me? stackoverflow/questions/68483024/… I think the answer does a manual creation of frontend and backend without template, but it doesn't talk about embeding react components from frontend into some asp core razor pages. – Rad Commented Nov 16, 2024 at 12:55

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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

1. Bind functions into 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));
};

2. Render the component inside your Razor page.

<!-- 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.