This repo is an example of integrating an ASP.NET Core backend with SignalR and a VueJS frontend.
It serves as an example of how VueJS can be integrated with SignalR by implementing a minimalistic version of Stack Overflow. SignalR is then used to propagate the changes to the question score and new questions, which serve as examples for receiving and sending events through the SignalR connection.
- Clone this repo.
- Open a terminal and navigate to the client folder. Restore the dependencies with
npm install, then runnpm run serve. It will automatically reload when the client code changes. - Open a second terminal and navigate to the server folder. Restore the dependencies with
dotnet restore, then run the server withdotnet run. Alternatively usedotnet watch runif you want to automatically reload when the server code changes. - The frontend will be listening on http://localhost:8080 while the backend will be listening at http://localhost:5100
The backed is an ASP.NET Core 2.2 project providing a REST API. It was initialized using the .NET Core CLI with dotnet new webapi and provides a simple API for viewing and adding the questions and answers of the site.
On top of that, it provides a SignalR hub where clients can connect so they receive an event when question scores change and new questions are added.
The frontend is a Vue 2.5 project. It was initialized using the Vue-CLI 3 with vue create and provides a minimalistic Stack Overflow site on top of the API provided by the backend, with Bootstrap used for styling.
The SignalR JavaScript client was installed and is used to intialize a connection with the backend SignalR hub during app startup. A simple Vue plugin is provided so any component can receive SignalR events from the server as well as submit events to the server.