Graftcode Tutorial 3 - Connect Frontend to Backend (React + .NET)

Connect a React frontend to a .NET backend with Graftcode, with no REST endpoints, no API client to write and no extra code generation tools. In the second Graftcode tutorial we take the EnergyService backend from Tutorial 1 and call it from a React application built with Vite. Graftcode Gateway generates a strongly typed client package, called a Graft, which we install with npm and use to call the backend's public methods as if they were a local dependency. IntelliSense sees the service and its methods, so your editor and type system can check how you use the interface. What you'll learn ▸ Create a React app with Vite ▸ Host your backend with Graftcode Gateway and check it in Graftcode Vision ▸ Install the generated Graft with npm ▸ Copy the configuration and import code from Vision into App.jsx ▸ Call a backend method with await and show the result on the page Chapters 0:00 Introduction 0:19 Create a React app with Vite 1:06 Simplify App.jsx 1:36 Start the backend with Graftcode Gateway 1:59 Check the service in Graftcode Vision 2:15 Install the Graft with npm 2:35 Configure the connection 3:00 Import the strongly typed interface 3:19 Call getPrice from React 3:42 Run the application 4:01 Change the architecture with configuration only Commands used npm create vite@latest hello-world -- --template react .\gg.exe .\EnergyService.dll npm install --registry https://grft.dev/your-registry-key__free @graft/nuget-energyservice@1.0.0 Copy the npm install command from the Installation tab in Vision. The registry key is generated for your Gateway. Why it matters Your backend and frontend code stay decoupled from the integration layer. You can later split a monolith into microservices, or switch the transport layer from WebSockets to HTTP or event queues, through configuration only, without changing your application code. Before you start Watch Tutorial 2 - Expose a backend with Graftcode Gateway:    • Graftcode Tutorial 2 - Expose Backend (.NET)   You'll need Visual Studio Code, Node.js and the .NET 9 SDK. Next tutorial Connect two backend services with Graftcode: Resources 🌐 Website: https://graftcode.com 📚 Quick-start guide (React): https://docs.graftcode.com/quick-star... 🎓 Full tutorial course:    • Graftcode Tutorials   ⚡ Quick start videos:    / @graftcode   #Graftcode #React #dotnet