TLDR: Download the template created in this article from: ReactTypeScript.NET

Creating the project

First thing we need to do is create the project. We are still going to use the React template, but we will modify it later to use TypeScript.

Open Visual Studio and create a new project.

Select the .NET Core with React template. Next, give your project a name and select your framework (I will be using .NET 6).

You should now have a .NET project that contains a folder called ClientApp. This is the folder where your React code sits. Since we aren't going to be using the JavaScript code that comes with this template we can go ahead and delete this folder.

Now that the JavaScript code is gone we can create our TypeScript React project. Open up the command line and navigate to the directory of your .NET project (where the ClientApp folder used to be) and run npx create-react-app client-app --template typescript .

Finally, inside your projects .csproj file update SpaRoot to the folder name of your react-app (I used client-app).

Installing Dependencies

There are a few things we need to make sure everything goes smoothly.

Make sure you have a modern version of node (I'm using 16.13.1 for this article). You can run node -v to check the version you are using.

You will also need ts-node installed, if you don't have it already you can run npm install ts-node in your react apps root directory or npm install -g ts-node if you would like to install it globally.

Lastly, navigate to the react app you created before and run npm install @types/node --save-dev this will help you avoid any issues with importing modules.

Configuring the proxy

Now that we have the TypeScript React project created inside our .NET project we want to make it easy to proxy requests to the backend. This is optional, just know that if you don't do this you will have to specify where to send requests (https://localhost:44388/api/request for example).

Open up your launchSettings.json file inside the Properties folder and take note of the application URL and SSL port.

Next, open your package.json file inside the client-app folder you created and set the proxy property to the URL from the launchSettings file. While we haven't set up HTTPS quite yet we will do that later so we should set it to the HTTPS URL.

While we're in the package.json we will also add "type": "module" which you can read more about here.

Setting up HTTPS

There are two main files that the .NET React template uses to configure HTTPS, we are going to create those files manually but in TypeScript rather than JavaScript.

Inside the client-app/src folder create two files called aspnetcore-https.ts and aspnetcore-react.ts. Below is what my folder structure looks like after creating those two files.

Now we actually have to write some code. Open the aspnetcore-https.ts file you just created and add this code (or you can copy it from here).

This is going to allow your frontend to use the .NET HTTPS development certificate.

You can now open the aspnetcore-react.ts file and add this code (or copy it from here).

The aspnetcore-react.ts file sets up the .env.development.local file with environment variables to configure HTTPS.

To finish setting up HTTPS locally we need to have these two scripts run on build. This is pretty simple to do by modifying your package.json script section.

You can test that everything is working as expected now by running npm run prestart or by running the whole app with IIS.

Troubleshooting

If your app isn't running properly there are a few key areas to check.

• Verify your node version by running node -v (I'm using 16.13.1)
• Verify ts-node and @types/node are installed
• Check that "target": "ES6" and "module": "ESNext" is set in tsconfig.json
• In the package.json file make sure that "type": "module" is set

Finishing up

At this point, you should have all the features of the .NET React JS template but with TypeScript. Hopefully, one-day Visual Studio will come with an option on top of the React template that lets you select between JavaScript and TypeScript.

You can look at the project created in this article here: ReactTypeScript.NET.

While doing research on working with S3 in .NET Core I didn't find much beyond a couple of articles that work with an older version of the AWS SDK, and some stack overflow posts. After figuring out some of the functionality I needed, I decided to write an article to help others get started with the AWS SDK and S3.

Pre-requisites

• You should have an AWS account.
• You should have a bucket set up in S3.
• You should know your AWS access key and secret

Amazon S3 creating a bucket

Understanding and getting your AWS credentials

Dependencies

To get started we have to install some dependencies. There is only one dependency if all you need from the AWS SDK is functionality for S3.

• AWSSDK.S3

You can install this package from NuGet. At the time of writing this article, the current version is 3.7.0.13.

BasicAWSCredentials

To authenticate yourself with the AWS SDK we need to create an instance of BasicAWSCredentials.

We can create a Singleton on startup to get the credentials through dependency injection and read our keys from the appsettings.json file.

Upload a file

public class AmazonS3
{
    private readonly BasicAWSCredentials _awsCredentials;
    public AmazonS3(BasicAWSCredentials awsCredentials)
    {
        _awsCredentials = awsCredentials;
    }

    public async Task UploadFileAsync(IFormFile file, string fileName)
    {
        // Set RegionEndpoint to your AWS region.
        AmazonS3Config config = new()
        {
            RegionEndpoint = Amazon.RegionEndpoint.USEast2
        };

        using var client = new AmazonS3Client(_awsCredentials, config);

        await using var memStream = new MemoryStream();
        await file.CopyToAsync(memStream);

        var uploadRequest = new TransferUtilityUploadRequest
        {
            InputStream = memStream,
            Key = fileName,
            BucketName = "your-bucket-name",
            CannedACL = S3CannedACL.Private
        };

        var fileTransferUtil = new TransferUtility(client);
        await fileTransferUtil.UploadAsync(uploadRequest);
    }
}

The code for uploading a file is quite simple once you understand a bit about the AWS SDK and how S3 works.

First, we set up a configuration for what region we are in. Next, we create an S3 client and copy our file over to a MemoryStream. Finally, we pass our stream, file name, S3 bucket name, and our access control permissions to a TransferUtilityUploadRequest and call UploadAsync to upload the file to S3.

If you aren't sure about access control permissions (or ACL) you can read more here: Access Control List Overview

Get a file

public class AmazonS3
{
    private readonly BasicAWSCredentials _awsCredentials;
    public AmazonS3(BasicAWSCredentials awsCredentials)
    {
        _awsCredentials = awsCredentials;
    }

    public async Task<GetObjectResponse> GetFileAsync(string fileName)
    {
         // Set RegionEndpoint to your AWS region.
        AmazonS3Config config = new()
        {
            RegionEndpoint = Amazon.RegionEndpoint.USEast2
        };

        using var client = new AmazonS3Client(_awsCredentials, config);
        return await client.GetObjectAsync("your-bucket-name", fileName);
    }
}

To get a file from S3 the only thing we need is the name of the file. Just like before we set a configuration for the region we're in and create an instance of AmazonS3Client. We can then call GetObjectAsync with the name of our bucket and the name of the file.

The response is an instance of GetObjectResponse. This object has a ResponseStream property that is a stream of the file, which you can use to write the file to disk (or whatever else you need to do).

Delete a file

public class AmazonS3
{
    private readonly BasicAWSCredentials _awsCredentials;
    public AmazonS3(BasicAWSCredentials awsCredentials)
    {
        _awsCredentials = awsCredentials;
    }

    public async Task DeleteFileAsync(string fileName)
    {
         // Set RegionEndpoint to your AWS region.
        AmazonS3Config config = new()
        {
            RegionEndpoint = Amazon.RegionEndpoint.USEast2
        };

        using var client = new AmazonS3Client(_awsCredentials, config);
        await client.DeleteObjectAsync("your-bucket-name", fileName);
    }
}

Deleting a file is the same as retrieving a file as we did above but this time we make a call to DeleteObjectAsync. This method returns an instance of DeleteObjectResponse that gives us some information about the delete request but in this case, we just ignore the response.

Conclusion

AWS S3 is a highly scalable and performant solution for storing simple objects like files. Working with it in .NET Core is quite simple once you get the basics of the AWS SDK.

If you want to learn more:

• AWS S3
• AWS SDK for .NET

What exactly is Dapper?

Dapper is a lightweight open-source micro-ORM that holds the title for the king of performance (in terms of micro-ORMs). It makes it easy to map objects to and from your database. It is also very easy to learn, and you can get a project up and running with Dapper in no time.

While this all sounds great, there are some drawbacks compared to Entity Framework. Dapper isn't going to generate any SQL queries or class models for you, doesn't come out of the box with CRUD functionality (can easily install the Contrib package to get those features), and you lose some advanced features like change tracking.

Why use Dapper?

Entity Framework can often just become the default choice. Most developers already know about it, have used it, and are comfortable with it.

In situations where you need the performance of raw SQL queries or don't need the advanced Entity Framework features, Dapper should be the choice. It affords you a great deal of control and is very easy to use.

I have also seen Dapper used as a read-only ORM. You use it to do all the reads in your database, and use another ORM (Entity) to do all of your writes. This approach can be really nice if you decouple your data access layer properly. Otherwise, it can get quite messy.

How to use it

Dapper is easy to use and learn. Going from not knowing about Dapper at all to understanding the very basics shouldn't take more than 30 minutes.

Query for a list of items

private readonly IConnectionProvider _connectionProvider;
public CarRepository(IConnectionProvider connectionProvider)
{
    _connectionProvider = connectionProvider;
}

public async Task<IEnumerable<Car>> GetListAsync()
{
    using (var connection = _connectionProvider.Create())
    {
        return await connection.QueryAsync<Car>("select * from cars");
    }
 }

First, we receive a connection provider from dependency injection. The provider is just an abstraction on creating a database connection (SqlConnection) and returns an IDbConnection.

We use that connection to call the QueryAsync method. QueryAsync is exactly what it sounds like, it asynchronously queries your database and maps it back to an object (in this case a Car object).

Query for a single item

public async Task<Car> GetByIdAsync(int carId)
{
    string sql = "select * from cars where id = @car_id";
    using (var connection = _connectionProvider.Create())
    {
        var parameters = new 
        {
            car_id = carId
        };

        return await connection.QueryFirstAsync<Car>(sql, parameters);
    }
 }

QueryFirstAsync maps the first element returned in the sequence. There is also a QueryFirstOrDefaultAsync method that returns a default value if no element is returned.

public async Task<Car> GetByIdAsync(int carId)
{
    string sql = "select * from cars where id = @car_id";
    using (var connection = _connectionProvider.Create())
    {
        var parameters = new 
        {
            car_id = carId
        };

        return await connection.QuerySingleAsync<Car>(sql, parameters);
    }
 }

QuerySingleAsync will map a single item returned from your database but will throw an exception if there isn't exactly one element returned. Dapper also has a QuerySingleOrDefaultAsync that returns a default value if there are no elements, but will still throw an exception if there is more than one element.

Querying stored procedures

public async Task<Car> GetByIdAsync(int carId)
{
    string procedure = "sp_get_car_by_id";
    using (var connection = _connectionProvider.Create())
    {
        var parameters = new 
        {
            car_id = carId
        };

        return await connection.QueryFirstAsync<Car>(procedure, parameters, 
            commandType: CommandType.StoredProcedure);
    }
 }

We can query using stored procedures by passing in a procedure name, parameters (if any), and telling Dapper that the command is a stored procedure.

Executing stored procedures

Dapper also comes with an ExecuteAsync method that allows us to execute SQL and return the number of rows affected rather than mapping data.

// Returns the number of rows affected.
public async Task<int> UpdateAsync(int carId, string color)
{
    string procedure= "sp_update_car_color";
    using (var connection = _connectionProvider.Create())
    {
        var parameters = new 
        {
            car_id = carId,
            color
        };

        return await connection.ExecuteAsync(procedure, parameters, 
            commandType: CommandType.StoredProcedure);
    }
 }

ExecuteAsync looks the same as QueryAsync, the only difference in the call being we don't pass a class to map data back to since it will only return the number of rows affected.

Closing

Dapper is an extremely performant micro-ORM that is great for situations that you have large domain models, need extreme performance, or don't need some of the more advanced features of Entity Framework.

While it is less known than Entity Framework, it is the most popular choice for micro-ORMs.

Learn more Dapper:

• Dapper Tutorial
• Dapper GitHub
• Using Dapper in ASP.NET Core applications