https://github.com/bradymholt/aspnet-core-vuejs-template
ASP.NET Core / Vue.js SPA Template App
https://github.com/bradymholt/aspnet-core-vuejs-template
ansible asp-net-core dotnet-core mailcatcher openiddict postgresql-database postgressql spa vue-template vuejs2
Last synced: 2 days ago
JSON representation
ASP.NET Core / Vue.js SPA Template App
- Host: GitHub
- URL: https://github.com/bradymholt/aspnet-core-vuejs-template
- Owner: bradymholt
- License: mit
- Created: 2017-05-15T17:49:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-05-24T13:25:34.000Z (almost 3 years ago)
- Last Synced: 2024-11-01T13:34:53.955Z (6 months ago)
- Topics: ansible, asp-net-core, dotnet-core, mailcatcher, openiddict, postgresql-database, postgressql, spa, vue-template, vuejs2
- Language: C#
- Size: 111 KB
- Stars: 82
- Watchers: 9
- Forks: 29
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-list-ansible - aspnet-core-vuejs-template
README
# 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
- Server
- ASP.NET Core
- PostgresSQL
- Entity Framework Core w/ EF Migrations
- JSON Web Token (JWT) authorization with OpenIddict
- Docker used for development PostgresSQL database and MailCatcher server
- Client
- Vue.js
- Webpack for asset bundling and HMR (Hot Module Replacement)
- CSS Modules
- Fetch API for REST requests
- Testing
- xUnit for .NET Core
- MailCatcher for development email delivery
- DevOps
- Ansible playbook for provisioning (Nginx reverse proxy, SSL via Let's Encrypt, PostgresSQL backups to S3)
- Ansible playbook for deployment
## Setup
1. Install the following:
- [.NET Core 1.1](https://www.microsoft.com/net/core)
- [Node.js >= v7.8.0](https://nodejs.org/en/download/)
- [Ansible >= 2.0](http://docs.ansible.com/ansible/intro_installation.html)
- [Docker](https://docs.docker.com/engine/installation/)
2. Run `npm install && npm start`
3. Open browser and navigate to [http://localhost:5000](http://localhost:5000).
## Scripts
### `npm install`
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)
### `npm start`
To start the app for development, run this command. This will:
- Run `docker-compose up` to 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
- Run Webpack dev middleware with HMR via [ASP.NET JavaScriptServices](https://github.com/aspnet/JavaScriptServices)
### `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 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](ops/) 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](https://letsencrypt.org/) 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](ops/) 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.json` file 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](https://mailcatcher.me/) 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/](http://localhost:1080/).
## Visual Studio Code config
This project has [Visual Studio Code](https://code.visualstudio.com/) tasks and debugger launch config located in .vscode/.
### Tasks
- **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/.
### Debug Launcher
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
## Credit
The following resources were helpful in setting up this template:
- [Sample for implementing Authentication with a React Flux app and JWTs](https://github.com/auth0-blog/react-flux-jwt-authentication-sample)
- [Angular 2, React, and Knockout apps on ASP.NET Core](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/)
- [Setting up ASP.NET v5 (vNext) to use JWT tokens (using OpenIddict)](http://capesean.co.za/blog/asp-net-5-jwt-tokens/)
- [Cross-platform Single Page Applications with ASP.NET Core 1.0, Angular 2 & TypeScript](https://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/)
- [Stack Overflow - Token Based Authentication in ASP.NET Core](http://stackoverflow.com/questions/30546542/token-based-authentication-in-asp-net-core-refreshed)
- [SPA example of a token based authentication implementation using the Aurelia front end framework and ASP.NET core]( https://github.com/alexandre-spieser/AureliaAspNetCoreAuth)
- [A Real-World React.js Setup for ASP.NET Core and MVC5](https://www.simple-talk.com/dotnet/asp-net/a-real-world-react-js-setup-for-asp-net-core-and-mvc)
- My own perseverance because this took a _lot_ of time to get right 😁