Docs v1.6.0  /  ASP.NET Core HTML5 Angular Vue.js React Laravel Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core MVC ASP.NET MVC ASP.NET MVC + Webpack
OTHER
Settings panel Layout helpers

Instructions can vary depending on whatever you use theme settings panel or not. Please select the appropriate version.

aspnet-core-starter directory structure

aspnet-core-starter
AspnetCoreStarter
Pages
Layouts
Partials
_LayoutFooter.cshtml
_LayoutNavbar.cshtml
_LayoutSidenav.cshtml
_Application.cshtml
Main layout
_Layout1.cshtml
_Layout1Flex.cshtml
...
_ViewStart.cshtml
...
Properties
wwwroot
css
Application stylesheets
site.scss
js
Application javascripts
site.js
vendor
Appwork's sources
css
CSS sources
_appwork
Appwork includes
_custom-variables
Custom variables
_theme
Theme includes
_uikit
UIKit includes
pages
Page styles
rtl
Styles with RTL support enabled
appwork.scss
appwork-material.scss
appwork-dark.scss
...
fonts
Iconic fonts
fontawesome.dist.css
ionicons.dist.css
...
js
Javascripts
bootstrap.js
dropdown-hover.js
...
libs
Third-party libraries
animate-css
autosize
block-ui
...
favicon.ico
Gulpfile.js
package.json
build-config.js
webpack.config.js
...

Assets compilation

ASP.NET Core project is integrated with Webpack and Gulp (see available tasks):

  • All .scss files within wwwroot/ directory are processed by node-sass. Output files will have the next filename format: {filename}.dist.css. Example: 

    wwwroot/css/site.scss
    body {
  background: #fff;
}
    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <environment include="Development"><link rel="stylesheet" href="~/css/site.dist.css" /></environment>
<environment exclude="Development"><link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true" /></environment>

  • All .js files within wwwroot/ directory are processed by Webpack. Output files will have the next filename format: {filename}.dist.js. Example: 

    wwwroot/js/site.js
    $(() => {
  alert('Content loaded!')
})
    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/js/site.dist.js"></script></environment>
<environment exclude="Development"><script src="~/js/site.dist.js" asp-append-version="true"></script></environment>
If you don't want to process a file by node-sass or Webpack, add _ prefix to the file name. For example, _partial.scss, _partial.js

Third-party plugins

The starter project by default includes all third-party plugins.
Optionally you can remove unwanted plugins to reduce output assets size and compile time:

  1. Remove unwanted packages from the dependencies section in the AspnetCoreStarter/package.json file.
  2. Remove related directories within the AspnetCoreStarter/wwwroot/vendor/libs directory.
  3. Remove related @imports and @includes in the AspnetCoreStarter/wwwroot/vendor/css/_theme/_libs.scss file.

For example, if you want to exclude plyr plugin, you will need to:

  1. Remove plyr dependency in the AspnetCoreStarter/package.json file.
  2. Remove the AspnetCoreStarter/wwwroot/vendor/libs/plyr directory.
  3. Remove @import "../../libs/plyr/mixins"; and @include plyr-theme($background, $color); lines in the AspnetCoreStarter/wwwroot/vendor/css/_theme/_libs.scss file.

Installation

Windows
  1. Download and install latest Node.js LTS: https://nodejs.org/en/.
  2. Download and install Git: https://git-scm.com/downloads.
  3. Logout from the system and login again.
  4. Launch cmd.exe as an administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.

  5. If you're using Visual Studio:

    1. Make your Node.js install prioritized. You can do it in two ways:

      • Open Tools -> Options -> Projects and solutions -> Web Package Management. Move $(PATH) string to the top of the list using the arrows.
      • Open Tools -> Options -> Projects and solutions -> Web Package Management. Click Add button and paste path to node.exe directory. Then move added path to the top of the list using the arrows.
    2. Open the solution.
    3. In the solution explorer window right click on package.json and select Restore Packages. Wait while packages restored.
    4. Open tasks window: View -> Other Windows -> Task Runner Explorer.
    5. Run watch task. After installing this task will be executed automatically after the project opened.
    6. Build -> Build AspnetCoreStarter.

    If you're using Visual Studio Code:

    1. Install .NET Core SDK: https://dotnet.microsoft.com/download.
    2. Install C# and npm VS Code extensions.
    3. Open AspnetCoreStarter folder in editor and wait while dependencies installed.
    4. Restore unresolved dependencies.
    5. Install required assets to build and debug.
    6. Right click on package.json and select Install Dependencies.
    7. Press Ctrl + Shift + p and select Tasks: Run Task -> Build.
    8. To recompile assets on save, press Ctrl + Shift + p and select npm: Run Script -> watch.
Ubuntu (Visual Studio Code)
  1. Update system: sudo apt-get update && sudo apt-get upgrade.
  2. Install curl: sudo apt-get install curl.
  3. Install latest Node.js LTS and build tools: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages.
  4. Install Git: https://git-scm.com/download/linux.
  5. Install Gulp globally: sudo npm i -g gulp.
  6. Install .NET Core SDK: https://dotnet.microsoft.com/download.
  7. Install C# and npm VS Code extensions.
  8. Open AspnetCoreStarter folder in editor and wait while dependencies installed.
  9. Restore unresolved dependencies.
  10. Install required assets to build and debug.
  11. Right click on package.json and select Install Dependencies.
  12. Press Ctrl + Shift + p and select Tasks: Run Task -> Build.
  13. To recompile assets on save, press Ctrl + Shift + p and select npm: Run Script -> watch.
Mac OS X (Visual Studio Code)
  1. Install Xcode from App Store. After installing, launch the Xcode, accept the license agreement and wait while components installed.
  2. Download and install latest Node.js LTS: https://nodejs.org/en/.
  3. Download and install Git: https://git-scm.com/downloads.
  4. Install Gulp globally: sudo npm i -g gulp.
  5. Install .NET Core SDK: https://dotnet.microsoft.com/download.
  6. Install C# and npm VS Code extensions.
  7. Open AspnetCoreStarter folder in editor and wait while dependencies installed.
  8. Restore unresolved dependencies.
  9. Install required assets to build and debug.
  10. Right click on package.json and select Install Dependencies.
  11. Press Cmd + Shift + p and select Tasks: Run Task -> Build.
  12. To recompile assets on save, press Cmd + Shift + p and select npm: Run Script -> watch.

Page structure

Instead of configuring the layout manually, you can use the Starter template generator. It will dramatically simplify the initial setup.

Main layout

AspnetCoreStarter/Pages/Layouts/_Application.cshtml
<!DOCTYPE html>
<html lang="en" class="light-style">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>@ViewData["Title"] - Asp.Net Core Starter</title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet" crossorigin="anonymous" />

    <!-- Icons. Uncomment required icon fonts -->
    <environment include="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.dist.css" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.dist.css" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.dist.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.dist.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.dist.css" /> -->
    </environment>
    <environment exclude="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.dist.css" asp-append-version="true" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.dist.css" asp-append-version="true" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.dist.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.dist.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.dist.css" asp-append-version="true" /> -->
    </environment>

    <!-- Core stylesheets -->
    <environment include="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap.dist.css" />
        <link rel="stylesheet" href="~/vendor/css/appwork.dist.css" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate.dist.css" />
        <link rel="stylesheet" href="~/vendor/css/colors.dist.css" />
        <link rel="stylesheet" href="~/vendor/css/uikit.dist.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap.dist.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/appwork.dist.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate.dist.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/colors.dist.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/vendor/css/uikit.dist.css" asp-append-version="true" />
    </environment>

    <!-- Load polyfills -->
    <environment include="Development"><script src="~/vendor/js/polyfills.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/polyfills.dist.js" asp-append-version="true"></script></environment>
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

    <!-- Layout helpers -->
    <environment include="Development"><script src="~/vendor/js/layout-helpers.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/layout-helpers.dist.js" asp-append-version="true"></script></environment>

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <environment include="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" asp-append-version="true" /></environment>

    <!-- Application stylesheets -->
    <environment include="Development"><link rel="stylesheet" href="~/css/site.dist.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true" /></environment>

    @RenderSection("Styles", required: false)
</head>
<body>

    @RenderBody()

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>

    <!-- Uncomment the following line to enable unobtrusive validation -->
    <!-- @await Html.PartialAsync("Shared/_ValidationScriptsPartial") -->

    <environment include="Development">
        <script src="~/vendor/libs/popper/popper.dist.js"></script>
        <script src="~/vendor/js/bootstrap.dist.js"></script>
        <script src="~/vendor/js/sidenav.dist.js"></script>

        <!-- Libs -->
        <!-- `perfect-scrollbar` library required by SideNav plugin -->
        <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js"></script>

        <!-- Application javascripts -->
        <script src="~/js/site.dist.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="~/vendor/libs/popper/popper.dist.js" asp-append-version="true"></script>
        <script src="~/vendor/js/bootstrap.dist.js" asp-append-version="true"></script>
        <script src="~/vendor/js/sidenav.dist.js" asp-append-version="true"></script>

        <!-- Libs -->
        <!-- `perfect-scrollbar` library required by SideNav plugin -->
        <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js" asp-append-version="true"></script>

        <!-- Application javascripts -->
        <script src="~/js/site.dist.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>
<!DOCTYPE html>
<html lang="en" class="light-style">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>@ViewData["Title"] - Asp.Net Core Starter</title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet" crossorigin="anonymous" />

    <!-- Icons. Uncomment required icon fonts -->
    <environment include="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.dist.css" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.dist.css" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.dist.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.dist.css" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.dist.css" /> -->
    </environment>
    <environment exclude="Development">
        <!-- <link rel="stylesheet" href="~/vendor/fonts/fontawesome.dist.css" asp-append-version="true" /> -->
        <link rel="stylesheet" href="~/vendor/fonts/ionicons.dist.css" asp-append-version="true" />
        <!-- <link rel="stylesheet" href="~/vendor/fonts/linearicons.dist.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/open-iconic.dist.css" asp-append-version="true" /> -->
        <!-- <link rel="stylesheet" href="~/vendor/fonts/pe-icon-7-stroke.dist.css" asp-append-version="true" /> -->
    </environment>

    <!-- Core stylesheets -->
    <environment include="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap.dist.css" class="theme-settings-bootstrap-css" />
        <link rel="stylesheet" href="~/vendor/css/appwork.dist.css" class="theme-settings-appwork-css" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate.dist.css" class="theme-settings-theme-css" />
        <link rel="stylesheet" href="~/vendor/css/colors.dist.css" class="theme-settings-colors-css" />
        <link rel="stylesheet" href="~/vendor/css/uikit.dist.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/vendor/css/bootstrap.dist.css" class="theme-settings-bootstrap-css" />
        <link rel="stylesheet" href="~/vendor/css/appwork.dist.css" class="theme-settings-appwork-css" />
        <link rel="stylesheet" href="~/vendor/css/theme-corporate.dist.css" class="theme-settings-theme-css" />
        <link rel="stylesheet" href="~/vendor/css/colors.dist.css" class="theme-settings-colors-css" />
        <link rel="stylesheet" href="~/vendor/css/uikit.dist.css" asp-append-version="true" />
    </environment>

    <!-- Load polyfills -->
    <environment include="Development"><script src="~/vendor/js/polyfills.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/polyfills.dist.js" asp-append-version="true"></script></environment>
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

    <!-- Layout helpers -->
    <environment include="Development"><script src="~/vendor/js/layout-helpers.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/layout-helpers.dist.js" asp-append-version="true"></script></environment>

    <!-- Theme settings -->
    <environment include="Development"><script src="~/vendor/js/theme-settings.dist.js"></script></environment>
    <environment exclude="Development"><script src="~/vendor/js/theme-settings.dist.js" asp-append-version="true"></script></environment>
    <script>
        // Use settings panel generator to configure the plugin
        window.themeSettings = new ThemeSettings({
            cssPath: '',
            themesPath: '',
            pathResolver: function (path) {
                var resolvedPaths = {
                    @foreach (string name in new string[] { "bootstrap", "appwork", "colors" })
                    {
                        <text>
                            '@(name).css': '@Url.Content("~/vendor/css/" + name + ".dist.css")',
                            '@(name)-material.css': '@Url.Content("~/vendor/css/" + name + "-material.dist.css")',
                            '@(name)-dark.css': '@Url.Content("~/vendor/css/" + name + "-dark.dist.css")',
                        </text>
                    }

                    // UI Kit
                    'uikit.css': '@Url.Content("~/vendor/css/uikit.dist.css"))',

                    @foreach (string name in new string[] { "air", "corporate", "cotton", "gradient", "paper", "shadow", "soft", "sunrise", "twitlight", "vibrant" })
                    {
                        <text>
                            'theme-@(name).css': '@Url.Content("~/vendor/css/theme-" + name + ".dist.css")',
                            'theme-@(name)-material.css': '@Url.Content("~/vendor/css/theme-" + name + "-material.dist.css")',
                            'theme-@(name)-dark.css': '@Url.Content("~/vendor/css/theme-" + name + "-dark.dist.css")',
                        </text>
                    }
                };

                return resolvedPaths[path] || path;
            }
        });
    </script>

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <environment include="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" asp-append-version="true" /></environment>

    <!-- Application stylesheets -->
    <environment include="Development"><link rel="stylesheet" href="~/css/site.dist.css" /></environment>
    <environment exclude="Development"><link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true" /></environment>

    @RenderSection("Styles", required: false)
</head>
<body>

    @RenderBody()

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>

    <!-- Uncomment the following line to enable unobtrusive validation -->
    <!-- @await Html.PartialAsync("Shared/_ValidationScriptsPartial") -->

    <environment include="Development">
        <script src="~/vendor/libs/popper/popper.dist.js"></script>
        <script src="~/vendor/js/bootstrap.dist.js"></script>
        <script src="~/vendor/js/sidenav.dist.js"></script>

        <!-- Libs -->
        <!-- `perfect-scrollbar` library required by SideNav plugin -->
        <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js"></script>

        <!-- Application javascripts -->
        <script src="~/js/site.dist.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="~/vendor/libs/popper/popper.dist.js" asp-append-version="true"></script>
        <script src="~/vendor/js/bootstrap.dist.js" asp-append-version="true"></script>
        <script src="~/vendor/js/sidenav.dist.js" asp-append-version="true"></script>

        <!-- Libs -->
        <!-- `perfect-scrollbar` library required by SideNav plugin -->
        <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js" asp-append-version="true"></script>

        <!-- Application javascripts -->
        <script src="~/js/site.dist.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

Layouts

You can set the layout in two ways:

  1. Layout for the entire app - set layout property in the AspnetCoreStarter/Pages/_ViewStart.cshtml file.
  2. Layout for the specified view - set layout property in the view's .cshtml file.

You can find navbar, sidenav and footer templates in the AspnetCoreStarter/Pages/Layouts/Partials directory. 

AspnetCoreStarter/Pages/_ViewStart.cshtml
@{
    Layout = "Layouts/_Layout1";
}
AspnetCoreStarter/Pages/_ViewStart.cshtml
@{
    Layout = "Layouts/_Layout1Flex";
}
AspnetCoreStarter/Pages/_ViewStart.cshtml
@{
    Layout = "Layouts/_Layout2";
}
AspnetCoreStarter/Pages/_ViewStart.cshtml
@{
    Layout = "Layouts/_Layout2Flex";
}
AspnetCoreStarter/Pages/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutWithoutNavbar";
}
AspnetCoreStarter/Pages/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutWithoutNavbarFlex";
}
AspnetCoreStarter/Pages/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutWithoutSidenav";
}
AspnetCoreStarter/Pages/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutHorizontalSidenav";
}
AspnetCoreStarter/Pages/_ViewStart.cshtml
@{
    Layout = "Layouts/_LayoutBlank";
}

Theming

To enable a theme just include the required theme stylesheet from the ~/vendor/css/ path. 

AspnetCoreStarter/Pages/Layouts/_Application.cshtml
<!-- Core stylesheets -->
<environment include="Development">
    ...
    <link rel="stylesheet" href="~/vendor/css/theme-air.dist.css" />
    ...
</environment>
<environment exclude="Development">
    ...
    <link rel="stylesheet" href="~/vendor/css/theme-air.dist.css" asp-append-version="true" />
    ...
</environment>
<!-- Core stylesheets -->
<environment include="Development">
    ...
    <link rel="stylesheet" href="~/vendor/css/theme-air.dist.css" class="theme-settings-theme-css" />
    ...
</environment>
<environment exclude="Development">
    ...
    <link rel="stylesheet" href="~/vendor/css/theme-air.dist.css" class="theme-settings-theme-css" />
    ...
</environment>

Material styling

To enable material styling you need to:

  1. Set $enable-material-style variable to true.

    AspnetCoreStarter/wwwroot/vendor/css/_custom-variables/_features.scss
    ...
$enable-material-style: true;
...

  2. Set material-style class on the <html> element instead of light-style.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <html class="material-style">

  3. Add -material suffix to bootstrap.dist.css, appwork.dist.css, theme-*.dist.css and colors.dist.css stylesheets.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-material.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-material.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/colors-material.dist.css" />
    ...
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-material.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/appwork-material.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/colors-material.dist.css" asp-append-version="true" />
    ...
</environment>
    <!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-material.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-material.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/colors-material.dist.css" class="theme-settings-colors-css" />
    ...
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-material.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-material.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-material.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/colors-material.dist.css" class="theme-settings-colors-css" />
    ...
</environment>

  4. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section and call attachMaterialRippleOnLoad() function. 

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/vendor/js/material-ripple.dist.js"></script></environment>
<environment exclude="Development"><script src="~/vendor/js/material-ripple.dist.js" asp-append-version="true"></script></environment>
<script>
  window.attachMaterialRippleOnLoad();
</script>

  5. Optionally you can enable material ripple. Just append material-ripple.dist.js script to the <head> section. 

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/vendor/js/material-ripple.dist.js"></script></environment>
<environment exclude="Development"><script src="~/vendor/js/material-ripple.dist.js" asp-append-version="true"></script></environment>

Dark styling

To enable dark styling you need to:

  1. Set $enable-dark-style variable to true.

    AspnetCoreStarter/wwwroot/vendor/css/_custom-variables/_features.scss
    ...
$enable-dark-style: true;
...

  2. Set dark-style class on the <html> element instead of light-style.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <html class="dark-style">

  3. Add -dark suffix to bootstrap.dist.css, appwork.dist.css, theme-*.dist.css and colors.dist.css stylesheets.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-dark.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-dark.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-dark.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/colors-dark.dist.css" />
    ...
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-dark.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/appwork-dark.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-dark.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/colors-dark.dist.css" asp-append-version="true" />
    ...
</environment>
    <!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-dark.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-dark.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-dark.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/colors-dark.dist.css" class="theme-settings-colors-css" />
    ...
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/bootstrap-dark.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/appwork-dark.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/theme-corporate-dark.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/colors-dark.dist.css" class="theme-settings-colors-css" />
    ...
</environment>

RTL support

To enable RTL direction support, first of all, you need to set $enable-rtl-support variable to true.

AspnetCoreStarter/wwwroot/vendor/css/_custom-variables/_features.scss
$enable-rtl-support: true;
...

Then load Appwork's stylesheets from the ~/vendor/css/rtl/ path instead of ~/vendor/css/.

AspnetCoreStarter/Pages/Layouts/_Application.cshtml
<!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/rtl/bootstrap.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/appwork.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/theme-corporate.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/colors.dist.css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/uikit.dist.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/rtl/bootstrap.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/rtl/appwork.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/rtl/theme-corporate.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/rtl/colors.dist.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/vendor/css/rtl/uikit.dist.css" asp-append-version="true" />
</environment>
<!-- Core stylesheets -->
<environment include="Development">
    <link rel="stylesheet" href="~/vendor/css/rtl/bootstrap.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/appwork.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/theme-corporate.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/colors.dist.css" class="theme-settings-colors-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/uikit.dist.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="~/vendor/css/rtl/bootstrap.dist.css" class="theme-settings-bootstrap-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/appwork.dist.css" class="theme-settings-appwork-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/theme-corporate.dist.css" class="theme-settings-theme-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/colors.dist.css" class="theme-settings-colors-css" />
    <link rel="stylesheet" href="~/vendor/css/rtl/uikit.dist.css" asp-append-version="true" />
</environment>

To enable RTL direction, add dir="rtl" attribute to the <html> element.

AspnetCoreStarter/Pages/Layouts/_Application.cshtml
<html dir="rtl">

Layout options

You can configure the initial layout by setting control classes to the <html> element.

After the initial layout setup the recommended way to control layout options is layout helpers, because the helpers do some extra work, such as: setting container paddings (when navbar is fixed), performing layout animations, setting correct sidenav state classes depending on screen size etc. 
AspnetCoreStarter/Pages/Layouts/_Application.cshtml
<html class="layout-fixed layout-collapsed">
Control class Description
.layout-reversed Reverse layout direction without markup change.
.layout-expanded Expand layout sidenav on small screens (< 992px).
.layout-collapsed Collapse layout sidenav on large screens (>= 992px).
.layout-offcanvas Make layout sidenav offcanvas.
.layout-fixed Set layout position to fixed.
.layout-fixed-offcanvas Set layout position to fixed with offcanvas sidenav.
.layout-navbar-fixed Set layout navbar position to fixed.
.layout-footer-fixed Set layout footer position to fixed.

PACE.js progress

Optionally you can enable PACE.js progress bar:

  1. Append pace.js script to the <head> section.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <environment include="Development"><script src="~/vendor/js/pace.dist.js"></script></environment>
<environment exclude="Development"><script src="~/vendor/js/pace.dist.js" asp-append-version="true"></script></environment>

  2. Append .page-loader element to the <body>.

    AspnetCoreStarter/Pages/Layouts/_Application.cshtml
    <div class="page-loader"><div class="bg-primary"></div></div>

Generator

Use starter template generator to simplify the initial setup. Just replace a content of appropriate files with the generated code within the aspnet-core-starter directory.

Open in new tab

Available tasks

If you're using Visual Studio, then you can run tasks in the Task Runner Explorer window: View -> Other Windows -> Task Runner Explorer.
If you're using Visual Studio Code, then you can run tasks using command: npm: Run Script.

Task Description
build Compile assets.
build:js Compile .js files within the AspnetCoreStarter/wwwroot directory.
build:css Compile .scss files within the AspnetCoreStarter/wwwroot directory.
build:prod Compile assets in production mode with minification.
build:prod:js Compile .js files within the AspnetCoreStarter/wwwroot directory in production mode with minification.
build:prod:css Compile .scss files within the AspnetCoreStarter/wwwroot directory in production mode with minification.
watch Watch files for changes and automatically recompile when changed.

Troubleshooting

  • Build process is too slow

    By default, assets compilation is performed before each build of the project. To disable this behaviour open *.csproj file and remove the following lines:

    <Target Name="DebugPreCompileTarget" BeforeTargets="Build" Condition="'$(Configuration)'!='Release'">
  <Exec Command="npm run build" />
</Target>
    If you disable asset precompilation, you will have to compile them manually using Gulp tasks. See Available tasks.

Migration guide

Do not forget to commit changes or clone the project before performing migration steps.

  1. Upgrade .NET Core to .Net 5:

    Official upgrade guide: https://docs.microsoft.com/en-us/aspnet/core/migration/31-to-50?view=aspnetcore-5.0&tabs=visual-studio

  2. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

  3. _CookieConsentPartial.cshtml is removed:

    Pages/Shared/_CookieConsentPartial.cshtml

  4. Remove the next files and directories:

    wwwroot/vendor/libs/vegas/

  5. Since some extensions were removed from the bootstrap-table package, remove wwwroot/vendor/libs/bootstrap-table/ directory and copy new appwork-v1_6_0/aspnet-core-starter/AspnetCoreStarter/wwwroot/vendor/libs/bootstrap-table/

  6. Copy with replace all SCSS files within wwwroot/vendor/css/ and wwwroot/vendor/css/rtl/ directories:

    wwwroot/vendor/css/*.scss
wwwroot/vendor/css/rtl/*.scss

  7. Copy with replace changed files and directories:

    wwwroot/vendor/fonts/
wwwroot/vendor/css/_appwork/
wwwroot/vendor/css/_uikit/
wwwroot/vendor/libs/blueimp-gallery/
wwwroot/vendor/libs/bootstrap-slider/
wwwroot/vendor/libs/dropzone/
wwwroot/vendor/libs/fullcalendar/
wwwroot/vendor/libs/nouislider/
wwwroot/vendor/libs/minicolors/
wwwroot/vendor/libs/photoswipe/
wwwroot/vendor/libs/plyr/
wwwroot/vendor/libs/select2/
wwwroot/vendor/libs/smartwizard/
wwwroot/vendor/libs/sortablejs/
wwwroot/vendor/libs/swiper/
wwwroot/vendor/libs/timepicker/
wwwroot/vendor/libs/typeahead-js/

  8. Update:

    appsettings.Development.json. Diff

    {PROJECT_NAME}.csproj. Diff

    package.json. Diff

    Startup.cs. Diff

    Pages/Error.cshtml. Diff

    Pages/Error.cshtml.cs. Diff

    Properties/launchSettings.json. Diff

  9. Reload the project and restore NuGet packages.

  10. Remove node_modules directory and package-lock.json. Then restore NPM packages.

  11. Rebuild assets:

    • Visual Studio: Task Runner Explorer → Double click on "build" task
    • VS Code: Ctrl/Cmd + Shift + P → Tasks: Run task → gulp: build

  12. Rebuild the project

Changes in third-party components:

  • vegas plugin was excluded from the package.

  • fullcalendar changed its API and configuration object:

    Before
    var eventList = [{
  ...
  className: 'fc-event-warning'
}, {
  ...
  rendering: 'background'
}];

new Calendar($('#id')[0], {
  ...
  defaultDate: ...,
  eventLimit: ...,
  defaultView: '...',
  dir: 'rtl',
  header: {
    ...
    left: '...',
    right: '...'
  },
  views: {
    dayGrid: {
      eventLimit: ...
    }
  },
});
    After
    var eventList = [{
  ...
  classNames: 'fc-event-warning'
}, {
  ...
  display: 'background'
}];

new Calendar($('#id')[0], {
  ...
  initialDate: ...,
  dayMaxEventRows: ...,
  initialView: '...',
  direction: 'rtl',
  headerToolbar: {
    ...
    start: '...',
    end: '...'
  },
  views: {
    dayGrid: {
      dayMaxEventRows: ...
    }
  },
});

    For more info see https://fullcalendar.io/docs/upgrading-from-v4

  • dropzone configuration is changed.

    Before
    $('#id').dropzone();
    After
    var previewTemplate =
  '<div class="dz-preview dz-file-preview">' +
  '  <div class="dz-details">' +
  '    <div class="dz-thumbnail">' +
  '      <img data-dz-thumbnail>' +
  '      <span class="dz-nopreview">No preview</span>' +
  '      <div class="dz-success-mark"></div>' +
  '      <div class="dz-error-mark"></div>' +
  '      <div class="dz-error-message"><span data-dz-errormessage></span></div>' +
  '      <div class="progress"><div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div></div>' +
  '    </div>' +
  '    <div class="dz-filename" data-dz-name></div>' +
  '    <div class="dz-size" data-dz-size></div>' +
  '  </div>' +
  '</div>';
            
$('#id').dropzone({
  previewTemplate: previewTemplate
});

  • smartwizard markup and API are changed.

    Before
    <ul>
  <li><a href="#" class="mb-3">...</a></li>
  ...
</ul>

<div class="mb-3">
  <div id="smartwizard-1-step-1" class="card animated fadeIn">
    ...
  </div>
</div>
    After
    <ul class="nav">
  <li><a href="#" class="nav-link mb-3">...</a></li>
  ...
</ul>

<div class="tab-content mb-3">
  <div id="#" class="tab-pane card" role="tabpanel">
    ...
  </div>
</div>
    Before
    $el.smartWizard({
  useURLhash: false,
  showStepURLhash: false,
  ...
})
.on('leaveStep', function(e, anchorObject, stepNumber, stepDirection) {
  if (stepDirection === 'forward'){ return $el.valid(); }
  return true;
})
.on('showStep', function(e, anchorObject, stepNumber, stepDirection) {
  var $btn = $el.find('.btn-finish');

  if (stepNumber === 3) {
    $btn.removeClass('hidden');
  } else {
    $btn.addClass('hidden');
  }
});
    After
    $el.smartWizard({
  enableURLhash: false,
  ...
})
.on('leaveStep', function(e, anchorObject, currentStepIndex, nextStepIndex, stepDirection) {
  var $finishBtn = $el.find('.btn-finish');

  if (stepDirection === 'forward'){
    var isValid = $el.valid();

    if (!isValid) {
      anchorObject.addClass('danger');
    } else {
      anchorObject.removeClass('danger');

      if (nextStepIndex === 3) {
        $finishBtn.removeClass('d-none');
      }
    }

    return isValid;
  } else {
    $finishBtn.addClass('d-none');
  }

  return true;
})
.find('> .toolbar .btn:not(.btn-primary)').addClass('btn-secondary');

    For more info see http://techlaboratory.net/jquery-smartwizard

  • Copy with replace the next files and directories:

    wwwroot/vendor/css/_appwork/_functions.scss
wwwroot/vendor/libs/bootstrap-datepicker/
wwwroot/vendor/libs/bootstrap-daterangepicker/
wwwroot/vendor/libs/bootstrap-material-datetimepicker/
wwwroot/vendor/libs/bootstrap-select/
wwwroot/vendor/libs/flatpickr/
wwwroot/vendor/libs/growl/
wwwroot/vendor/libs/plyr/
wwwroot/vendor/libs/select2/
wwwroot/vendor/libs/sweetalert2/
wwwroot/vendor/libs/timepicker/
wwwroot/vendor/libs/typeahead-js/

  • Copy with replace the next file:

    wwwroot/vendor/libs/flatpickr/flatpickr.scss

  1. Upgrade .NET Core to 3.1:

    Official upgrade guide: https://docs.microsoft.com/en-us/aspnet/core/migration/30-to-31?view=aspnetcore-3.1&tabs=visual-studio

  2. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

    Note: Yarn package manager is not reqired anymore.

  3. Remove the next files and directories:

    wwwroot/vendor/css/migrate/

  4. Copy new files and directories:

    wwwroot/vendor/css/_custom-variables/_appwork-dark.scss
wwwroot/vendor/css/_custom-variables/_features.scss

  5. Since some extensions were removed from the bootstrap-table package, remove wwwroot/vendor/libs/bootstrap-table/ directory and copy new appwork-v1_5_0/aspnet-core-starter/AspnetCoreStarter/wwwroot/vendor/libs/bootstrap-table/

  6. Copy with replace all SCSS files within wwwroot/vendor/css/ and wwwroot/vendor/css/rtl/ directories:

    wwwroot/vendor/css/*.scss
wwwroot/vendor/css/rtl/*.scss

  7. Copy with replace changed files and directories:

    wwwroot/vendor/fonts/fontawesome/
wwwroot/vendor/fonts/fontawesome.dist.css
wwwroot/vendor/js/bootstrap.js
wwwroot/vendor/js/layout-helpers.js
wwwroot/vendor/js/polyfills.js
wwwroot/vendor/js/sidenav.js
wwwroot/vendor/js/theme-settings.js
wwwroot/vendor/js/_theme-settings/
wwwroot/vendor/css/_appwork/
wwwroot/vendor/css/_theme/
wwwroot/vendor/css/_uikit/
wwwroot/vendor/css/pages/
wwwroot/vendor/libs/autosize/
wwwroot/vendor/libs/block-ui/
wwwroot/vendor/libs/blueimp-gallery/
wwwroot/vendor/libs/bootbox/
wwwroot/vendor/libs/bootstrap-datepicker/
wwwroot/vendor/libs/bootstrap-daterangepicker/
wwwroot/vendor/libs/bootstrap-duallistbox/
wwwroot/vendor/libs/bootstrap-markdown/
wwwroot/vendor/libs/bootstrap-material-datetimepicker/
wwwroot/vendor/libs/bootstrap-maxlength/
wwwroot/vendor/libs/bootstrap-menu/
wwwroot/vendor/libs/bootstrap-select/
wwwroot/vendor/libs/bootstrap-slider/
wwwroot/vendor/libs/bootstrap-sortable/
wwwroot/vendor/libs/bootstrap-tagsinput/
wwwroot/vendor/libs/c3/
wwwroot/vendor/libs/chartist/
wwwroot/vendor/libs/chartjs/
wwwroot/vendor/libs/clipboard/
wwwroot/vendor/libs/cropper/
wwwroot/vendor/libs/d3/
wwwroot/vendor/libs/datatables/
wwwroot/vendor/libs/dragula/
wwwroot/vendor/libs/dropzone/
wwwroot/vendor/libs/eve/
wwwroot/vendor/libs/flatpickr/
wwwroot/vendor/libs/flot/
wwwroot/vendor/libs/flow-js/
wwwroot/vendor/libs/fullcalendar/
wwwroot/vendor/libs/gmaps/
wwwroot/vendor/libs/growl/
wwwroot/vendor/libs/jstree/
wwwroot/vendor/libs/knob/
wwwroot/vendor/libs/ladda/
wwwroot/vendor/libs/mapael/
wwwroot/vendor/libs/markdown/
wwwroot/vendor/libs/masonry/
wwwroot/vendor/libs/minicolors/
wwwroot/vendor/libs/moment/
wwwroot/vendor/libs/morris/
wwwroot/vendor/libs/nestable/
wwwroot/vendor/libs/nouislider/
wwwroot/vendor/libs/numeral/
wwwroot/vendor/libs/perfect-scrollbar/
wwwroot/vendor/libs/photoswipe/
wwwroot/vendor/libs/plyr/
wwwroot/vendor/libs/popper/
wwwroot/vendor/libs/pwstrength-bootstrap/
wwwroot/vendor/libs/quill/
wwwroot/vendor/libs/raphael/
wwwroot/vendor/libs/select2/
wwwroot/vendor/libs/shepherd/
wwwroot/vendor/libs/smartwizard/
wwwroot/vendor/libs/sortablejs/
wwwroot/vendor/libs/sparkline/
wwwroot/vendor/libs/spin/
wwwroot/vendor/libs/spinkit/
wwwroot/vendor/libs/sweetalert2/
wwwroot/vendor/libs/swiper/
wwwroot/vendor/libs/tableexport/
wwwroot/vendor/libs/timepicker/
wwwroot/vendor/libs/toastr/
wwwroot/vendor/libs/typeahead-js/
wwwroot/vendor/libs/validate/
wwwroot/vendor/libs/vanilla-text-mask/
wwwroot/vendor/libs/vegas/

  8. Update:

    {PROJECT_NAME}.csproj. Diff

    Gulpfile.js. Diff

    package.json. Diff

    webpack.config.js. Diff

    wwwroot/vendor/css/_custom-variables/_libs.scss. Diff

    wwwroot/vendor/css/_custom-variables/_pages.scss. Diff

    wwwroot/vendor/css/_custom-variables/_uikit.scss. Diff

  9. Edit variables in the wwwroot/vendor/css/_custom-variables/_features.scss file according your setup.

    Variable Feature
    $enable-rtl-support Set to true to enable RTL mode support, otherwise set to false.
    $enable-light-style Set to true to enable light (previously default) style support, otherwise set to false.
    $enable-material-style Set to true to enable material style support, otherwise set to false.
    $enable-dark-style Set to true to enable dark style support, otherwise set to false.

  10. Reload the project and restore NuGet packages.

  11. Remove node_modules directory and then restore NPM packages.

  12. Rebuild assets:

    • Visual Studio: Task Runner Explorer → Double click on "build" task
    • VS Code: Ctrl/Cmd + Shift + P → Tasks: Run task → gulp: build

  13. Rebuild the project

  • theme-default class is renamed to theme-light.

    [Before] Pages/Layouts/_Application.cshtml
    <html lang="en" class="default-style">
    [After] Pages/Layouts/_Application.cshtml
    <html lang="en" class="light-style">

  • ThemeSettings plugin settings are changed. Use Settings Panel Generator to get updated settings.

  • ThemeSettings.setMaterial() method is removed.
    Added ThemeSettings.setStyle(), ThemeSettings.isLightStyle(), ThemeSettings.isMaterialStyle(), ThemeSettings.isDarkStyle() methods.
    See Settings panel docs.

  • New style-dependent utility classes, which change its color depending on the current active style:

    • .theme-text-white - White (light or material style) / dark (dark style) text.
    • .theme-text-dark - Dark (light or material style) / white (dark style) text.
    • .theme-bg-white - White (light or material style) / dark (dark style) background.
    • .theme-bg-dark - Dark (light or material style) / white (dark style) background.
    • .theme-border-white - White (light or material style) / dark (dark style) border.
    • .theme-border-dark - Dark (light or material style) / white (dark style) border.

Changes in third-party components:

  • plyr changed its initialization method:

    Before
    plyr.setup('#selector', options);
    After
    new Plyr('#selector', options);

  • spinkit classes are changed. See https://github.com/tobiasahlin/SpinKit

  • SweetAlert's type option is renamed to icon.

    Before
    Swal.fire({
  ...,
  type: 'warning',
});
    After
    Swal.fire({
  ...,
  icon: 'warning',
});

  1. Upgrade .NET Core to 3.0:

    • Visual Studio: Update Visual Studio IDE
    • VS Code: Download and install the latest .NET Core SDK

    Official upgrade guide: https://docs.microsoft.com/en-us/aspnet/core/migration/22-to-30?view=aspnetcore-3.0&tabs=visual-studio

  2. (Optional) Upgrade Node.js to 10.16 LTS and Yarn

  3. The build process was changed and now all vendor javascript files are built from original sources. All pre-compiled javascript files are removed. Regarding these changes, remove the next directories and copy the corresponding ones from the release:

    {PROJECT_NAME}/wwwroot/vendor/js/
{PROJECT_NAME}/wwwroot/vendor/fonts/
{PROJECT_NAME}/wwwroot/vendor/libs/*/

  4. Copy with replace changed files and directories:

    AspnetCoreStarter/wwwroot/vendor/css/_appwork/_custom-forms.scss
AspnetCoreStarter/wwwroot/vendor/css/_appwork/_dropdown.scss
AspnetCoreStarter/wwwroot/vendor/css/_appwork/_forms.scss
AspnetCoreStarter/wwwroot/vendor/css/_appwork/_layout.scss
AspnetCoreStarter/wwwroot/vendor/css/_appwork/_mixins.scss
AspnetCoreStarter/wwwroot/vendor/css/_appwork/_nav.scss
AspnetCoreStarter/wwwroot/vendor/css/_appwork/_sidenav.scss
AspnetCoreStarter/wwwroot/vendor/css/_appwork/_tables.scss
AspnetCoreStarter/wwwroot/vendor/css/_appwork/_utilities.scss

  5. Copy new files:

    AspnetCoreStarter/webpack.config.js
AspnetCoreStarter/build-config.js

  6. Update:

    {PROJECT_NAME}.sln. Diff

    {PROJECT_NAME}/{PROJECT_NAME}.csproj. Diff

    {PROJECT_NAME}/Program.cs. Diff

    {PROJECT_NAME}/Startup.cs. Diff

    {PROJECT_NAME}/appsettings.json. Diff

    {PROJECT_NAME}/Gulpfile.js. Diff

    {PROJECT_NAME}/package.json. Diff

    {PROJECT_NAME}/Pages/Layouts/_Application.cshtml. Diff

    {PROJECT_NAME}/Pages/Shared/_ValidationScriptsPartial.cshtml. Diff

  7. All *.js and *.scss files within the {PROJECT_NAME}/wwwroot/ directory and its subdirectories are processed by webpack and node-sass now (See Assets compilation). Regarding this change, edit your asset paths: 

    <!-- Before -->
<link rel="stylesheet" href="~/vendor/fonts/ionicons.css" />
<link rel="stylesheet" href="~/vendor/css/appwork.css" />
<link rel="stylesheet" href="~/vendor/css/appwork.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
<link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<script src="~/vendor/js/layout-helpers.js"></script>
<script src="~/vendor/js/layout-helpers.js" asp-append-version="true"></script>
<script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.js" asp-append-version="true"></script>
<script src="~/js/site.es5.js"></script>
<script src="~/js/site.es5.min.js" asp-append-version="true"></script>

<!-- After -->
<link rel="stylesheet" href="~/vendor/fonts/ionicons.dist.css" />
<link rel="stylesheet" href="~/vendor/css/appwork.dist.css" />
<link rel="stylesheet" href="~/vendor/css/appwork.dist.css" asp-append-version="true" />
<link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" />
<link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/site.dist.css" />
<link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true" />
<script src="~/vendor/js/layout-helpers.dist.js"></script>
<script src="~/vendor/js/layout-helpers.dist.js" asp-append-version="true"></script>
<script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js"></script>
<script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js" asp-append-version="true"></script>
<script src="~/js/site.dist.js"></script>
<script src="~/js/site.dist.js" asp-append-version="true"></script>

  8. Reload project and restore NuGet packages.

  9. Restore/Install Yarn packages.

  10. Rebuild assets:

    • Visual Studio: Task Runner Explorer → Double click on "build" task
    • VS Code: Ctrl/Cmd + Shift + P → Tasks: Run task → gulp: build

  11. Rebuild project

Changes in third-party libraries:

  • bootstrap-multiselect plugin was removed.
  • bootstrap-sweetalert replaced with original sweetalert2 plugin. API isn't changed.
  • Shepherd.js changed its API. See aspnet-core-demo/AspnetCoreDemo/wwwroot/js/ui_tour.js for example. https://shepherdjs.dev/docs/tutorial-02-usage.html

  • Available extensions list of bootstrap-table package is changed (see aspnet-core-starter/AspnetCoreStarter/wwwroot/vendor/libs/bootstrap-table/extensions):

    Added extensions/cell-input
