onggieoi / dotNet3-api-react-template

ASP.NET Core Web API + React SPA template

This repository is a template for a modern web app, powered by React.js on the front end and ASP.NET Core on the back end.

Features and design decisions

• Database seeding service to allow custom initialization logic
• Unit tests with Xunit
• Swagger for generating an interactive documentation of the back end API
• Data transfer objects for interfacing between the front and back end
• AutoMapper for automatically mapping between DTOs and entities
• TypeScript support in the React app
• Deployment through Docker

Things not included

The following are a list of other features you could add to the project to further increase code quality. I did not include them in this template since they are more complex or there are many valid solutions (I've listed a few in parantheses):

• Support for a real database (e.g. PostgreSQL)
• Migrations (useful when using a persistent database as recommended above)
• Set up user authentication (using Identity or IdentityServer)
• Use the repository pattern to avoid directly accessing the Entity Framework context from your API controllers (this might be useful when your project scales)
• End-to-end tests (Cypress, Selenium, etc.)
• Continuous integration and continuous deployment (GitHub Actions, GitLab CI/CD, etc.)
• Automated dependency updates (Dependabot)
• Automated code vulnerability scanning (GitHub security features)

Running instructions

You will have to install the .NET 5.0 SDK and Node.js.

Local development server

To start the back and front end development servers, you can go to the backend/ExampleApp directory and run dotnet run.

This command might take a while on the first run, since it also installs all the dependencies required by ASP.NET and React.

You can play around with the sample app at https://localhost:5001.

Testing

• To run the back end unit tests, navigate to backend and run dotnet test.
• To run the front end unit tests, navigate to frontend and run npm test.

Deployment instructions

First, go to the backend directory and build the release version of the app:

dotnet publish -c Release

You can now build a Docker image using the Dockerfile in the backend/ExampleApp directory.

If you want to test the build production image locally, you can also use docker-compose:

docker-compose up

Why?

I've created this template for my own use, since I couldn't find anything similar on the internet. While Microsoft provides a standard React SPA template with the ASP.NET Core SDK, it hardly replicates the best practices found in the industry.

After a long learning process and many mistakes, I've published this template: my own, opinionated view on how to best structure and organize a modern web app built with ASP.NET and React.

Acknowledgements

• Thanks to the Code4romania community for their high-quality projects (which were a big source of inspiration) and their uplifting vision for Romania.
• Thanks to the University of Bucharest Software Development Center for an opportunity to grow and apply my skills.