featherhttp/tutorial

Quick tutorials on how you you can build easy web applications with FeatherHttp. Learn how to build lightweight server-side web applications

Feather HTTP

A lightweight low ceremony APIs for .NET Core applications.

• Built on the same primitives as .NET Core
• Optimized for building HTTP APIs quickly
• Take advantage of existing .NET Core middleware and frameworks

Hello World

using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;

var app = WebApplication.Create(args);

app.MapGet("/", async http =>
{
    await http.Response.WriteAsync("Hello World");
});

await app.RunAsync();

Tutorial

The tutorial will walk you through building an HTTP API for a todo application using FeatherHttp.

Using CI Builds

To use the dotnet new template, use the following command

dotnet new -i FeatherHttp.Templates::{version} --nuget-source https://f.feedz.io/featherhttp/framework/nuget/index.json

Once you've installed the template, run:

dotnet new feather -n {name}

This will create a new project using FeatherHttp.

To use CI builds add the following nuget feed:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <packageSources>
        <clear />
        <add key="featherhttp" value="https://f.feedz.io/featherhttp/framework/nuget/index.json" />
        <add key="NuGet.org" value="https://api.nuget.org/v3/index.json" />
    </packageSources>
</configuration>

See the list of versions

tutorial's Issues

Scenario 1: Adding .NET Core backend to a ReactApp Frontend

Goal: In this exercise, the participants will be asked to build the backend of a TodoReact App. The user will be exploring the functionality of FeatherHttp, a .NET core framework.

What is FeatherHttp: FeatherHttp makes it easy to write web applications.

Why FeatherHttp: FeatherHttp is lightweight server-side framework designed to scale-up as your application grows in complexity.

Setup

1. Install .NET Core 3.1 SDK
2. Install FeatherHttp Package
3. Install Node.js
4. Clone the Todo Repo
   • This repo consists of the frontend application TodoReactapp.

Task: Build the backend portion using FeatherHttp

Tasks

Run the frontend application

1. Once you clone the Todo repo, navigate to the TodoReact folder and run npm start
2. The app will load but have no functionality

Build backend - FeatherHttp

Create a new project

1. Create a new FeatherHttp application and added the necessary packages in the Todo folder

Todo>dotnet new feather -n TodoApi
Todo> cd TodoApi
Todo\TodoApi> dotnet add package Microsoft.EntityFrameworkCore.InMemory --version 3.1

• The commands above create a new FeatherHttp application
• Adds the NuGet packages required in the next section

2. Open the Todo Folder in VS Code

Create the database model

1. Create a file called TodoItem.csin the TodoApi folder. Add the content below:

   using System.Text.Json.Serialization;
   
    public class TodoItem
    {
        [JsonPropertyName("id")]
        public int Id { get; set; }
   
        [JsonPropertyName("name")]
        public string Name { get; set; }
   
        [JsonPropertyName("isComplete")]
        public bool IsComplete { get; set; }
    }

   The above model will be used for both JSON reading and storing todo items in the database.

2. Create a file called TodoDbContext.cs with the following contents:

   using Microsoft.EntityFrameworkCore;
   
   public class TodoDbContext : DbContext
   {
       public DbSet<TodoItem> Todos { get; set; }
       
       protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
       {
           optionsBuilder.UseInMemoryDatabase("Todos");
       }
   }

   This code does 2 things:

   • It exposes a Todos property which represents the list of todo items in the database.
   • The call to UseInMemoryDatabase wires up the in memory database storage. Data will only be persisted as long as the application is running.

3. Restart the server side application but this time we're going to use dotnet watch:

   dotnet watch run
   

   This will watch our application for source code changes and will restart the process as a result.

Expose the list of todo items

1. In Program.cs, create a method called GetTodos:

   static async Task GetTodos(HttpContext context)
   {
       using var db = new TodoDbContext();
       var todos = await db.Todos.ToListAsync();
   
       await context.Response.WriteJsonAsync(todos);
   }

   This method gets the list of todo items from the database and writes a JSON representation to the HTTP response.

2. Wire up GetTodos to the api/todos route in Main:

   static async Task Main(string[] args)
   {
       var app = WebApplication.Create(args);
   
       app.MapGet("/api/todos", GetTodos);
   
       await app.RunAsync();
   }

3. Run the application with dotnet run. Navigate to the URL http://localhost:5000/api/todos in the browser. It should return an empty JSON array.

Adding a new todo item

1. In Program.cs, create another method called CreateTodo:

   static async Task CreateTodo(HttpContext context)
   {
       var todo = await context.Request.ReadJsonAsync<TodoItem>();
   
       using var db = new TodoDbContext();
       await db.Todos.AddAsync(todo);
       await db.SaveChangesAsync();
   
       context.Response.StatusCode = 204;
   }

   The above method reads the TodoItem from the incoming HTTP request and as a JSON payload and adds
   it to the database.

2. Wire up CreateTodo to the api/todos route in Main:

   static async Task Main(string[] args)
   {
       var app = WebApplication.Create(args);
   
       app.MapGet("/api/todos", GetTodos);
       app.MapPost("/api/todos", CreateTodo);
   
       await app.RunAsync();
   }

3. Navigate to the TodoReact application which should be running on http://localhost:3000. The application should be able to add new todo items. Also, refreshing the page should show the stored todo items.

Changing the state of todo items

1. In Program.cs, create another method called UpdateTodoItem:

   static async Task UpdateCompleted(HttpContext context)
   {
       if (!context.Request.RouteValues.TryGet("id", out int id))
       {
           context.Response.StatusCode = 400;
           return;
       }
   
       using var db = new TodoDbContext();
       var todo = await db.Todos.FindAsync(id);
   
       if (todo == null)
       {
           context.Response.StatusCode = 404;
           return;
       }
   
       var inputTodo = await context.Request.ReadJsonAsync<TodoItem>();
       todo.IsComplete = inputTodo.IsComplete;
   
       await db.SaveChangesAsync();
   
       context.Response.StatusCode = 204;
   }

   The above logic retrives the id from the route parameter "id" and uses it to find the todo item in the database. It then reads the JSON payload from the incoming request, sets the IsComplete property and updates the todo item in the database.

2. Wire up UpdateTodoItem to the api/todos/{id} route in Main:

   static async Task Main(string[] args)
   {
       var app = WebApplication.Create(args);
   
       app.MapGet("/api/todos", GetTodos);
       app.MapPost("/api/todos", CreateTodo);
       app.MapPost("/api/todos/{id}", UpdateCompleted);
   
       await app.RunAsync();
   }

Deleting a todo item

1. In Program.cs create another method called DeleteTodo:

   static async Task DeleteTodo(HttpContext context)
   {
       if (!context.Request.RouteValues.TryGet("id", out int id))
       {
           context.Response.StatusCode = 400;
           return;
       }
   
       using var db = new TodoDbContext();
       var todo = await db.Todos.FindAsync(id);
       if (todo == null)
       {
           context.Response.StatusCode = 404;
           return;
       }
   
       db.Todos.Remove(todo);
       await db.SaveChangesAsync();
   
       context.Response.StatusCode = 204;
   }

   The above logic is very similar to UpdateTodoItem but instead. it removes the todo item from the database after finding it.

2. Wire up DeleteTodo to the api/todos/{id} route in Main:

   static async Task Main(string[] args)
   {
       var app = WebApplication.Create(args);
   
       app.MapGet("/api/todos", GetTodos);
       app.MapPost("/api/todos", CreateTodo);
       app.MapPost("/api/todos/{id}", UpdateCompleted);
       app.MapDelete("/api/todos/{id}", DeleteTodo);
   
       await app.RunAsync();
   }

Test the application

The application should now be fully functional.

Notes on the UserStudy

Getting Started

• Add the git clone step

Fixes

Run the client side application

Navigate to the TodoReact folder and run npm start.

This step might result in this error react-scripts is not recognized as an internal command for some users. Have them run install npm install first then run start.

Adding a new to do item

Running the app in step 3

Navigate to the TodoReact application which should be running on http://localhost:3000. The application should be able to add new todo items. Also, refreshing the page should show the stored todo items.

If the user doesn't run the client app and the server app concurrently this will result in a Connection refused error.