DEV Community: Nuno Reis

Propagate headers with .NET Core Web API

Nuno Reis — Fri, 16 Oct 2020 21:29:52 +0000

Welcome. Today we are going to learn how to propagate any header you receive onto another HTTP service using .NET Core Web API.

Let’s say I have a pipeline which consists of three services, like this:

And I want my service at the end of the line to receive the headers that were sent from the client that requested information from the service at the beginning of the line.

How is this useful in real life? Well, imagine your service down the line needs the accept-language sent from the client to access some information that is language-specific. Propagating the headers is one way to achieve that the service down the line will receive that header.

Let’s see how we can achieve this with a simple solution that requires no workarounds.

Step 1: Create your Web API

You can create it using the command:

dotnet new webapi --name HeaderPropagationDemo --language "C#"

Step 2: Install HeaderPropagation package

If you’re already using .NET Core 3.1, add this package:

dotnet add package Microsoft.AspNetCore.HeaderPropagation --version 3.1.8

If you’re using a lower version, add this one:

dotnet add package HeaderPropagation --version 3.0.2

Step 3: Setup Dependency Injection

Enable middleware on Startup.Configure using:

app.UseHeaderPropagation();

Then add the service onto Startup.ConfigureServices:

services.AddHeaderPropagation(o =>  
{  
    // Add Default   
    o.Headers.Add("User-Agent", context => "HeaderPropagationDemo");  
    // Propagate if header exists  
    o.Headers.Add("Accept-Language");  
});

I’ve only added two specific examples. One for User-Agent where I can specifically define it so it can be added if there is no User-Agent present and the Accept-Language header with no default value.

This is pretty much all you need for a basic setup to propagate the headers you want.

Step 4: Setup a Client (optional)

If you are using HttpClientFactory, you need to add a delegating handler to every client, like this:

services.AddHttpClient("DefaultClient")  
    .AddHeaderPropagation();

Step 5: See it actually working

Let’s create a controller with an endpoint capable of making a request to one of the httpbin.org GET method which in turn will send us the headers we propagated onto him.

[ApiController]  
[Route("[controller]")]  
public class PropagationController : ControllerBase  
{  
    private readonly IHttpClientFactory _factory;  

    public PropagationController(IHttpClientFactory factory)  
    {  
        _factory = factory;  
    }  

    [HttpGet]  
    public async Task<IActionResult> Get()  
    {  
        var client = _factory.CreateClient("DefaultClient");  

        var result = await client.GetAsync("https://httpbin.org/get");  

        return Ok(await result.Content.ReadAsStringAsync());  
    }  
}

Run your API and make a request to this endpoint. You should receive a response with the headers. Try not passing any User-Agent and if you’ve followed everything correctly, you should be able to see the default value provided on the code.

Using the browser may be a little tricky to modify the headers, you can use an extension for Chrome for example, but I personally use Postman.

Wrap up

That’s it. Hope this has helped you in any way.

Have a nice day!

Generate Client SDK for .NET Core using Open Api

Nuno Reis — Wed, 22 Jul 2020 17:18:50 +0000

This article is intended to be a tutorial on how to generate a client sdk of an API using OpenAPI specification (a.k.a. Swagger) so you can focus more on implementing new software instead of maintaining useless one.

Pre Requisites

Before we begin, we are going to need two things:

dotnet
npm

Once we have them we can start our journey.

Setup

Step 1: Create a Web Api

Using dotnet command line interface create a webapi with the command dotnet new, just like this:

dotnet new webapi --name Api --language "C#"

Step 2: Generate Open API spec of our Web Api

The webapi template already has a resource called WeatherForecast which we can use to generate our client sdk, so our next logical step will be to add the Swashbuckle required package to our project using dotnet add package. (The command must be executed on the same directory as where the csproj is located.)

dotnet add package Swashbuckle.AspNetCore.SwaggerGen --version 5.5.1

Now that we have the necessary package, it’s time for some code.

We will only need to add some lines on Startup.cs file.

Go to ConfigureServices method and add the AddSwaggerGen method.

services.AddSwaggerGen(options =>  
{  
    options.SwaggerDoc("v1", new OpenApiInfo { Title = "API", Version = "1" });  
});

This method will register the swagger document generator which we will need to retrieve the json document afterwards.

Now we need to install a tool in order to get the json file with the Open API spec of our API called Swashbuckle.AspNetCore.Cli using this command:

dotnet tool install --global Swashbuckle.AspNetCore.Cli

But before running this tool, we must generate a dll of our project, so:

dotnet restore Api/Api.csproj
dotnet build -c Release Api/Api.csproj

Afterwards, validate if our dll was properly generated in Api/bin/Release/netcoreapp3.1 .

Now that we have a proper dll, we can use the tool we installed previously by executing this command:

swagger tofile --output swagger.json Api/bin/Release/netcoreapp3.1/Api.dll v1

This command will generate the open api spec into a file named swagger.json which we will then use it to generate our Client SDK.

Step 3: Generate Client SDK for .NET Core

In the beginning I told you it was necessary to install npm. Now it’s time to use it. We are going to install a package from OpenAPI Generator that will help us generate our Client SDK.

Install the Open Api Generator Command Line Interface globally by executing this command:

npm install @openapitools/openapi-generator-cli -g

And finally execute Open Api Generator CLI to generate our SDK with this command:

openapi-generator generate -i swagger.json -g csharp-netcore -o Api.Client.Sdk --additional-properties packageName=Api.Client.Sdk

The command will create a directory called Api.Client.Sdk where the generated client sdk of our API with the specified package name is.

Wrap Up

That is basically it. Now you can generate your API SDK without any code, you can even automate the SDK generation and pack it into your package manager.

If you need a different technology for your SDK, open api generator provides a lot more generators which are listed here.

I’ll leave some useful links below if you’d like to know more about some topics talked here:

I’ll also leave the code of this tiny tutorial which is present here.

Building a React Native App w/ Expo

Nuno Reis — Thu, 02 Jul 2020 11:14:39 +0000

In this article I will try to guide you on how to start a react native application from scratch using expo and consequently build it into an apk.

For quite some time I wanted to learn Swift and enter the world of Mobile Software Development, but the opportunity never arose.

Around 2019, I came across an opportunity to develop a mobile application which had a simple requisite. The application had to work both on Android and iOS. Since me and my team did not have knowledge whatsoever about Swift and little time to deliver, we decided to use something we already knew and that would work both on Android and iOS.

This was React Native. Since I had already worked with React, this was the best option for us.

What is React Native?

React Native is a JavaScript framework for writing real, native rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

We had no experience using React Native, however there is a really neat tool that really helped us developing our application. This tool is called Expo.

What is Expo?

Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

I was very satisfied with this and would absolutely try it again to develop mobile applications. But right now, I will help you develop your own. 😄

Enough talking. Let’s get down to business.

Prerequisites

What’s required for us to get started?

React Native’s language is JavaScript so we are going to need a package manager for JavaScript which is npm. You can go here and install Node and NPM.

After installing you can open a terminal and validate using this command:

npm --version

Next will be to install, using npm, expo command line interface using the following commands:

npm install --global expo-cli

Step by Step

Step 1: Create your app using Expo

expo init --template blank

After executing this command, you’ll need to provide the name you want to give your app. This name will be used to create the folder where your project will be. Within this new folder there will be a bunch of stuff already configured which are necessary for you to run your app.

I’ll leave below an image of what should have been created.

Pretty standard stuff here, but what’s most important and what’s required for your app to run here are the assets folder, the node_modules folder, the App.js, app.json, babel.config.js and the package.json.

If you want to deep dive on any of these files, I’ll leave some links for you to have fun. 😄

For babel.config.js related stuff, go here.
For package.json related stuff, go here.
For app.json related stuff, go here.

Step 2: Run the App

npm run start

After running that command, Expo Command Line Interface will start Metro Bundler, which is an HTTP server that compiles the JavaScript code of your app using Babel and serves it to the Expo app.

It also pops up Expo Developer Tools, a graphical interface for Expo CLI.

The Expo Developer Tool should look like this:

Expo does have some nice features. Did you know you can install your app on your phone with a tiny app that Expo developed and reading that QR code? You can also install your app into your Android Virtual Device or plug in your Phone with a USB cable, but the QR code option was quite welcoming for me. 😄

Since I am using the QR code, I had to install this App on my Android.

After installing the app, the only thing you need to worry about is putting the connection to Tunnel (if expo shows a warning saying Tunnel URL not found, falled back to LAN URL, please stop and start the app again) and make sure the Phone and the Computer are on the same internet, otherwise it won’t work. 😞

You should see something like this on your phone. From this step forward, you can start and explore your React abilities and make your app pretty and useful.

If you want to use some basic components from React Native, you can see their documentation here.

For more complex stuff, like device permissions and so on, you can see this documentation from Expo.

Step 3: Build your Android Package with Expo

The next logical step after you’ve developed your App, would be to build it and distribute it. Since I haven’t distributed the App we were developing to Apple Store, or to Google Play Store, I can only guide you on how to build your Android Package (APK) using Expo.

In order for us to be able to generate an APK using Expo we need to create an account. You can create one here.

Next, we will need to change some settings on the app.json file.

Since we are creating an Android Package, the only thing we need to worry is to define the Android package name like this:

{  
  ...  
  "android": {  
    "package": "com.tutorial.reactnative"  
  }
  ...  
}

If you want to deep dive on this matter, you can follow this link. It is the documentation for every supported field on the app.json file.

Start your app using npm run start and then open a new terminal on the same directory and execute the following:

expo build:android -t apk

If you are not logged in yet, it will ask you to log in or to create a new user, since we’ve done this previously, we can choose to log in.

Afterwards, it will ask you for a Keystore, don’t worry about it and let them handle it.

This will trigger a build of your app and after that build is concluded, it will be sent to the expo servers to be transformed into an APK.

This may take some time as Android builds are the most popular within Expo servers. If you want an estimate on how much time it will take, you can follow this link. It shows how many Android builds are on Expo servers waiting for processing.

You do not need to wait in the terminal for the build to complete. Generally, you will receive an info stating that the terminal command timed out. No worries. Just check the build status on the expo website.

After some time, your APK will appear on your Expo Dashboard and it will be ready for download! 🎉

Wrap up

Now that we have a functioning react native application and you know how to build your own APK for delivery, you can continue and develop that app which we know will be the next big thing.

Useful Links

Hangfire w/ Mongo using Docker

Nuno Reis — Thu, 02 Jul 2020 08:33:13 +0000

This article is a basic tutorial on how to setup Hangfire using a dotnet core application.

Before I start rambling, what is Hangfire and what does it do?

Hangfire is an easy way to perform background processing in .NET and .NET Core applications. No Windows Service or separate process are required. It is also backed by persistent storage. It’s great for long running tasks where you have multiple instances of an application and you need or want to start or stop those tasks.

Let’s Start

First we need to choose a database that is compatible with Hangfire. I chose MongoDB because it’s free, but SQL Server is also compatible.

Step 1: Create a docker-compose file

This docker compose will be responsible to create our mongo database. I’ve also added mongo-express to visualize our mongo db on the browser and a beautiful little script runner to create our user with access to the database.

version: '3'
services:
 mongo:
  image: mongo:3.4.14
  container_name: mongo
  environment:
   - MONGO_INITDB_ROOT_USERNAME=admin
   - MONGO_INITDB_ROOT_PASSWORD=admin
  ports:
   - 27017:27017
  restart: unless-stopped
 mongo-express:
  image: mongo-express
  container_name: mongo_express
  ports:
   - 8081:8081
  environment:
   ME_CONFIG_MONGODB_ADMINUSERNAME: admin
   ME_CONFIG_MONGODB_ADMINPASSWORD: admin
  restart: always
 mongo-scripts:
  image: mongo-scripts
  container_name: mongo_scripts
  environment:
   - SERVER=mongo
   - PORT=27017
   - DATABASE=HANGFIRE_TUTORIAL
   - USERNAME=myuser
   - PASSWORD=pwd
  build:
   context: .
   dockerfile: Dockerfile
  depends_on:
   - mongo

If you are new to docker compose files, you can read about it here.

Step 2: Create a Dockerfile

We will need to create the Dockerfile in the same space of the docker compose file with the following:

FROM mongo:3.4.14
ARG SERVER
ARG PORT
ARG DATABASE
ARG USERNAME
ARG PASSWORD
WORKDIR mongoscripts
COPY . .
RUN tr -d '\r' <run-mongoscripts.sh >run-mongoscripts.sh.tmp && mv -f run-mongoscripts.sh.tmp run-mongoscripts.sh
CMD sh run-mongoscripts.sh ${SERVER} ${PORT} ${DATABASE} ${USERNAME} ${PASSWORD}

This Dockerfile is responsible for copying our bash script and execute it.

Step 3: Create a bash script

The bash script name should be equivalent to the one given in the Dockerfile. The name I gave it was run-mongoscripts.sh and it should be in the same space as the docker compose file.

The bash script should have the following:

#!/bin/sh
main() {
 server=$1;
 port=$2;
 database=$3;
 username=$4;
 password=$5;
 workTime=1;
 totalTimes=50;
 numberOfChecks=1
 while [ $numberOfChecks -le $totalTimes ] &&
   ! timeout "$workTime" bash -c "echo > /dev/tcp/$server/$port";
 do
   echo "$server:$port is DOWN after $numberOfChecks check";
   sleep $workTime;
   numberOfChecks=$(($numberOfChecks + 1));
 done;
 if ! timeout "$workTime" bash -c "echo > /dev/tcp/$server/$port";
 then
  echo "$server:$port is DOWN after all checks";
  exit 1;
 else
  echo "$server:$port is UP";
 fi

 mongo --host $server --port $port admin -u admin -p admin --eval "db.getSiblingDB('$database').createUser({user:'$username',pwd:'$password',roles:[{role:'readWrite',db:'$database'}]})"
}
main "$@";

This script is responsible for creating a user capable of reading and writing in a mongo database of our choosing. It contains a loop for it to wait until the mongodb container is up.

Ok, the worst is over. 😅

Now we can run our docker compose file using this command where the docker compose file is:

docker-compose up -d --build

Go to your browser and you will be able to access mongo-express on http://localhost:8081/.

We finally have our setup complete. 🎉

Step 4: Create a new ASP.NET Core Web API

Open Visual Studio and create a new project using the following templates:

Step 5: Add Hangfire to our project

After our ASP.NET Core Web API has been created, let’s proceed to the installation of Hangfire into our project. Head out to our .csproj and add the following:

<ItemGroup>
  <PackageReference Include="Hangfire" Version="1.7.9" />
  <PackageReference Include="HangFire.Mongo" Version="0.6.6" />
</ItemGroup>

These are all the packages we are going to need so now we can add our connection string to Mongo DB to feed onto Hangfire.

Step 6: Add MongoDB connection string

Mongo’s template connection string should look like this:

mongodb://<username>:<password>@<host>:<port>/<database>

Let’s add it into appsettings.json using our settings:

{
  ...
  "ConnectionStrings": {
    "HangfireConnection":
      "mongodb://myuser:pwd@localhost:27017/HANGFIRE_TUTORIAL"
  },
  ...
}

Step 7: Configure Hangfire

After that we can start to add our dependencies to the Startup.cs file located at the root of the project.

You will have two methods. ConfigureServices and Configure. ConfigureServices is used to add services to the container for them to be available for dependency injection. Configure is where we set up the middlewares that handle every HTTP request.

So, in ConfigureServices we will add our dependency to Hangfire like this:

var options = new MongoStorageOptions
{
  MigrationOptions = new MongoMigrationOptions
  {
    BackupStrategy = MongoBackupStrategy.None,
    Strategy = MongoMigrationStrategy.Drop
  }
};

services.AddHangfire(x => x.UseMongoStorage(
    Configuration.GetConnectionString("HangfireConnection"),
    options));

And in Configure we will add this so that we can open the Hangfire Dashboard and to be able to schedule jobs and stop them.

app.UseHangfireDashboard()
   .UseHangfireServer();

Awesome. Now we can just run our application and go to /hangfire and we will be able to see this beautiful dashboard.

We now have our Hangfire configured and ready to go.

Step 8: Add a Job to Hangfire

Our next step will be to add a job to execute every day at 8AM to tell us good morning.

In our Startup.cs file, on the Configure method, we will add this:

RecurringJob.AddOrUpdate<HangfireJobs>(
   "GoodMorning",
   x => x.GoodMorning(),
   Cron.Daily(8));

So, what does this do? This tiny method will add a recurring job to Hangfire that will execute the method GoodMorning declared on the class HangfireJobs every day at 8AM identified in the last argument.

Next Step will be to create the class HangfireJobs and its method, GoodMorning.

public class HangfireJobs
{
   public void GoodMorning()
   {
     Console.WriteLine("Good Morning!");
   }
}

After this, we can run our app and go to /hangfire/recurring and see this job waiting for it to be ran. It should look something like this.

Wrap up

This is it. Now you have a functioning application using Hangfire with Mongo DB using Docker where you can add Jobs to run whenever you want and how many times you need.

If you want to follow up on something more, here is some links that may be helpful: