This repository consists of an small CRUD application that demonstrates the use of front-end JavaScript library React and the ASP.NET Core 6 Minimal Web APIs. I used this app to learn and explore how ASP.NET server and client communicate with each other. This app also includes setting up a database on the server with the relevant data for the APIs.
- Minimal APIs
- Swagger UI
- CORS Policy
- Setting up Entity Framework Core for the Database
- Creating a class for DB operations
- API Endpoints
- React JS & Bootstrap
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.MapGet("/get-all-posts", async () => await PostRepository.GetPostsAsync())
.WithTags("Posts Endpoints");
app.Run();Using CreateBuilder() to initializes a new instance of the WebApplicationBuilder class with preconfigured defaults. The code above adds an endpoint to /get-all-posts. Async is used here to retrive the data from the DB. Code below represents the GetPostsAsync()
internal async static Task<List<Post>> GetPostsAsync()
{
using (var db = new AppDBContext())
{
return await db.Posts.ToListAsync();
}
}Swagger UI allows us to visualize and interact with the API's resources without having implementation logic in place. It allows both computers and humans to understand the capabilities of a REST API without direct access to the source code. Swagger UI offers a web-based UI that provides information about the service, using the generated OpenAPI specification.
The following code integrates the Swagger UI into the App by adding the Swagger generator to the services collection.
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen(swaggerGenOptions =>
{
swaggerGenOptions.SwaggerDoc("v1", new OpenApiInfo { Title = "ASP.NET React", Version = "v1" });
});
var app = builder.Build();
app.UseSwagger();
app.UseSwaggerUI(swaggerUIOptions =>
{
swaggerUIOptions.DocumentTitle = "ASP.NET React";
swaggerUIOptions.SwaggerEndpoint("/swagger/v1/swagger.json", "Web API with POST model.");
swaggerUIOptions.RoutePrefix = String.Empty;
});Cross-origin resource sharing (CORS) is a browser mechanism which enables controlled access to resources located outside of a given domain. It extends and adds flexibility to the same-origin policy (SOP). However, it also provides potential for cross-domain attacks, if a website's CORS policy is poorly configured and implemented. CORS is not a protection against cross-origin attacks such as cross-site request forgery (CSRF).
builder.Services.AddCors(options =>
{
options.AddPolicy("CORSPolicy",
builder =>
{
builder
.AllowAnyMethod()
.AllowAnyHeader()
.WithOrigins("http://localhost:3000", "https://appname.azurestaticapps.net");
});
});
app.UseCors("CORSPolicy");Starting off with a Post.cs class to declare our properties for a Post.
Post.cs
internal sealed class Post
{
// Data Annotations
[Key]
public int PostId { get; set; }
[Required]
[MaxLength(100)]
public string Title { get; set; } = string.Empty;
[Required]
[MaxLength(100000)]
public string Content { get; set; } = string.Empty;
}The class is the DBContext class and used to query from a database and group together changes that will then be written back to the DB. It consists of two methods, OnConfiguring() and OnModelCreating().
OnConfiguring(): Configure the context to connect to SQLite database.
OnModelCreating(): This method is called only once when the first instance of a derived context is created. The idea is to override this method and populate with the pre-existing data.
AppDBContext.cs
internal sealed class AppDBContext : DbContext
{
public DbSet<Post> Posts { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder dbContextOptionsBuilder) =>
dbContextOptionsBuilder.UseSqlite("Data Source=./Data/AppDB.db");
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
Post[] postsToSeed = new Post[6];
for (int i = 1; i <= 6; i++)
{
postsToSeed[i - 1] = new Post
{
PostId = i,
Title = $"Post {i}",
Content = $"This is post {i} and it has some content."
};
}
modelBuilder.Entity<Post>().HasData(postsToSeed);
}
}Using PostRepository.cs class to query the DB with appropriate CRUD operations. The class is of type static and methods are defined as asynchronous tasks.
This includes 5 methods:
GetPostsAsync():
internal async static Task<List<Post>> GetPostsAsync()
{
using (var db = new AppDBContext())
{
return await db.Posts.ToListAsync();
}
}GetPostByIdAsync():
internal async static Task<Post> GetPostByIdAsync(int postId)
{
using (var db = new AppDBContext())
{
return await db.Posts.FirstOrDefaultAsync(post => post.PostId == postId);
}
}CreatePostAsync():
internal async static Task<bool> CreatePostAsync(Post postToCreate)
{
using (var db = new AppDBContext())
{
try
{
await db.Posts.AddAsync(postToCreate);
return await db.SaveChangesAsync() >= 1;
}
catch (Exception e)
{
return false;
}
}
}UpdatePostAsync():
internal async static Task<bool> UpdatePostAsync(Post postToUpdate)
{
using (var db = new AppDBContext())
{
try
{
db.Posts.Update(postToUpdate);
return await db.SaveChangesAsync() >= 1;
}
catch (Exception e)
{
return false;
}
}
}DeletePostAsync():
internal async static Task<bool> DeletePostAsync(int postId)
{
using (var db = new AppDBContext())
{
try
{
Post postToDelete = await GetPostByIdAsync(postId);
db.Remove(postToDelete);
return await db.SaveChangesAsync() >= 1;
}
catch (Exception e)
{
return false;
}
}
}For this phase, I created a React project within the Visual Studio Code which acts as the client side. The index.js lets us render the context of App.js. All functions are declared within the Apps.js such as:
- getPosts() - Fetches the 'GET' response from the API Endpoint
- deletePost() - Fetches and executes the 'DELETE' method using the post Id
- renderPostsTable() - This function holds the front end for the table where data is populated
- onPostCreated() - Part of the main functionality, to create a new post
- onPostUpdated() - Part of the additional functionality, adds ability to update the post
- onPostDeleted() - Part of the additional functionality, adds ability to delete the post
Additional components are within the Components folder:
PostCreateForm.js- Linked with onPostCreated()
{showingCreateNewPostForm && <PostCreateForm onPostCreated={onPostCreated} />}PostUpdateForm.js- Linked with onPostUpdated()
{postCurrentlyBeingUpdated !== null && <PostUpdateForm post={postCurrentlyBeingUpdated} onPostUpdated={onPostUpdated} />}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent