Home

Awesome

ASP.NET Core / React SPA Template App

<img align="left" src="https://user-images.githubusercontent.com/759811/210273710-b13913e2-0a71-4d9d-94da-1fe538b8a73e.gif"/> <br/>

 Would you take a quick second and ⭐️ my repo?

<br/>

This app is a template application using ASP.NET Core 3.1 for a REST/JSON API server and React for a web client.

screen recording 2017-06-10 at 04 12 pm

Overview of Stack

Demo

Demo Video

Setup

  1. Install the following:
  2. Run npm install && npm start
  3. Open browser and navigate to http://localhost:5000.

This template was developed and tested on macOS Sierra but should run on Windows (for development) as well. If you experience any issues getting it to run on Windows and work through them, please submit a PR! The production provisioning and deployment scripts (provision:prod and deploy:prod) use Ansible and require a Linux/Ubuntu >= 16.04 target host.

Scripts

npm install

When first cloning the repo or adding new dependencies, run this command. This will:

npm start

To start the app for development, run this command. This will:

npm run migrate

After making changes to Entity Framework models in api/Models/, run this command to generate and run a migration on the database. A timestamp will be used for the migration name.

npm test

This will run the xUnit tests in api.test/ and the Mocha/Enzyme tests in client-react.test/.

npm run provision:prod

Before running this script, you need to create an ops/config.yml file first. See the ops README for instructions.

This will run the ops/provision.yml Ansible playbook and provision hosts in ops/hosts inventory file. Ubuntu 16.04 (Xenial) and Ubuntu 18.04 (Bionic) is supported and tested.

This prepares the hosts to recieve deployments by doing the following:

npm run deploy:prod

Before running this script, you need to create a ops/config.yml file first. See the ops README for instructions.

This script will:

This does the following:

Entity Framework Migrations are automatically applied upon startup so they will run when the app restarts.

Development Email Delivery

This template includes a MailCatcher Docker image so that when email is sent during development (i.e. new user registration), it can be viewed in the MailCacher web interface at http://localhost:1080/.

Older Versions

This template was originally created on .NET Core 1.0 and has been upgraded with new versions of .NET Core. Older versions can be found on the Releases page.

Visual Studio Code config

This project has Visual Studio Code tasks and debugger launch config located in .vscode/.

Tasks

Debug Launcher

With the following debugger launch configs, you can set breakpoints in api/ or the the Mocha tests in client-react.test/ and have full debugging support.

Credit

The following resources were helpful in setting up this template: