GitXplorerGitXplorer
G

aspnet-core-web-api-react-spa-template

public
5 stars
2 forks
0 issues

Commits

List of commits on branch master.
Unverified
bec669873172f16d706f00a91463c034832a9237

Set up deployment through Docker

GGabrielMajeri committed 4 years ago
Unverified
797883b25bc2c4a7c1bd79da301776be066627ce

Add instructions for running the project

GGabrielMajeri committed 4 years ago
Unverified
cfc42ab477de9c38eff582b82e618ee56098a171

Add a project `README`

GGabrielMajeri committed 4 years ago
Unverified
da726c11b6b31dd9811170a9affa5c3f4e52c6dd

Add an useful unit test

GGabrielMajeri committed 4 years ago
Unverified
6a822e01866aa5ba31b0193b8788e60d7a159b14

Connect React app to back end server

GGabrielMajeri committed 4 years ago
Unverified
5fc0dcee731c86ac2539e5db0b814a441f20031d

Set up back end code

GGabrielMajeri committed 4 years ago

README

The README file for this repository.

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

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.