GithubHelp home page GithubHelp logo

herbat73 / genvue Goto Github PK

View Code? Open in Web Editor NEW
132.0 8.0 25.0 493 KB

GenVue is a hostable, web application that lets confidential users upload and share private files. Tech stack: Net Core 2.0 + Vue.js + Vuex + OpenIddict + Vuetifyjs + EF + SQLServer/Postgress

License: MIT License

JavaScript 11.76% HTML 0.56% Vue 33.47% CSS 0.34% C# 53.87%
vue vuejs2 netcore2 netcore webapi openiddict babel vuetifyjs sqlserver postgressql

genvue's Introduction

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

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

Full responsive app

  • Role level permission (admin, manager, user)

Role level permission

  • Role context page display

Role context page display

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

Admin can manage

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

Manager role

  • Users can download files from groups they belongs to

Manager role

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

MIT License


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

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

genvue's People

Contributors

herbat73 avatar lastlink avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

genvue's Issues

Cannot Login / Build Project

Due to the recent releases of OpenIddict, I've tried for the past three days and cannot successfully get this template to work :( It's an amazing template, and I'm sure I'm missing a few simple mistakes. I've modified the Startup.cs file according to the migration to openiddict 2.0.0-rc3 documentation, and even though the project now builds I still cannot successfully connect the api calls with the openiddict methods and vice versa.

Instead of the wildcard nuget packages included with this download, openiddict 2.0.0-*, would you know which specific packages you used to have the template run successfully? Thank you very much for your template and any help would be greatly appreciated!

Reauth controller method implementation

I'm not that very familiar with OpenIddict (hence looking at your solution). I noticed that the endpoint "/reauth" was not implemented. I'd like to be able to re-login the user when the user comes back using their stored username and token. How would I do that?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.