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

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

aspnet-mvc-webpack-starter directory structure

aspnet-mvc-webpack-starter
AspnetMvcWebpackStarter
App_Start
BundleConfig.cs
...
Content
Application stylesheets
main.scss
Controllers
Models
Properties
Scripts
Application javascripts
main.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
...
Views
Shared
Layouts
Partials
_LayoutFooter.cshtml
_LayoutNavbar.cshtml
_LayoutSidenav.cshtml
_Application.cshtml
_Layout1.cshtml
_Layout1Flex.cshtml
...
Error.cshtml
...
_ViewStart.cshtml
...
Gulpfile.js
package.json
build-config.js
webpack.config.js
...
...

Assets compilation

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

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

    AspnetMvcWebpackStarter/Content/main.scss
    body {
  background: #fff;
}
    AspnetMvcWebpackStarter/App_Start/BundleConfig.cs
    bundles.Add(new Bundle("~/bundle/css/main").Include("~/Content/main.dist.css"));
    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    @Styles.Render("~/bundle/css/main")

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

    AspnetMvcWebpackStarter/Scripts/main.js
    $(() => {
  alert('Content loaded!')
})
    AspnetMvcWebpackStarter/App_Start/BundleConfig.cs
    bundles.Add(new Bundle("~/bundle/js/main").Include("~/Scripts/main.dist.js"));
    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    @Scripts.Render("~/bundle/js/main")
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 (see AspnetMvcWebpackStarter/App_Start/BundleConfig.cs file).
Optionally you can remove unwanted plugins to reduce output assets size and compile time:

  1. Remove unwanted packages from the dependencies section in the AspnetMvcWebpackStarter/package.json file.
  2. Remove related directories within the AspnetMvcWebpackStarter/Vendor/libs directory.
  3. Remove related @imports and @includes in the AspnetMvcWebpackStarter/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 AspnetMvcWebpackStarter/package.json file.
  2. Remove the AspnetMvcWebpackStarter/Vendor/libs/plyr directory.
  3. Remove @import "../../libs/plyr/mixins"; and @include plyr-theme($background, $color); lines in the AspnetMvcWebpackStarter/Vendor/css/_theme/_libs.scss file.

Installation

  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. Download and install Microsoft Visual C++ 2015 Redistributable from https://www.microsoft.com/en-us/download/details.aspx?id=53840 (if you already have binaries, installation will fail - it's ok).

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

    1. Open Tools -> Options -> Projects and solutions -> Web Package Management. Move $(PATH) string to the top of the list using the arrows.
    2. 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.
  7. Open the solution.
  8. In the solution explorer window right click on the solution and select Restore NuGet packages. Wait while packages restored.
  9. In the solution explorer window right click on package.json and select Restore Packages. Wait while packages restored.
  10. (optional) Open tasks window View -> Other Windows -> Task Runner Explorer and run watch task to recompile assets on change.
  11. Build project: Build -> Build AspnetMvcWebpackStarter.

Page structure

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

Main layout

AspnetMvcWebpackStarter/Views/Shared/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>@ViewBag.Title - Asp.Net MVC + Webpack 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 -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/fontawesome") -->
    @Styles.Render("~/bundle/vendor/fonts/ionicons")
    <!-- @Styles.Render("~/bundle/vendor/fonts/linearicons") -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/open-iconic") -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/pe-icon-7-stroke") -->

    <!-- Core stylesheets -->
    @Styles.Render("~/bundle/vendor/css/bootstrap")
    @Styles.Render("~/bundle/vendor/css/appwork")
    @Styles.Render("~/bundle/vendor/css/theme-corporate")
    @Styles.Render("~/bundle/vendor/css/colors")
    @Styles.Render("~/bundle/vendor/css/uikit")

    <!-- Load polyfills -->
    @Scripts.Render("~/bundle/vendor/js/polyfills")
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

    <!-- Layout helpers -->
    @Scripts.Render("~/bundle/vendor/js/layout-helpers")

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    @Styles.Render("~/bundle/vendor/css/perfect-scrollbar/perfect-scrollbar")

    <!-- Application stylesheets -->
    @Styles.Render("~/bundle/css/main")

    @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 -->
    <!-- @Html.Partial("_ValidationScriptsPartial") -->

    @Scripts.Render("~/bundle/vendor/js/popper/popper")
    @Scripts.Render("~/bundle/vendor/js/bootstrap")
    @Scripts.Render("~/bundle/vendor/js/sidenav")

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    @Scripts.Render("~/bundle/vendor/js/perfect-scrollbar/perfect-scrollbar")

    <!-- Application javascripts -->
    @Scripts.Render("~/bundle/js/main")

    @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>@ViewBag.Title - Asp.Net MVC + Webpack 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 -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/fontawesome") -->
    @Styles.Render("~/bundle/vendor/fonts/ionicons")
    <!-- @Styles.Render("~/bundle/vendor/fonts/linearicons") -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/open-iconic") -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/pe-icon-7-stroke") -->

    <!-- Core stylesheets -->
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-bootstrap-css"" />", "~/bundle/vendor/css/bootstrap")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-appwork-css"" />", "~/bundle/vendor/css/appwork")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-theme-css"" />", "~/bundle/vendor/css/theme-corporate")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-colors-css"" />", "~/bundle/vendor/css/colors")
    @Styles.Render("~/bundle/vendor/css/uikit")

    <!-- Load polyfills -->
    @Scripts.Render("~/bundle/vendor/js/polyfills")
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

    <!-- Layout helpers -->
    @Scripts.Render("~/bundle/vendor/js/layout-helpers")

    <!-- Theme settings -->
    @Scripts.Render("~/bundle/vendor/js/theme-settings")
    <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': '@Styles.Url("~/bundle/vendor/css/" + name)',
                            '@(name)-material.css': '@Styles.Url("~/bundle/vendor/css/" + name + "-material")',
                            '@(name)-dark.css': '@Styles.Url("~/bundle/vendor/css/" + name + "-dark")',
                        </text>
                    }

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

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

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

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    @Styles.Render("~/bundle/vendor/css/perfect-scrollbar/perfect-scrollbar")

    <!-- Application stylesheets -->
    @Styles.Render("~/bundle/css/main")

    @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 -->
    <!-- @Html.Partial("_ValidationScriptsPartial") -->

    @Scripts.Render("~/bundle/vendor/js/popper/popper")
    @Scripts.Render("~/bundle/vendor/js/bootstrap")
    @Scripts.Render("~/bundle/vendor/js/sidenav")

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    @Scripts.Render("~/bundle/vendor/js/perfect-scrollbar/perfect-scrollbar")

    <!-- Application javascripts -->
    @Scripts.Render("~/bundle/js/main")

    @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 AspnetMvcWebpackStarter/Views/_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 AspnetMvcWebpackStarter/Views/Shared/Layouts/Partials directory. 

AspnetMvcWebpackStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_Layout1.cshtml";
}
AspnetMvcWebpackStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_Layout1Flex.cshtml";
}
AspnetMvcWebpackStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_Layout2.cshtml";
}
AspnetMvcWebpackStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_Layout2Flex.cshtml";
}
AspnetMvcWebpackStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutWithoutNavbar.cshtml";
}
AspnetMvcWebpackStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutWithoutNavbarFlex.cshtml";
}
AspnetMvcWebpackStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutWithoutSidenav.cshtml";
}
AspnetMvcWebpackStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutHorizontalSidenav.cshtml";
}
AspnetMvcWebpackStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutBlank.cshtml";
}

Appwork's stylesheets

To use settings panel, you need to add Appwork's stylesheets to the bundle config (use the generator to see the example):

AspnetMvcWebpackStarter/App_Start/BundleConfig.cs
...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(new Bundle("~/bundle/vendor/css/bootstrap").Include("~/Vendor/css/bootstrap.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/bootstrap-material").Include("~/Vendor/css/bootstrap-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/bootstrap-dark").Include("~/Vendor/css/bootstrap-dark.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/appwork").Include("~/Vendor/css/appwork.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/appwork-material").Include("~/Vendor/css/appwork-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/appwork-dark").Include("~/Vendor/css/appwork-dark.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/colors").Include("~/Vendor/css/colors.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/colors-material").Include("~/Vendor/css/colors-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/colors-dark").Include("~/Vendor/css/colors-dark.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/uikit").Include("~/Vendor/css/uikit.dist.css"));

// Themes
bundles.Add(new Bundle("~/bundle/vendor/css/theme-air").Include("~/Vendor/css/theme-air.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/theme-air-material").Include("~/Vendor/css/theme-air-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/theme-air-dark").Include("~/Vendor/css/theme-air-dark.dist.css"));
...

Theming

To enable a theme you need to:

  1. Add theme file to the bundle config.

    AspnetMvcWebpackStarter/App_Start/BundleConfig.cs
    ...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

...
bundles.Add(new Bundle("~/bundle/vendor/css/theme-air").Include("~/Vendor/css/theme-air.dist.css"));
...

  2. Include theme stylesheet.

    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    @Styles.Render("~/bundle/vendor/css/theme-air")

To enable a theme just include the required theme stylesheet. 

AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-theme-css"" />", "~/bundle/vendor/css/theme-air")

Material styling

To enable material styling you need to:

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

    AspnetMvcWebpackStarter/Vendor/css/_custom-variables/_features.scss
    ...
$enable-material-style: true;
...

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

    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    <html class="material-style">

  3. Add -material suffix to bootstrap, appwork, theme-* and colors paths in the AspnetMvcWebpackStarter/App_Start/BundleConfig.cs.

    AspnetMvcWebpackStarter/App_Start/BundleConfig.cs
    ...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(new Bundle("~/bundle/vendor/css/bootstrap-material").Include("~/Vendor/css/bootstrap-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/appwork-material").Include("~/Vendor/css/appwork-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/theme-corporate-material").Include("~/Vendor/css/theme-corporate-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/colors-material").Include("~/Vendor/css/colors-material.dist.css"));

...

  4. Add -material suffix to bootstrap, appwork, theme-* and colors stylesheets.

    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    @Styles.Render("~/bundle/vendor/css/bootstrap-material")
@Styles.Render("~/bundle/vendor/css/appwork-material")
@Styles.Render("~/bundle/vendor/css/theme-corporate-material")
@Styles.Render("~/bundle/vendor/css/colors-material")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-bootstrap-css"" />", "~/bundle/vendor/css/bootstrap-material")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-appwork-css"" />", "~/bundle/vendor/css/appwork-material")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-theme-css"" />", "~/bundle/vendor/css/theme-corporate-material")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-colors-css"" />", "~/bundle/vendor/css/colors-material")

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

    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    @Scripts.Render("~/bundle/vendor/js/material-ripple")
<script>
  window.attachMaterialRippleOnLoad();
</script>

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

    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    @Scripts.Render("~/bundle/vendor/js/material-ripple")

Dark styling

To enable dark styling you need to:

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

    AspnetMvcWebpackStarter/Vendor/css/_custom-variables/_features.scss
    ...
$enable-dark-style: true;
...

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

    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    <html class="dark-style">

  3. Add -dark suffix to bootstrap, appwork, theme-* and colors paths in the AspnetMvcWebpackStarter/App_Start/BundleConfig.cs.

    AspnetMvcWebpackStarter/App_Start/BundleConfig.cs
    ...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(new Bundle("~/bundle/vendor/css/bootstrap-dark").Include("~/Vendor/css/bootstrap-dark.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/appwork-dark").Include("~/Vendor/css/appwork-dark.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/theme-corporate-dark").Include("~/Vendor/css/theme-corporate-dark.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/colors-dark").Include("~/Vendor/css/colors-dark.dist.css"));

...

  4. Add -dark suffix to bootstrap, appwork, theme-* and colors stylesheets.

    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    @Styles.Render("~/bundle/vendor/css/bootstrap-dark")
@Styles.Render("~/bundle/vendor/css/appwork-dark")
@Styles.Render("~/bundle/vendor/css/theme-corporate-dark")
@Styles.Render("~/bundle/vendor/css/colors-dark")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-bootstrap-css"" />", "~/bundle/vendor/css/bootstrap-dark")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-appwork-css"" />", "~/bundle/vendor/css/appwork-dark")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-theme-css"" />", "~/bundle/vendor/css/theme-corporate-dark")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-colors-css"" />", "~/bundle/vendor/css/colors-dark")

RTL support

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

AspnetMvcWebpackStarter/Vendor/css/_custom-variables/_features.scss
$enable-rtl-support: true;
...

Then open AspnetMvcWebpackStarter/App_Start/BundleConfig.cs file and edit paths to load Appwork's stylesheets from the ~/Vendor/css/rtl/ directory instead of ~/Vendor/css/. 

AspnetMvcWebpackStarter/App_Start/BundleConfig.cs
...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(new Bundle("~/bundle/vendor/css/bootstrap").Include("~/Vendor/css/rtl/bootstrap.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/appwork").Include("~/Vendor/css/rtl/appwork.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/theme-corporate").Include("~/Vendor/css/rtl/theme-corporate.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/colors").Include("~/Vendor/css/rtl/colors.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/uikit").Include("~/Vendor/css/rtl/uikit.dist.css"));

...
...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(new Bundle("~/bundle/vendor/css/bootstrap").Include("~/Vendor/css/rtl/bootstrap.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/bootstrap-material").Include("~/Vendor/css/rtl/bootstrap-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/bootstrap-dark").Include("~/Vendor/css/rtl/bootstrap-dark.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/appwork").Include("~/Vendor/css/rtl/appwork.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/appwork-material").Include("~/Vendor/css/rtl/appwork-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/appwork-dark").Include("~/Vendor/css/rtl/appwork-dark.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/colors").Include("~/Vendor/css/rtl/colors.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/colors-material").Include("~/Vendor/css/rtl/colors-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/colors-dark").Include("~/Vendor/css/rtl/colors-dark.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/uikit").Include("~/Vendor/css/rtl/uikit.dist.css"));

// Themes
bundles.Add(new Bundle("~/bundle/vendor/css/theme-air").Include("~/Vendor/css/rtl/theme-air.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/theme-air-material").Include("~/Vendor/css/rtl/theme-air-material.dist.css"));
bundles.Add(new Bundle("~/bundle/vendor/css/theme-air-dark").Include("~/Vendor/css/rtl/theme-air-dark.dist.css"));
...

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

AspnetMvcWebpackStarter/Views/Shared/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. 
AspnetMvcWebpackStarter/Views/Shared/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.

    AspnetMvcWebpackStarter/Views/Shared/Layouts/_Application.cshtml
    @Scripts.Render("~/bundle/vendor/js/pace")

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

    AspnetMvcWebpackStarter/Views/Shared/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-mvc-starter directory.

Open in new tab

Available tasks

You can run gulp tasks in the Task Runner Explorer window: View -> Other Windows -> Task Runner Explorer.

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

Troubleshooting

  • When you run IIS Express, the error occurs: Could not find a part of the path "...\bin\roslyn\csc.exe"

    In the VS's menu select:

    Build → Clean {ProjectName}
Build → Rebuild {ProjectName}

  • 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'">
  <Message Text="------ Building assets... ------" Importance="high" />
  <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. Update Visual Studio IDE.

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

  3. Remove the next files and directories:

    Vendor/libs/vegas/

  4. Since some extensions were removed from the bootstrap-table package, remove Vendor/libs/bootstrap-table/ directory and copy new appwork-v1_6_0/aspnet-mvc-webpack-starter/AspnetMvcWebpackStarter/Vendor/libs/bootstrap-table/

  5. Copy with replace all SCSS files within Vendor/css/ and Vendor/css/rtl/ directories:

    Vendor/css/*.scss
Vendor/css/rtl/*.scss

  6. Copy with replace changed files and directories:

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

  7. Update:

    {PROJECT_NAME}.csproj. Diff

    package.json. Diff

    packages.config. Diff

    Web.config. Diff

  8. Reload the project and restore NuGet packages.

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

  10. 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:

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

  • Copy with replace the next file:

    Vendor/libs/flatpickr/flatpickr.scss

  1. Update Visual Studio IDE.

  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:

    Vendor/css/migrate/

  4. Copy new files and directories:

    Vendor/css/_custom-variables/_appwork-dark.scss
Vendor/css/_custom-variables/_features.scss

  5. Since some extensions were removed from the bootstrap-table package, remove Vendor/libs/bootstrap-table/ directory and copy new appwork-v1_5_0/aspnet-mvc-webpack-starter/AspnetMvcWebpackStarter/Vendor/libs/bootstrap-table/

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

    Vendor/css/*.scss
Vendor/css/rtl/*.scss

  7. Copy with replace changed files and directories:

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

  8. Update:

    {PROJECT_NAME}.csproj. Diff

    Gulpfile.js. Diff

    package.json. Diff

    packages.config. Diff

    Web.config. Diff

    webpack.config.js. Diff

    Vendor/css/_custom-variables/_libs.scss. Diff

    Vendor/css/_custom-variables/_pages.scss. Diff

    Vendor/css/_custom-variables/_uikit.scss. Diff

  9. Edit variables in the 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 the project

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

    [Before] Views/Shared/Layouts/_Application.cshtml
    <html lang="en" class="default-style">
    [After] Views/Shared/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',
});