DEV Community

Satish Patil
Satish Patil

Posted on

1

.Net Core API Project with Embedded React.js UI

This is a sample .NET Core API project demonstrating how to serve an embedded React.js UI (built with Chakra UI) alongside API endpoints. The project shows how to integrate a front-end application as an embedded resource, allowing the UI to be accessed without a separate server.

Features
ASP.NET Core API for backend functionality.
Embedded React.js UI built with Chakra UI or whatever ui framework, served as static files.
Static File Handling with embedded resources, allowing seamless access to front-end assets.
Setup Instructions
Build the React App: Ensure the production build of your React app (located in the ui folder) is created:

cd ui
npm install
npm run build
Enter fullscreen mode Exit fullscreen mode

This will create a build folder with the production-ready files. Move or rename this folder to ui, so it aligns with the project’s embedded resource setup.

Configure the Project: Open the .csproj file and make sure the ui folder is set as an embedded resource:

<ItemGroup>
    <EmbeddedResource Include="ui\**" />
</ItemGroup>
Enter fullscreen mode Exit fullscreen mode

Run the Project: Go back to the project root and run the application:

dotnet run
Enter fullscreen mode Exit fullscreen mode

The API and UI will be served on the specified port (default: http://localhost:5244).

Usage
Access the React UI at:

http://localhost:5244/ui/index.html

Enter fullscreen mode Exit fullscreen mode

Project Structure
Program.cs: Configures API routes, static file handling, and embedded resources.
ui/: Contains the production build of the React.js app.
WeatherForecast.cs: Sample API endpoint to demonstrate data responses.
URL Rewrite Handling
The project uses a URL rewrite rule to handle references to assets directly. Requests for paths like /assets/... are automatically rewritten to /ui/assets/....

GIT Url
https://github.com/satsvelke/embedded_resource_api_dotnet_react.git

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay