Giter Club home page Giter Club logo

aspnet-core-web-api-react-spa-template's Introduction

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.

aspnet-core-web-api-react-spa-template's People

Contributors

gabrielmajeri avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.