Awesome Open Source
Awesome Open Source
Nucleus

Nucleus

Web API startup template with a Vue Client application.



Requirements

  • Vue CLI v3.x or later.
  • Nodejs v10.x or later.
  • Visual Studio 2019 v16.3 or later for Windows.
  • Visual Studio 2019 for Mac v8.3 or later for macOS.

How to Start?

Local Environment

  • Select Nucleus.Web.Api project "Set as Startup Project"
  • Open "Package Manager Console" and select default project as src/Nucleus.EntityFramework
  • Run update-database command to create database.
  • Run(F5 or CTRL+F5) Web API project first
  • Run yarn command at location src/Nucleus.Web.Vue to install npm packages.
  • Run yarn serve command to run Vue application.
  • Admin user name and password : admin/123qwe

Run with Docker

  • Run docker-compose build command.
  • Run docker-compose up -d command to run application.
  • Go to http://localhost:36221

To change the environment

  • Run docker-compose -f docker-compose-production.yml build command.
  • Run docker-compose -f docker-compose-production.yml up -d command
  • Go to http://localhost:36211

Vue Application Screenshots

Login Page

Vue Client Demo

Register Page

Vue Client Demo

Forgot Password Page

Vue Client Demo

List Pages

Vue Client Demo

Create/Edit Pages

Vue Client Demo

ASP.NET Core Web API

Project solution:

Project Solution

Swagger UI

Swagger UI

Document

Swagger UI Authorize

You can login on swagger ui by using a bearer token. So you can make requests to authorized end-points. Check the following steps.

  • In swagger ui, execute api/login to get a bearer token.
  • Copy bearer token that is in api/login response.
  • Click Authorize button in swagger ui page.
  • Enter the token like Bearer <token> and click Authorize.
  • Now you can make requests to authorized end-points.

Adding New Language

  • Add json file to store language keys and values to Nucleus\src\Nucleus.Web.Vue\src\assets\localizations\your_language.json
  • Copy en.json content and translate the values to target language.
  • Add country flag to Nucleus.Web.Vue\src\assets\images\icons\flags\your_country.png. Get images from http://www.iconarchive.com/show/flag-icons-by-gosquared.html
  • Add language to language selection menu in Nucleus\src\Nucleus.Web.Vue\src\account\account-layout.vue and Nucleus\src\Nucleus.Web.Vue\src\admin\components\menu\top-menu\top-menu.vue like following

account-layout.vue

<v-menu>
    <template v-slot:activator="{ on }">
        <v-btn color="primary" dark outlined rounded v-on="on">
            <img :src="require('@/assets/images/icons/flags/' + selectedLanguage.languageCode + '.png')" class="mr-2 ml-1" />
            {{selectedLanguage.languageName}}
        <v-icon dark class="ml-3">mdi-menu-down</v-icon>
        </v-btn>
    </template>

    <v-list>
        <v-list-item @click="changeLanguage('en', 'English')">
            <img src="@/assets/images/icons/flags/en.png" class="mr-2" />
            <v-list-item-title>English</v-list-item-title>
        </v-list-item>
        <v-list-item @click="changeLanguage('tr', 'Türkçe')">
            <img src="@/assets/images/icons/flags/tr.png" class="mr-2" />
            <v-list-item-title>Türkçe</v-list-item-title>
        </v-list-item>
    </v-list>
</v-menu>

top-menu.vue

<v-menu>
    <template v-slot:activator="{ on }">
        <v-btn color="primary" v-on="on">
            <img :src="require('@/assets/images/icons/flags/' + selectedLanguage.languageCode + '.png')" class="mr-2 ml-1" />
            {{selectedLanguage.languageName}}
            <v-icon dark class="ml-3">mdi-menu-down</v-icon>
        </v-btn>
    </template>

    <v-list>
        <v-list-item @click="changeLanguage('en', 'English')">
            <img src="@/assets/images/icons/flags/en.png" class="mr-2" />
            <v-list-item-title>English</v-list-item-title>
        </v-list-item>
        <v-list-item @click="changeLanguage('tr', 'Türkçe')">
            <img src="@/assets/images/icons/flags/tr.png" class="mr-2" />
            <v-list-item-title>Türkçe</v-list-item-title>
        </v-list-item>
    </v-list>
</v-menu>

Adding New Permission

  • All definitions are made in DefaultPermissions.
  • First add permission name as const like public const string PermissionNameABC = "Permissions_ABC";.
  • Add a permission entity that type Permission.cs class and give a hard-coded guid id.
  • Last, add this permission variable to DefaultPermissions.All() method.

Tags & Technologies

Lincense

MIT License


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
c-sharp (12,224
typescript (11,188
vue (4,186
vuejs (1,099
bootstrap (667
swagger (363
asp-net-core (192
jwt-authentication (85
entity-framework-core (65
vuetify (63