Bootstrap Templates & Themes Logo Bootstrap Templates & Themes
Aspnet Core React Template screenshot

Aspnet Core React Template

Author Avatar Theme by Bradymholt
Updated: 23 Feb 2023
642 Stars

ASP.NET Core 3.1 / React SPA Template App

Github Live Preview

Categories

React

Overview

The ASP.NET Core / React SPA Template App is a template application using ASP.NET Core 3.1 for a REST/JSON API server and React for a web client. It utilizes various technologies such as PostgreSQL, Entity Framework Core, JSON Web Token (JWT) authorization, and Docker for development purposes. The app also includes features for testing and DevOps, making it a comprehensive solution for building web applications.

Features

  • ASP.NET Core 3.1 server for REST/JSON API
  • React 16 for web client
  • PostgreSQL 10 for database
  • Entity Framework Core with EF Migrations for managing database migrations
  • JSON Web Token (JWT) authorization for secure authentication
  • Docker used for setting up a PostgreSQL database and a MailCatcher server
  • Webpack for asset bundling and Hot Module Replacement (HMR)
  • CSS Modules for modular and scalable CSS styling
  • Fetch API for making REST requests
  • Testing with xUnit for .NET Core and Enzyme for React components
  • MailCatcher for simulating email delivery during development
  • Ansible playbook for provisioning a server, including Nginx reverse proxy, SSL via Let’s Encrypt, and PostgreSQL backups to S3
  • Ansible playbook for deployment

Installation

To set up and run the ASP.NET Core / React SPA Template App, follow these steps:

  1. Install the following dependencies on your machine:

    • .NET Core 3.1
    • Node.js (version >= 8)
    • Ansible (version >= 2.6)
    • Docker

  2. Clone the repository and navigate to the project directory.

  3. Install the Node and .NET Core dependencies by running the command:

    npm install

  4. Start the app for development by running the command:

    npm start

    This will ensure that the PostgreSQL and MailCatcher Docker images are up and running, build the app if changes are made, watch for further changes, and start the web server on http://localhost:5000.

  5. To generate and run a migration on the database after making changes to Entity Framework models, run the command:

    npm run migrate

  6. Run the tests by executing the command:

    npm test

  7. To provision a production environment, create an ops/config.yml file and then run the command:

    npm run provision:prod

    Make sure to follow the instructions in the ops README file.

Summary

The ASP.NET Core / React SPA Template App provides developers with a comprehensive starting point for building web applications. It combines the power of ASP.NET Core for the server-side API and React for the front-end client. The app includes features such as authentication via JSON Web Tokens, testing with xUnit and Enzyme, and DevOps automation with Ansible. With its extensive documentation and easy installation process, the template app is a valuable resource for developers looking to accelerate the development of ASP.NET Core and React-based applications.