React ASP.NET Core Minimal APIs Tutorial (Small CRUD App)

In this video I demonstrate how to combine the popular front end JavaScript library React and the new ASP.NET Core 6 Minimal Web APIs.

At the end of it you’ll have a minimal example CRUD Application that demonstrates how to combine the two. Can be used as a clean template to kickstart your CRUD apps.

Publishing to the Microsoft Azure Cloud is also covered.
The React app will be published to an Azure Static Web App Resource and the Minimal Web API to an Azure App Service Resource.

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► Blazor – Real World Developer Portfolio Course Discount Link:
https://rubenheeren.com/course-promo-link/blazor-your-dev-portfolio

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► DOWNLOAD SOURCE CODE

If you can afford it please buy this course for $12.99.
It took a long time to make but I want to offer it for free to help some people.

Buy link:
https://rubenheeren.com/course-promo-link/aspnet-core-react

Free link:
https://bit.ly/ASPNETReact

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► LIVE DEMO

React Client:
https://calm-water-04859b403.azurestaticapps.net/

ASP.NET Web API:
https://aspnetcorereacttutorial-aspnetserver.azurewebsites.net/

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► LINKS MENTIONED

Microsoft Docs ASP.NET Core Minimal Web APIs:
https://docs.microsoft.com/en-us/aspnet/core/tutorials/min-web-api

Traversy Media Free React Crash Course (React knowledge level I assume you have):
https://www.youtube.com/watch?v=w7ejDZ8SWv8

Microsoft Docs EF Core CLI:
https://docs.microsoft.com/en-us/ef/core/cli/dotnet

Create React App:
https://reactjs.org/docs/create-a-new-react-app.html

Install Bootstrap to React:
https://create-react-app.dev/docs/adding-bootstrap/

GitHub YAML syntax:
https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-github-actions

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► TIMESTAMPS

0:00 – Intro & Demo
4:27 – Blazor Course
5:20 – Setting Up Dev Environment
10:20 – Creating & Cleaning the Server Project
16:17 – EF Core Code First Database
31:11 – Repository for DB Operations
38:49 – First API Endpoint
40:47 – Improving Swagger UI
45:48 – Other API Endpoints
55:14 – Creating & Cleaning the React Project
1:07:07 – Adding Bootstrap
1:10:16 – Displaying Posts in a Table
1:23:49 – Server CORS Policy
1:28:21 – Filling the Table with Posts
1:33:02 – Constants File with API Endpoints
1:42:59 – PostCreateForm Component
2:09:49 – PostUpdateForm Component
2:23:14 – Deleting Posts
2:30:50 – Publish Server to Azure App Service
2:38:33 – Publish React to Azure Static Web App + GitHub Actions
2:52:43 – Fix CORS Policy
2:55:11 – Final Commit & Closing Thoughts
2:57:05 – Thanks for watching

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► CREDITS
Lively Animated Desktop Wallpaper Software:
https://github.com/rocksdanister/lively

Motherboard Background Image:
https://unsplash.com/@alexkixa

Visit my website (example of what you can build with ASP.NET):
https://rubenheeren.com

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Good luck on your developer journey!

#react #minimalapi #aspnetcore