This project is an example how to use flexibility of OData and combine it with React app. The whole solution is widely explained in my blog post: http://www.michalbialecki.com/2020/03/19/odata-as-a-flexible-data-feed-for-react-search/
In this project I used most up-to-date frameworks and packages available. So this is:
- Web API project in .Net Core 3.1
- Entity Framework Core, version 3.1.2
- OData from package Microsoft.AspNetCore.OData, version 7.4.0-beta
- React, version 16 with many other front-end packages
I created it as an example how any kind of search and filtering on the front-end can be easily solved on the back-end side with OData integration.
- OData is a great technology that is very easy and fast to integrate with Entity Framework Core and gives powerful filtering options. It allows you to define operations in url like: filtering, ordering, getting count and top elements. Without and coding needed, it generates a SQL scripts and run it against MS SQL database.
- to ease working with the API, I integrated Swagger, an interactive documentation, that is available under
/swagger
url - I used hooks in React to follow the latest standards and implement the greatest coding experience. However, I don't feel very strong in React, so please don't take front-end part as a best solution reference
Note that this project needs to be connected to MS SQL database, so you would need to have one to run it
- Copy a connection string to
appsettings.json
file, as a value for elementLocalDB
. Mine looks like this:Data Source=localhost;Initial Catalog=aspnetcore;Integrated Security=True
- Go to
/MichalBialecki.com.OData.Search.Web
directory and run commanddotnet build
- Go to
/MichalBialecki.com.OData.Search.Web/ClientApp
and run commandnpm install
- Go back to
/MichalBialecki.com.OData.Search.Web
and run commanddotnet run
Note that there is also a Swagger installed, so you can see all endpoints when you go to url /swagger
.
You can also generate profiles to fill in you DB. To do so just run the POST request on url /api/Profiles/GenerateProfiles
.
I recorded a short video that shows how it works in practice. Have a look: