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

Register Page

Forgot Password Page

List Pages

Create/Edit Pages

ASP.NET Core Web API

Project solution:

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

5l1v3r1 / nucleus Goto Github PK

nucleus's Introduction