phoria

🏝️ Islands architecture for dotnet powered by Vite ⚡

---

Phoria allows you to easily and efficiently render islands of interactivity using React, Svelte or Vue within your dotnet web app (Razor Pages or MVC) using both Client Side Rendering and Server Side Rendering.

• ⚡ Built around Vite, which means you can enjoy a first class development experience, lightning fast HMR and access to its expansive plugin catalogue and ecosystem
• 🏝️ Easily and efficiently render islands using any supported UI framework(s)
• 🌊 Client Side Rendering (CSR) and support for multiple client hydration strategies via client directives such as on load, on idle, on visible and on match media query
• 🔋 Server Side Rendering (SSR) of Islands within your dotnet web app (Razor Pages or MVC) views
• 📦 Easily pass props from your dotnet web app to your UI components
• ⚙️ Shared configuration between dotnet and Vite using appsettings.json files and dotnet dev-certs (via an optional plugin)

Getting started

Please see the getting started guide.

Usage

Note

This documentation is a work in progress. If there is something missing that needs clarification or if you have an idea or request for documentation not mentioned below, please raise an issue.

• Phoria Islands
  • Supported UI frameworks
  • Component register
• Phoria Server
  • Client Entry
  • Server Entry
• Phoria Web App
• Configuration
• Building for production
• Deployment

Acknowledgements

Inspiration

The idea for this project came about after using Astro and thoroughly enjoying the whole experience with their implementation of the Islands architecture. Astro was the catalyst and continues to inspire to this day.

The approach that the Remix team took to their Vite plugin and how they structure their applications is also a big inspiration.

This presentation and sample code by Ben Holmes (core maintainer of Astro) was the inspiration for using custom HTML elements in the implementation of Phoria Islands.

Implementation

This project would have been significantly slower to get off the ground if it wasn't for the amazing work done by the maintainers of:

• Vite.AspNetCore; and
• NodeReact.NET

The initial idea was to just consume and use these libraries in Phoria, but the scope for Phoria quickly diverged and would have required submitting changes upstream that seemed at odds with the scope of these libraries.

Parts of their codebases are used in the dotnet Phoria library and helped form a basis from which to build out the features that Phoria provides.