Removed extensions/group-by
Removed extensions/multi-column-toggle
Removed extensions/multiple-search
Removed extensions/multiple-selection-row
Removed extensions/select2-filter
Removed extensions/tree-column

  1. Copy with replace the next directories:

    wwwroot/vendor/libs/bootstrap-sortable/
wwwroot/vendor/libs/flot/
wwwroot/vendor/libs/idletimer/

  2. Update:

    package.json. Diff

  3. Restore/Install Yarn packages

  4. Rebuild assets

  1. (Optional) Upgrade Node.js to 10.15 LTS and Yarn

  2. Copy new files and directories:

    wwwroot/vendor/css/migrate/

  3. Copy with replace all SCSS files within wwwroot/vendor/css/ and wwwroot/vendor/css/rtl/ directories:

    wwwroot/vendor/css/*.scss
wwwroot/vendor/css/rtl/*.scss

  4. Copy with replace changed files and directories:

    wwwroot/vendor/css/_appwork/
wwwroot/vendor/css/_theme/
wwwroot/vendor/css/_uikit/_social.scss
wwwroot/vendor/css/pages/clients.scss
wwwroot/vendor/css/pages/messages.scss
wwwroot/vendor/js/
wwwroot/vendor/libs/
wwwroot/vendor/fonts/
Gulpfile.js

  5. Remove excluded libraries:

    wwwroot/vendor/libs/bootstrap-tour/

  6. Since some extensions were removed from the bootstrap-table package, remove wwwroot/vendor/libs/bootstrap-table/ directory and copy new appwork-v1_3_0/aspnet-core-starter/AspnetCoreStarter/wwwroot/vendor/libs/bootstrap-table/

  7. Update:

    package.json. Diff

  8. Restore/Install Yarn packages

  9. Rebuild assets:

    • Visual Studio: Task Runner Explorer → Double click on "build:all" task
    • VS Code: Ctrl/Cmd + Shift + P → Tasks: Run task → gulp: build:all
    Note: "build:all" task doesn't generate minified assets anymore, use "build:all:prod" task to minify assets.

  10. (Optional) Upgrade .Net Core framework:

    1. Visual Studio: Update Visual Studio IDE

      VS Code: Download and install the latest .NET Core SDK

    2. Copy new files and directories:

      Pages/Shared/

    3. Update:

      appsettings.Development.json. Diff

      appsettings.json. Diff

      *.cproj. Diff

      Program.cs. Diff

      Properties/launchSettings.json. Diff

      Startup.cs. Diff

  11. Include polyfills in the <head> block after core stylesheets (see aspnet-core2-starter-generator for example):

    <!-- Load polyfills -->
<environment include="Development"><script src="~/vendor/js/polyfills.js"></script></environment>
<environment exclude="Development"><script src="~/vendor/js/polyfills.js" asp-append-version="true"></script></environment>
<script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

  • Bootstrap CSS:

    Include migration CSS file to the end of the <head> block:

    <environment include="Development"><link rel="stylesheet" href="~/vendor/css/migrate/appwork-130.css" /></environment>
<environment exclude="Development"><link rel="stylesheet" href="~/vendor/css/migrate/appwork-130.min.css" asp-append-version="true" /></environment>

    Remove this import after you correct all changed CSS classes in your HTML code.

    Changed classes: 

    .font-weight-thin → .font-weight-lighter
.text-dark → .text-body
.bg-none → .bg-transparent
.font-sans-serif → .text-sans-serif
.font-serif → .text-serif
.font-monospace → .text-monospace
.box-shadow-none → .shadow-none
.container-m--x → .container-m-nx
.container-m--y → .container-m-ny
.btn-round → .rounded-pill

Negative horizontal margins:
.m{sides}--{size} → .m{sides}-n{size}
.m{sides}-{breakpoint}--{size} → .m{sides}-{breakpoint}-n{size}

  • Bootstrap JS:

    All dropdown links must have href="#" attribute. Dropdown links with href="javascript:void(0)" will throw an error

  • Plugin API changed:

    Flot.js - See https://github.com/flot/flot/blob/master/CHANGELOG.md

    bootstrap-table - see demo examples

    Fullcalendar - See https://fullcalendar.io/docs

    bootstrap-sweetalert is deprecated, use Sweetalert2 instead. See - https://sweetalert2.github.io/

    bootstrap-tour library was removed, use "shepherd" tour library instead. See - https://shipshapecode.github.io/shepherd/

Note: Validation icons are disabled by default. To enable it, add the next variable in the wwwroot/vendor/css/_custom-variables/_appwork.scss and wwwroot/vendor/css/_custom-variables/_appwork-material.scss: 

$enable-validation-icons: true;

  1. Update *.csproj. Diff

  2. Update Gulpfile.js. Diff

  3. Update package.json. Diff

  4. Copy with replace changed files and directories:

    wwwroot/vendor/css/_appwork/_accordion.scss
wwwroot/vendor/css/_appwork/_breadcrumb.scss
wwwroot/vendor/css/_appwork/_buttons.scss
wwwroot/vendor/css/_appwork/_close.scss
wwwroot/vendor/css/_appwork/_custom-forms.scss
wwwroot/vendor/css/_appwork/_mixins.scss
wwwroot/vendor/css/_appwork/_switcher.scss
wwwroot/vendor/css/_appwork/_variables-material.scss
wwwroot/vendor/css/_appwork/_variables.scss
wwwroot/vendor/css/colors-material.scss
wwwroot/vendor/fonts/fontawesome/
wwwroot/vendor/fonts/ionicons/
wwwroot/vendor/fonts/fontawesome.css
wwwroot/vendor/fonts/ionicons.css
wwwroot/vendor/js/
wwwroot/vendor/libs/

  5. Update .NET Core to 2.1:

    • Visual Studio: Update Visual Studio IDE
    • VS Code: Download and install the latest .NET Core SDK

  6. Restore/Install Yarn packages

  7. Rebuild assets:

    • Visual Studio: Task Runner Explorer → Double click on "build:all" task
    • VS Code: Ctrl/Cmd + Shift + P → Tasks: Run task → gulp: build:all

  8. Rebuild project