{"id":13752679,"url":"https://github.com/bradymholt/aspnet-core-vuejs-template","last_synced_at":"2025-04-19T04:14:56.954Z","repository":{"id":66149753,"uuid":"91367351","full_name":"bradymholt/aspnet-core-vuejs-template","owner":"bradymholt","description":"ASP.NET Core / Vue.js SPA Template App","archived":false,"fork":false,"pushed_at":"2022-05-24T13:25:34.000Z","size":114,"stargazers_count":82,"open_issues_count":0,"forks_count":29,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T06:51:14.245Z","etag":null,"topics":["ansible","asp-net-core","dotnet-core","mailcatcher","openiddict","postgresql-database","postgressql","spa","vue-template","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bradymholt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["bradymholt"]}},"created_at":"2017-05-15T17:49:33.000Z","updated_at":"2024-04-30T11:59:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"8260cdf1-d646-434d-a01b-81a70dab7b12","html_url":"https://github.com/bradymholt/aspnet-core-vuejs-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradymholt%2Faspnet-core-vuejs-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradymholt%2Faspnet-core-vuejs-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradymholt%2Faspnet-core-vuejs-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradymholt%2Faspnet-core-vuejs-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bradymholt","download_url":"https://codeload.github.com/bradymholt/aspnet-core-vuejs-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249191180,"owners_count":21227515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ansible","asp-net-core","dotnet-core","mailcatcher","openiddict","postgresql-database","postgressql","spa","vue-template","vuejs2"],"created_at":"2024-08-03T09:01:09.282Z","updated_at":"2025-04-19T04:14:56.933Z","avatar_url":"https://github.com/bradymholt.png","language":"C#","funding_links":["https://github.com/sponsors/bradymholt"],"categories":["C# #","spa"],"sub_categories":[],"readme":"# ASP.NET Core / Vue.js SPA Template App\n\nThis app is a template application using ASP.NET Core for a REST/JSON API server and Vue.js for a web client.\n\n## Overview of Stack\n- Server\n  - ASP.NET Core\n  - PostgresSQL\n  - Entity Framework Core w/ EF Migrations\n  - JSON Web Token (JWT) authorization with OpenIddict\n  - Docker used for development PostgresSQL database and MailCatcher server\n- Client\n  - Vue.js\n  - Webpack for asset bundling and HMR (Hot Module Replacement)\n  - CSS Modules\n  - Fetch API for REST requests\n- Testing\n  - xUnit for .NET Core\n  - MailCatcher for development email delivery\n- DevOps\n  - Ansible playbook for provisioning (Nginx reverse proxy, SSL via Let's Encrypt, PostgresSQL backups to S3)\n  - Ansible playbook for deployment\n\n## Setup\n\n1. Install the following:\n   - [.NET Core 1.1](https://www.microsoft.com/net/core)\n   - [Node.js \u003e= v7.8.0](https://nodejs.org/en/download/)\n   - [Ansible \u003e= 2.0](http://docs.ansible.com/ansible/intro_installation.html)\n   - [Docker](https://docs.docker.com/engine/installation/)\n2. Run `npm install \u0026\u0026 npm start`\n3. Open browser and navigate to [http://localhost:5000](http://localhost:5000).\n\n## Scripts\n\n### `npm install`\n\nWhen first cloning the repo or adding new dependencies, run this command.  This will:\n\n- Install Node dependencies from package.json\n- Install .NET Core dependencies from api/api.csproj and api.test/api.test.csproj (using dotnet restore)\n\n### `npm start`\n\nTo start the app for development, run this command.  This will:\n\n- Run `docker-compose up` to ensure the PostgreSQL and MailCatcher Docker images are up and running\n- Run dotnet watch run which will build the app (if changed), watch for changes and start the web server on http://localhost:5000\n- Run Webpack dev middleware with HMR via [ASP.NET JavaScriptServices](https://github.com/aspnet/JavaScriptServices)\n\n### `npm run migrate`\n\nAfter 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.\n\n### `npm test`\n\nThis will run the xUnit tests in api.test/ and the Vue.js tests in client-web.test/.\n\n### `npm run provision:prod`\n\n _Before running this script, you need to create an ops/hosts file first.  See the [ops README](ops/) for instructions._\n\n 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:\n  - Install Nginx\n  - Generate a SSL certificate from [Let's Encrypt](https://letsencrypt.org/) and configure Nginx to use it\n  - Install .Net Core\n  - Install Supervisor (will run/manage the ASP.NET app)\n  - Install PostgreSQL\n  - Setup a cron job to automatically backup the PostgresSQL database, compress it, and upload it to S3.\n  - Setup UFW (firewall) to lock everything down except inbound SSH and web traffic\n  - Create a deploy user, directory for deployments and configure Nginx to serve from this directory\n\n### `npm run deploy:prod`\n\n_Before running this script, you need to create a ops/hosts file first.  See the [ops README](ops/) for instructions._\n\nThis script will:\n - Build release Webpack bundles\n - Package the .NET Core application in Release mode (dotnet publish)\n - Run the ops/deploy.yml Ansible playbook to deploy this app to hosts in /ops/hosts inventory file.  This does the following:\n  - Copies the build assets to the remote host(s)\n  - Updates the `appsettings.json` file with PostgresSQL credentials specified in ops/hosts file and the app URL (needed for JWT tokens)\n  - Restarts the app so that changes will be picked up\n\n## Development Email Delivery\n\nThis 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\nin the MailCacher web interface at [http://localhost:1080/](http://localhost:1080/).\n\n## Visual Studio Code config\n\nThis project has [Visual Studio Code](https://code.visualstudio.com/) tasks and debugger launch config located in .vscode/.\n\n### Tasks\n\n- **Command+Shift+B** - Runs the \"build\" task which builds the api/ project\n- **Command+Shift+T** - Runs the \"test\" task which runs the xUnit tests in api.test/ and Mocha/Enzyme tests in client-web.test/.\n\n### Debug Launcher\n\nWith 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.\n\n- **Debug api/ (server)** - Runs the vscode debugger (breakpoints) on the api/ .NET Core app\n- **Debug client-web.test/ (Mocha tests)** - Runs the vscode debugger on the client-web.test/ Mocha tests\n\n## Credit\n\nThe following resources were helpful in setting up this template:\n\n- [Sample for implementing Authentication with a React Flux app and JWTs](https://github.com/auth0-blog/react-flux-jwt-authentication-sample)\n- [Angular 2, React, and Knockout apps on ASP.NET Core](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/)\n- [Setting up ASP.NET v5 (vNext) to use JWT tokens (using OpenIddict)](http://capesean.co.za/blog/asp-net-5-jwt-tokens/)\n- [Cross-platform Single Page Applications with ASP.NET Core 1.0, Angular 2 \u0026 TypeScript](https://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/)\n- [Stack Overflow - Token Based Authentication in ASP.NET Core](http://stackoverflow.com/questions/30546542/token-based-authentication-in-asp-net-core-refreshed)\n- [SPA example of a token based authentication implementation using the Aurelia front end framework and ASP.NET core]( https://github.com/alexandre-spieser/AureliaAspNetCoreAuth)\n- [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)\n- My own perseverance because this took a _lot_ of time to get right 😁\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradymholt%2Faspnet-core-vuejs-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbradymholt%2Faspnet-core-vuejs-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradymholt%2Faspnet-core-vuejs-template/lists"}