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

Aspnet Core Vuejs Template

Author Avatar Theme by Bradymholt
Updated: 24 May 2022
83 Stars

ASP.NET Core / Vue.js SPA Template App

Github

Categories

Vue

Overview

The ASP.NET Core / Vue.js SPA Template App is a template application that combines ASP.NET Core for a REST/JSON API server and Vue.js for a web client. The server side of the app is built using ASP.NET Core and PostgresSQL as the database, and it utilizes Entity Framework Core for database migrations. JSON Web Token (JWT) authorization with OpenIddict is used for authentication. The app is containerized using Docker for development purposes. On the client side, Vue.js is used along with Webpack for asset bundling and Hot Module Replacement (HMR) for a smoother development experience. The app also includes CSS Modules for styling and uses the Fetch API for sending REST requests. Testing is done using xUnit for .NET Core on the server side and Vue.js tests on the client side. For deployment and server management, Ansible has been used to provision and deploy the app. The playbook includes tasks for setting up Nginx reverse proxy, SSL via Let’s Encrypt, PostgresSQL backups to S3, and more.

Features

  • ASP.NET Core server with PostgresSQL as the database
  • Vue.js web client with webpack for asset bundling and HMR
  • JSON Web Token (JWT) authorization with OpenIddict
  • Docker used for development with PostgresSQL database and MailCatcher server
  • Entity Framework Core with EF Migrations for database management
  • Fetch API for REST requests
  • xUnit for .NET Core testing
  • Ansible playbook for provisioning and deployment

Installation

To set up the ASP.NET Core / Vue.js SPA Template App, follow these steps:

  1. Install the following prerequisites on your machine:

    • .NET Core 1.1
    • Node.js >= v7.8.0
    • Ansible >= 2.0
    • Docker

  2. Run the following command to install the dependencies:

    npm install

  3. Start the app for development by running this command:

    npm start

  4. Open your browser and navigate to http://localhost:5000 to access the app.

  5. Additional scripts are available for specific tasks:

    • npm run migrate: Use this command after making changes to Entity Framework models in api/Models/ to generate and run a migration on the database.
    • npm test: Run xUnit tests in api.test/ and Vue.js tests in client-web.test/.
    • npm run provision:prod: Use this script to run the Ansible playbook for provisioning the production environment. Before running the script, create an ops/hosts file as instructed in the ops README.
    • npm run deploy:prod: This script packages the app in release mode and runs the Ansible playbook to deploy it to the production environment. Before running the script, create an ops/hosts file as instructed in the ops README.

Summary

The ASP.NET Core / Vue.js SPA Template App is a powerful template application that combines the functionality of ASP.NET Core and Vue.js. It provides an easy-to-use development environment with Docker and includes various features such as JWT authorization, database management with Entity Framework Core, and automated testing. The app can be easily provisioned and deployed using the provided Ansible playbooks. With its comprehensive set of features and installation guide, the ASP.NET Core / Vue.js SPA Template App is a great starting point for building modern web applications.