Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Contact Manager Example

A simple contact manager web client and server using Vue.js, Butterfly.Clients, Butterfly.Web, and Butterfly.Db

This example shows...

  • A Vue.js client invoking Web API methods to add, update, and delete contacts
  • A Vue.js client subscribing to the Subscription API via the Butterfly.Clients to receive updates when any data changes
  • Implementing the Web API from Butterfly.Web on the server
  • Implementing the Subscription API from Butterfly.Web on the server
  • Using Butterfly.Db on the server to perform database operations and publish the data change events to subscribers

This example uses Vue.js but the Butterfly.Clients web client is vanilla javascript and can be used with any framework.

This example uses the EmbedIO web server but Butterfly.Web supports multiple web servers.

This example uses the MySQL database but Butterfly.Db supports multiple database engines.

See this article about building this example web app.

Get the Code

git clone

Run the Server

cd butterfly-server\Butterfly.Example.Contacts
dotnet run

You can see the server code that runs at Program.cs.

Run the Client

cd butterfly-server\Butterfly.Example.Contacts\www
npm install
npm run serve

Open as many browser instances to http://localhost:8080/ as you wish to confirm the todo list stays synchronized across all connected clients.

You can’t perform that action at this time.