Write a Desktop app with React, Typescript, ASP.NET Core and WebView2

Write a Desktop app with React, Typescript, ASP.NET Core and WebView2

If you bring together WebView2 on a Windows Forms application and spin an instance of ASP.NET Core with Kestrel, you get a full desktop applications. Write a Desktop app with React, Typescript, ASP.NET Core and WebView2

I was recently contacted by a client to rebuild a very old Microsoft Access application.

They didn’t ask for any specific framework or platform to use so I was thinking to do it with WPF or the old good Windows Forms.

I have recently been working mainly on web applications with React as frontend and NodeJS or ASP.NET Core as backend and I found the development experience quite pleasant.

I search on the internet for a way to make a normal React/ASP.NET Core application as a Desktop one.

I found several libraries and frameworks but they all seem too heavy and I want a development experience very similar to the web one.

While I was searching I found a new technology done by Microsoft called WebView2 that is based on Chromium rendering engine:

It’s a quite remarkable technology.

If you bring together WebView2 on a Windows Forms application and spin an instance of ASP.NET Core with Kestrel, you get a full desktop application that can run like a web application.

Let’s do it! :)

Create a new ASP.NET Core React application

You need to have installed on your machine  NodeJS and  ASP.NET Core

Let’s create a new ASP.NET Core React app with the following command:

dotnet new react -o my-new-app
cd my-new-app
dotnet build
dotnet run

react aspnetcore webview typescript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native - React Navigation with TypeScript in React Mobile App

Learn how to set up React Navigation in a React Native project using TypeScript, routing for modals and nested navigation, type declaration for navigation, and route props.

Typescript in React — How to Add

In this article, I will be showing you how to add typescript from your existing react application. If you are a software developer that started from strongly typed programming languages.

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

React With Typescript, Redux And Thunk - React Javascript Tutorial

Wanted to make a video with redux and redux-thunk using typescript. I found this a bit confusing when I first learned it and hopefully this videos makes the ...