Asp.NETCore 2.0 Vue 2 with WebApi Authorization Starter template

This repo contains an AspNetCore 2.1 + Vue.js 2 starter template (VS2017) + NetCore WebAPI + OpenIddict authorization.

Table of Contents

• Features
• TechStack
• Prerequisites
• Installation - Getting Started!
• Extras
• Special Thanks
• License
• Vue & ASP.NET Core Consulting & training

Features

• Full responsive app accessed by Web or WebAPI (eg. postman client)

• Role level permission (admin, manager, user)

• Role context page display

• Admin can manage users, users groups, file categories, check users activity logs

• User with role 'manager' has rigth to upload files to selected group and file category or private files with drag and drop functionality

• Users can download files from groups they belongs to

TechStack

• ASP.NET Core 2.1
  • Web API
• VueJS 2
  • Vuex (State Store)
• OpenIddict 2.0.0
  • Easy-to-use OpenID Connect server for ASP.NET Core
• Webpack 4
  • HMR (Hot Module Replacement/Reloading)
• Vuetifyjs
  • Material Component Framework for Vue

Prerequisites:

• nodejs > 6
• VS2017
• dotnet core 2.1

Installation / Getting Started:

• Clone this repo
• At the repo's root directory run dotnet restore
• Restore Node dependencies by running npm install in root folder (there is package.json and wepack config files) and this way install all required modules
• Build the Vue web application (npm run build)

finally

• Run the application in VSCode or Visual Studio 2017 (Hit F5) or command ('dotnet run') - Vue Dev Tools are enebled
• Browse to http://localhost:53703

Extras

• Get Chrome DevTools for Vue here

Webpack build

The css is not generated while you are in development mode. They are going to be created only when you will use the dotnet publish command or as an alternative, you can also go and type npm run build -- --prod which will launch the production build with the minification and extraction of the files.

Important: Currently, webpack clean the entire wwwroot folder within the .Net project. So, if you have static files, move them within the ./ClientApp/static/ folder.

Webpack hot-reload

When the .Net process is started, dotnet run your app, you will have to wait a little that the file are published in your wwwroot folder. After it is completed, you will be able to access your application at http://localhost:53703. Any modification made within the ClientApp folder will trigger on save a live update within the browser. Just refresh a broweser to see the changes.

Special Thanks

List of github repos which have been my inspiration to build this template and may contains part of their source code.

https://github.com/MarkPieszak/aspnetcore-Vue-starter

https://github.com/andersco/FreedomCalculator2

https://github.com/bradyholt/aspnet-core-vuejs-template

https://github.com/0xFireball/PenguinUpload

https://github.com/Nordes/HoNoSoFt.DotNet.Web.Spa.ProjectTemplates

Found a Bug? Want to Contribute?

Nothing's ever perfect, but please let me know by creating an issue (make sure there isn't an existing one about it already), and we'll try and work out a fix for it! If you have any good ideas, or want to contribute, feel free to either make an Issue with the Proposal, or just make a PR from your Fork.

License

Looking for Vue / JavaScript or ASP.NET Consulting + Training + support?

Contact me @ [email protected], and let's talk about your projects needs!