ASP.NET Core / Vue.js SPA Template App
This app is a template application using ASP.NET Core for a REST/JSON API server and Vue.js for a web client.
Overview of Stack
- ASP.NET Core
- Entity Framework Core w/ EF Migrations
- JSON Web Token (JWT) authorization with OpenIddict
- Docker used for development PostgresSQL database and MailCatcher server
- Webpack for asset bundling and HMR (Hot Module Replacement)
- CSS Modules
- Fetch API for REST requests
- xUnit for .NET Core
- MailCatcher for development email delivery
- Ansible playbook for provisioning (Nginx reverse proxy, SSL via Let's Encrypt, PostgresSQL backups to S3)
- Ansible playbook for deployment
- Install the following:
npm install && npm start
- Open browser and navigate to http://localhost:5000.
When first cloning the repo or adding new dependencies, run this command. This will:
- Install Node dependencies from package.json
- Install .NET Core dependencies from api/api.csproj and api.test/api.test.csproj (using dotnet restore)
To start the app for development, run this command. This will:
docker-compose upto ensure the PostgreSQL and MailCatcher Docker images are up and running
- Run dotnet watch run which will build the app (if changed), watch for changes and start the web server on http://localhost:5000
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.
This will run the xUnit tests in api.test/ and the Vue.js tests in client-web.test/.
npm run provision:prod
Before running this script, you need to create an ops/hosts 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. This prepares the hosts to recieve deployments by doing the following:
- Install Nginx
- Generate a SSL certificate from Let's Encrypt and configure Nginx to use it
- Install .Net Core
- Install Supervisor (will run/manage the ASP.NET app)
- Install PostgreSQL
- Setup a cron job to automatically backup the PostgresSQL database, compress it, and upload it to S3.
- Setup UFW (firewall) to lock everything down except inbound SSH and web traffic
- Create a deploy user, directory for deployments and configure Nginx to serve from this directory
npm run deploy:prod
Before running this script, you need to create a ops/hosts file first. See the ops README for instructions.
This script will:
- Build release Webpack bundles
- Package the .NET Core application in Release mode (dotnet publish)
- Run the ops/deploy.yml Ansible playbook to deploy this app to hosts in /ops/hosts inventory file. This does the following:
- Copies the build assets to the remote host(s)
- Updates the
appsettings.jsonfile with PostgresSQL credentials specified in ops/hosts file and the app URL (needed for JWT tokens)
- Restarts the app so that changes will be picked up
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/.
Visual Studio Code config
This project has Visual Studio Code tasks and debugger launch config located in .vscode/.
- Command+Shift+B - Runs the "build" task which builds the api/ project
- Command+Shift+T - Runs the "test" task which runs the xUnit tests in api.test/ and Mocha/Enzyme tests in client-web.test/.
With the following debugger launch configs, you can set breakpoints in api/ or the the Mocha tests in client-web.test/ and have full debugging support.
- Debug api/ (server) - Runs the vscode debugger (breakpoints) on the api/ .NET Core app
- Debug client-web.test/ (Mocha tests) - Runs the vscode debugger on the client-web.test/ Mocha tests
The following resources were helpful in setting up this template:
- Sample for implementing Authentication with a React Flux app and JWTs
- Angular 2, React, and Knockout apps on ASP.NET Core
- Setting up ASP.NET v5 (vNext) to use JWT tokens (using OpenIddict)
- Cross-platform Single Page Applications with ASP.NET Core 1.0, Angular 2 & TypeScript
- Stack Overflow - Token Based Authentication in ASP.NET Core
- SPA example of a token based authentication implementation using the Aurelia front end framework and ASP.NET core
- A Real-World React.js Setup for ASP.NET Core and MVC5
- My own perseverance because this took a lot of time to get right