Docs v1.6.0  /  Laravel HTML5 Angular Vue.js React Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core 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.

laravel-starter directory structure

laravel-starter
app
bootstrap
config
database
public
resources
assets
js
Application javascripts
sass
Application stylesheets
vendor
Appwork's sources
fonts
Iconic fonts
fontawesome.css
ionicons.css
...
js
Javascripts
bootstrap.js
dropdown-hover.js
...
libs
Third-party libraries
animate-css
autosize
block-ui
...
sass
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
...
lang
views
layouts
Layouts
includes
Layout partials
layout-footer.blade.php
layout-navbar.blade.php
layout-sidenav.blade.php
application.blade.php
Main layout
layout-1.blade.php
layout-1-flex.blade.php
...
...
routes
storage
test
package.json
webpack.mix.js
Laravel mix config
...

Third-party plugins

The starter project by default includes all third-party plugins (see webpack.mix.js 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 package.json file.
  2. Remove related directories within the resources/assets/vendor/libs directory.
  3. Remove related @imports and @includes in the resources/assets/vendor/sass/_theme/_libs.scss file.

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

  1. Remove plyr dependency in the package.json file.
  2. Remove the resources/assets/vendor/libs/plyr directory.
  3. Remove @import "../../libs/plyr/mixins"; and @include plyr-theme($background, $color); lines in the resources/assets/vendor/sass/_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. Download PHP: https://windows.php.net/download. Unpack the downloaded archive into C:\php. Add C:\php to your PATH, then logout from the system and login again.
  6. Download and install Composer: https://getcomposer.org/doc/00-intro.md#installation-windows.
  7. Logout from the system and login again.
  8. Open C:\php\php.ini and ensure extension=fileinfo line is uncommented.
  9. Go to the laravel-starter directory.
  10. Run command composer install.
  11. Rename .env.example file to .env by running ren .env.example .env.
  12. Run command php artisan key:generate.
  13. Run command npm install.
  14. Run command npm run dev.
  15. Now you can run the server: php artisan serve
Ubuntu
  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 PHP: sudo add-apt-repository ppa:ondrej/php; sudo apt-get update; sudo apt-get install php7.3 php-pear php7.3-curl php7.3-dev php7.3-gd php7.3-mbstring php7.3-zip php7.3-mysql php7.3-xml.
  6. Install Composer: https://getcomposer.org/download/.
  7. Make composer available globally: https://getcomposer.org/doc/00-intro.md#globally.
  8. Open php.ini and ensure extension=mbstring line is uncommented.
  9. Go to the laravel-starter directory and run command composer install.
  10. Rename .env.example file to .env by running mv .env.example .env.
  11. Run command php artisan key:generate.
  12. Run command npm install.
  13. Run command npm run dev.
  14. Now you can run the server: php artisan serve.
Mac OS X
  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. Check PHP version php -v. If PHP is not installed or PHP version is less than 7.3.0, install Homebrew (https://brew.sh) and then run brew install php.
  5. Install Composer: https://getcomposer.org/download/.
  6. Make composer available globally: https://getcomposer.org/doc/00-intro.md#globally.
  7. Go to the laravel-starter directory and run command composer install.
  8. Rename .env.example file to .env by running mv .env.example .env.
  9. Run command php artisan key:generate.
  10. Run command npm install.
  11. Run command npm run dev.
  12. Now you can run the server: php artisan serve.

Page structure

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

Main layout

resources/views/layouts/application.blade.php
<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" 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>{{ isset($title) ? $title.' - ' : '' }}Laravel Starter</title>

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

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/fontawesome.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/ionicons.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/linearicons.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/open-iconic.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/pe-icon-7-stroke.css') }}">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/appwork.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/colors.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/uikit.css') }}">

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

    <!-- Layout helpers -->
    <script src="{{ mix('/vendor/js/layout-helpers.js') }}"></script>

    <!-- Libs -->

    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <link rel="stylesheet" href="{{ mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}">

    @yield('styles')

    <!-- Application stylesheets -->
    <link rel="stylesheet" href="{{ mix('/css/application.css') }}">

</head>
<body>

    @yield('layout-content')

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="{{ mix('/vendor/libs/popper/popper.js') }}"></script>
    <script src="{{ mix('/vendor/js/bootstrap.js') }}"></script>
    <script src="{{ mix('/vendor/js/sidenav.js') }}"></script>

    <!-- Libs -->

    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <script src="{{ mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>

    @yield('scripts')

    <!-- Application javascripts -->
    <script src="{{ mix('/js/application.js') }}"></script>

</body>
</html>
<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" 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>{{ isset($title) ? $title.' - ' : '' }}Laravel &tarter7lt;/title>

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

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/fontawesome.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/ionicons.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/linearicons.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/open-iconic.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/pe-icon-7-stroke.css') }}">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap.css') }}" class="theme-settings-bootstrap-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/appwork.css') }}" class="theme-settings-appwork-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate.css') }}" class="theme-settings-theme-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/colors.css') }}" class="theme-settings-colors-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/uikit.css') }}">

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

    <!-- Layout helpers -->
    <script src="{{ mix('/vendor/js/layout-helpers.js') }}"></script>

    <!-- Theme settings -->
    <script src="{{ mix('/vendor/js/theme-settings.js') }}"></script>
    <script>
        // Use settings panel generator to configure the plugin
        window.themeSettings = new ThemeSettings({
            cssPath: '',
            themesPath: '',
            pathResolver: function(path) {
                var resolvedPaths = {
                    // Core stylesheets
                    //
                    @foreach (['bootstrap', 'appwork', 'colors'] as $name)
                    '{{ $name }}.css': '{{ mix("/vendor/css/{$name}.css") }}',
                    '{{ $name }}-material.css': '{{ mix("/vendor/css/{$name}-material.css") }}',
                    '{{ $name }}-dark.css': '{{ mix("/vendor/css/{$name}-dark.css") }}',
                    @endforeach

                    // UI Kit
                    'uikit.css': '{{ mix("/vendor/css/uikit.css") }}',

                    // Themes
                    //
                    @foreach (['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'] as $name)
                    'theme-{{ $name }}.css': '{{ mix("/vendor/css/theme-{$name}.css") }}',
                    'theme-{{ $name }}-material.css': '{{ mix("/vendor/css/theme-{$name}-material.css") }}',
                    'theme-{{ $name }}-dark.css': '{{ mix("/vendor/css/theme-{$name}-dark.css") }}',
                    @endforeach
                }

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

    <!-- Libs -->

    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <link rel="stylesheet" href="{{ mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}">

    @yield('styles')

    <!-- Application stylesheets -->
    <link rel="stylesheet" href="{{ mix('/css/application.css') }}">

</head>
<body>

    @yield('layout-content')

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="{{ mix('/vendor/libs/popper/popper.js') }}"></script>
    <script src="{{ mix('/vendor/js/bootstrap.js') }}"></script>
    <script src="{{ mix('/vendor/js/sidenav.js') }}"></script>

    <!-- Libs -->

    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    <script src="{{ mix('/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>

    @yield('scripts')

    <!-- Application javascripts -->
    <script src="{{ mix('/js/application.js') }}"></script>

</body>
</html>

Layouts

To display a page with the selected layout just use @extends directive in the view.

You can find navbar, sidenav and footer templates in the resources/views/layouts/includes directory. 

resources/views/some_page.blade.php
@extends('layouts.layout-1')

@section('content')
    ...
@endsection
resources/views/some_page.blade.php
@extends('layouts.layout-1-flex')

@section('content')
    ...
@endsection
resources/views/some_page.blade.php
@extends('layouts.layout-2')

@section('content')
    ...
@endsection
resources/views/some_page.blade.php
@extends('layouts.layout-2-flex')

@section('content')
    ...
@endsection
resources/views/some_page.blade.php
@extends('layouts.layout-without-navbar')

@section('content')
    ...
@endsection
resources/views/some_page.blade.php
@extends('layouts.layout-without-navbar-flex')

@section('content')
    ...
@endsection
resources/views/some_page.blade.php
@extends('layouts.layout-without-sidenav')

@section('content')
    ...
@endsection
resources/views/some_page.blade.php
@extends('layouts.layout-horizontal-sidenav')

@section('content')
    ...
@endsection
resources/views/some_page.blade.php
@extends('layouts.layout-blank')

@section('content')
    ...
@endsection

Appwork's stylesheets

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

webpack.mix.js
...

// Core stylesheets
mix.sass('resources/assets/vendor/sass/bootstrap.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/bootstrap-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/bootstrap-dark.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/appwork.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/appwork-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/appwork-dark.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/colors.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/colors-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/colors-dark.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/uikit.scss', 'public/vendor/css', sassOptions);

// Themes
mix.sass('resources/assets/vendor/sass/theme-air.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/theme-air-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/theme-air-dark.scss', 'public/vendor/css', sassOptions)
   ...

...

Theming

To enable a theme you need to:

  1. Add theme file to the Laravel Mix config.

    webpack.mix.js
    ...

// Core stylesheets
mix...
   .sass('resources/assets/vendor/sass/theme-air.scss', 'public/vendor/css', sassOptions)
   ...

...

  2. Include theme stylesheet.

    resources/views/layouts/application.blade.php
    <link rel="stylesheet" href="{{ mix('/vendor/css/theme-air.css') }}">

To enable a theme just include the required theme stylesheet. 

resources/views/layouts/application.blade.php
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-air.css') }}" class="theme-settings-theme-css">

Material styling

To enable material styling you need to:

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

    resources/assets/vendor/sass/_custom-variables/_features.scss
    ...
$enable-material-style: true;
...

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

    resources/views/layouts/application.blade.php
    <html class="material-style">

  3. Add -material suffix to bootstrap.css, appwork.css, theme-*.css and colors.css paths in the webpack.mix.js.

    webpack.mix.js
    ...

// Core stylesheets
mix.sass('resources/assets/vendor/sass/bootstrap-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/appwork-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/theme-corporate-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/colors-material.scss', 'public/vendor/css', sassOptions)
   ...

...

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

    resources/views/layouts/application.blade.php
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap-material.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/appwork-material.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate-material.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/colors-material.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap-material.css') }}" class="theme-settings-bootstrap-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/appwork-material.css') }}" class="theme-settings-appwork-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate-material.css') }}" class="theme-settings-theme-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/colors-material.css') }}" class="theme-settings-colors-css">

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

    resources/views/layouts/application.blade.php
    <script src="{{ mix('/vendor/js/material-ripple.js') }}"></script>
<script>
  window.attachMaterialRippleOnLoad();
</script>

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

    resources/views/layouts/application.blade.php
    <script src="{{ mix('/vendor/js/material-ripple.js') }}"></script>

Dark styling

To enable dark styling you need to:

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

    resources/assets/vendor/sass/_custom-variables/_features.scss
    ...
$enable-dark-style: true;
...

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

    resources/views/layouts/application.blade.php
    <html class="dark-style">

  3. Add -dark suffix to bootstrap.css, appwork.css, theme-*.css and colors.css paths in the webpack.mix.js.

    webpack.mix.js
    ...

// Core stylesheets
mix.sass('resources/assets/vendor/sass/bootstrap-dark.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/appwork-dark.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/theme-corporate-dark.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/colors-dark.scss', 'public/vendor/css', sassOptions)
   ...

...

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

    resources/views/layouts/application.blade.php
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap-dark.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/appwork-dark.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate-dark.css') }}">
<link rel="stylesheet" href="{{ mix('/vendor/css/colors-dark.css') }}">
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap-dark.css') }}" class="theme-settings-bootstrap-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/appwork-dark.css') }}" class="theme-settings-appwork-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate-dark.css') }}" class="theme-settings-theme-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/colors-dark.css') }}" class="theme-settings-colors-css">

RTL support

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

resources/assets/vendor/sass/_custom-variables/_features.scss
$enable-rtl-support: true;
...

Then open webpack.mix.js file and edit paths to load Appwork's stylesheets from the resources/assets/vendor/sass/rtl/ directory instead of resources/assets/vendor/sass/. 

webpack.mix.js
...

// Core stylesheets
mix.sass('resources/assets/vendor/sass/rtl/bootstrap.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/appwork.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/theme-corporate.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/colors.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/uikit.scss', 'public/vendor/css', sassOptions);

...
...

// Core stylesheets
mix.sass('resources/assets/vendor/sass/rtl/bootstrap.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/bootstrap-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/bootstrap-dark.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/appwork.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/appwork-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/appwork-dark.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/colors.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/colors-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/colors-dark.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/uikit.scss', 'public/vendor/css', sassOptions);

// Themes
mix.sass('resources/assets/vendor/sass/rtl/theme-air.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/theme-air-material.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/vendor/sass/rtl/theme-air-dark.scss', 'public/vendor/css', sassOptions)
   ...

...

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

resources/views/layouts/application.blade.php
<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. 
resources/views/layouts/application.blade.php
<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.

    resources/views/layouts/application.blade.php
    <script src="{{ mix('/vendor/js/pace.js') }}"></script>

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

    resources/views/layouts/application.blade.php
    <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 laravel-starter directory.

Open in new tab

Available tasks

See Laravel Mix documentation.

Troubleshooting

  • When you execute composer install, the error occurs: ... requires ext-fileinfo * -> the requested PHP extension fileinfo is missing from your system.

    1. Execute php --ini
    2. Open the file that is pointed out in "Loaded Configuration File:"
    3. Replace ;extension=fileinfo with extension=fileinfo

Migration guide

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

Official Laravel upgrade guide: https://laravel.com/docs/8.x/upgrade.

  1. Check the PHP version php -v. Upgrade it if the version is less than 7.3.0.

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

  3. Changes within app/ directory:

    app/User.php is moved to app/Models/User.php. Diff

    app/Http/Middleware/CheckForMaintenanceMode.php is renamed to PreventRequestsDuringMaintenance.php. Diff

    New app/Http/Middleware/TrustHosts.php. Copy this file from appwork-v1_6_0/laravel-starter/app/Http/Middleware/

    app/Exceptions/Handler.php. Diff

    app/Http/Middleware/RedirectIfAuthenticated.php. Diff

    app/Http/Middleware/TrustProxies.php. Diff

    app/Http/Kernel.php. Diff

    app/Providers/AuthServiceProvider.php. Diff

    app/Providers/EventServiceProvider.php. Diff

    app/Providers/RouteServiceProvider.php. Diff

  4. Changes within config/ directory:

    config/app.php. Diff

    config/auth.php. Diff

    config/broadcasting.php. Diff

    config/cache.php. Diff

    config/cors.php. Diff

    config/filesystems.php. Diff

    config/hashing.php. Diff

    config/logging.php. Diff

    config/mail.php. Diff

    config/queue.php. Diff

    config/session.php. Diff

    config/view.php. Diff

  5. Changes within database/ directory:

    database/seeds/DatabaseSeeder.php is moved to database/seeders/ directory. Diff

    New database/migrations/XXXX_XX_XX_XXXXXX_create_password_resets_table.php migration.

    database/factories/UserFactory.php. Diff

    database/migrations/2019_08_19_000000_create_failed_jobs_table.php. Diff

  6. Other changes:

    .env. Diff

    package.json. Diff

    composer.json. Diff

    webpack.mix.js. Diff

    routes/channels.php. Diff

    routes/console.php. Diff

    routes/web.php. Diff

  7. Remove the next files and directories:

    resources/assets/vendor/libs/vegas/

  8. Since some extensions were removed from the bootstrap-table package, remove resources/assets/vendor/libs/bootstrap-table/ directory and copy new appwork-v1_6_0/laravel-starter/resources/assets/vendor/libs/bootstrap-table/

  9. Copy with replace all SCSS files within resources/assets/vendor/sass/ and resources/assets/vendor/sass/rtl/ directories:

    resources/assets/vendor/sass/*.scss
resources/assets/vendor/sass/rtl/*.scss

  10. Copy with replace the next files and directories:

    .gitignore
.styleci.yml
phpunit.xml
public/index.php
resources/assets/vendor/fonts/
resources/assets/vendor/sass/_appwork/
resources/assets/vendor/sass/_uikit/
resources/assets/vendor/libs/blueimp-gallery/
resources/assets/vendor/libs/bootstrap-slider/
resources/assets/vendor/libs/dropzone/
resources/assets/vendor/libs/fullcalendar/
resources/assets/vendor/libs/nouislider/
resources/assets/vendor/libs/minicolors/
resources/assets/vendor/libs/photoswipe/
resources/assets/vendor/libs/plyr/
resources/assets/vendor/libs/select2/
resources/assets/vendor/libs/smartwizard/
resources/assets/vendor/libs/sortablejs/
resources/assets/vendor/libs/swiper/
resources/assets/vendor/libs/timepicker/
resources/assets/vendor/libs/typeahead-js/

  11. Remove composer.lock

  12. Execute composer install

  13. Remove node_modules directory and package-lock.json. Then execute npm install

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:

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

  • Copy with replace the next file:

    resources/assets/vendor/libs/flatpickr/flatpickr.scss

Official Laravel upgrade guide: https://laravel.com/docs/7.x/upgrade.

  1. Check the PHP version php -v. Upgrade it if the version is less than 7.2.5.

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

    Note: Yarn package manager is not reqired anymore.

  3. All authentication scaffolding has been moved to the laravel/ui repository, see https://laravel.com/docs/7.x/upgrade#authentication-scaffolding. Remove:

    app/Http/Controllers/Auth/
database/migrations/2014_10_12_100000_create_password_resets_table.php

  4. Remove the next files and directories:

    tests/Bootstrap.php
resources/assets/vendor/sass/migrate/

  5. Copy new files and directories:

    config/cors.php
resources/assets/vendor/sass/_custom-variables/_appwork-dark.scss
resources/assets/vendor/sass/_custom-variables/_features.scss

  6. Since some extensions were removed from the bootstrap-table package, remove resources/assets/vendor/libs/bootstrap-table/ directory and copy new appwork-v1_5_0/laravel-starter/resources/assets/vendor/libs/bootstrap-table/

  7. Copy with replace all SCSS files within resources/assets/vendor/sass/ and resources/assets/vendor/sass/rtl/ directories:

    resources/assets/vendor/sass/*.scss
resources/assets/vendor/sass/rtl/*.scss

  8. Copy with replace changed files and directories:

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

  9. Update:

    .env.example. Diff

    composer.json. Diff

    package.json. Diff

    webpack.mix.js. Diff

    app/Exceptions/Handler.php. Diff

    app/Http/Middleware/RedirectIfAuthenticated.php. Diff

    app/Http/Kernel.php. Diff

    app/Providers/RouteServiceProvider.php. Diff

    config/app.php. Diff

    config/auth.php. Diff

    config/database.php. Diff

    config/filesystems.php. Diff

    config/logging.php. Diff

    config/mail.php. Diff

    config/session.php. Diff

    config/view.php. Diff

    database/migrations/2014_10_12_000000_create_users_table.php. Diff

    database/migrations/2019_08_19_000000_create_failed_jobs_table.php. Diff

    resources/lang/en/passwords.php. Diff

    resources/lang/en/validation.php. Diff

    routes/api.php. Diff

    routes/channels.php. Diff

    routes/console.php. Diff

    routes/web.php. Diff

    tests/Unit/ExampleTest.php. Diff

    resources/assets/vendor/sass/_custom-variables/_libs.scss. Diff

    resources/assets/vendor/sass/_custom-variables/_pages.scss. Diff

    resources/assets/vendor/sass/_custom-variables/_uikit.scss. Diff

  10. Edit variables in the resources/assets/vendor/sass/_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.

  11. Remove composer.lock

  12. Execute composer install

  13. Remove node_modules directory and then execute npm install

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

    [Before] resources/views/layouts/application.blade.php
    <html lang="{{ app()->getLocale() }}" class="default-style">
    [After] resources/views/layouts/application.blade.php
    <html lang="{{ app()->getLocale() }}" 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. Server requirements for Laravel 6 was changed, see https://laravel.com/docs/6.x/installation#server-requirements. Upgrade your environment regarding this list.

    Official upgrade guide: https://laravel.com/docs/6.x/upgrade.

  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:

    resources/assets/vendor/js/
resources/assets/vendor/libs/*/

  4. Copy with replace changed files and directories:

    resources/assets/vendor/sass/_appwork/_custom-forms.scss
resources/assets/vendor/sass/_appwork/_dropdown.scss
resources/assets/vendor/sass/_appwork/_forms.scss
resources/assets/vendor/sass/_appwork/_layout.scss
resources/assets/vendor/sass/_appwork/_mixins.scss
resources/assets/vendor/sass/_appwork/_nav.scss
resources/assets/vendor/sass/_appwork/_sidenav.scss
resources/assets/vendor/sass/_appwork/_tables.scss
resources/assets/vendor/sass/_appwork/_utilities.scss
resources/assets/vendor/fonts/fontawesome/
resources/assets/vendor/fonts/fontawesome.css
resources/assets/vendor/fonts/ionicons/
resources/assets/vendor/fonts/ionicons.css
resources/assets/vendor/fonts/linearicons/
resources/assets/vendor/fonts/pe-icon-7-stroke/

  5. Copy new files:

    .styleci.yml
tests/Bootstrap.php
database/migrations/2019_08_19_000000_create_failed_jobs_table.php

  6. Update:

    .editorconfig. Diff

    .gitignore. Diff

    composer.json. Diff

    package.json. Diff

    phpunit.xml. Diff

    webpack.mix.js. Diff

    app/Http/Kernel.php. Diff

    app/Http/Middleware/TrustProxies.php. Diff

    config/broadcasting.php. Diff

    config/cache.php. Diff

    config/database.php. Diff

    config/filesystems.php. Diff

    config/hashing.php. Diff

    config/mail.php. Diff

    config/queue.php. Diff

    config/services.php. Diff

    database/.gitignore. Diff

    database/factories/UserFactory.php. Diff

    resources/lang/en/passwords.php. Diff

    resources/lang/en/validation.php. Diff

  7. Remove composer.lock.
  8. Execute composer install.
  9. Execute yarn upgrade.
  10. Execute npm run dev.

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 laravel-demo/resources/assets/js/ui_tour.js for example. https://shepherdjs.dev/docs/tutorial-02-usage.html

  • Available extensions list of bootstrap-table package is changed (see resources/assets/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:

    resources/assets/vendor/libs/bootstrap-sortable/
resources/assets/vendor/libs/libs/flot/
resources/assets/vendor/libs/libs/idletimer/

  2. Update:

    package.json. Diff

  3. Execute yarn install

  4. Execute npm run dev

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

  2. Copy new files and directories:

    resources/assets/vendor/sass/migrate/

  3. Copy with replace all SCSS files within resources/assets/vendor/sass/ and resources/assets/vendor/sass/rtl/ directories:

    resources/assets/vendor/sass/*.scss
resources/assets/vendor/sass/rtl/*.scss

  4. Copy with replace changed files and directories:

    resources/assets/vendor/sass/_appwork/
resources/assets/vendor/sass/_theme/
resources/assets/vendor/sass/_uikit/_social.scss
resources/assets/vendor/sass/pages/clients.scss
resources/assets/vendor/sass/pages/messages.scss
resources/assets/vendor/js/
resources/assets/vendor/libs/
resources/assets/vendor/fonts/

  5. Remove excluded libraries:

    resources/assets/vendor/libs/bootstrap-tour/

  6. Since some extensions were removed from the bootstrap-table package, remove resources/assets/vendor/libs/bootstrap-table/ directory and copy new appwork-v1_3_0/laravel-starter/resources/assets/vendor/libs/bootstrap-table/

  7. Update:

    package.json. Diff

    webpack.mix.js. Diff

  8. Execute yarn upgrade

  9. Execute npm run dev

  10. (Optional) Upgrade Laravel framework:

    Note: Possibly, you also will have to upgrade PHP and Composer versions.

    1. Update:

      composer.json. Diff

      phpunit.xml. Diff

      app/Http/Controllers/Auth/RegisterController.php. Diff

      app/Providers/AuthServiceProvider.php. Diff

      app/User.php. Diff

      config/app.php. Diff

      config/auth.php. Diff

      config/cache.php. Diff

      config/database.php. Diff

      config/logging.php. Diff

      config/mail.php. Diff

      config/queue.php. Diff

      config/services.php. Diff

      config/session.php. Diff

      database/factories/UserFactory.php. Diff

      database/migrations/2014_10_12_000000_create_users_table.php. Diff

      resources/lang/en/passwords.php. Diff

      resources/lang/en/validation.php. Diff

    2. Remove composer.lock

    3. Execute composer install

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

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

  • Bootstrap CSS:

    Insert the following line into the webpack.mix.js:

    mix.sass('resources/assets/vendor/sass/migrate/appwork-130.scss', 'public/vendor/css/migrate', sassOptions)

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

    <script src="{{ mix('/vendor/css/migrate/appwork-130.css') }}"></script>

    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 resources/assets/vendor/sass/_custom-variables/_appwork.scss and resources/assets/vendor/sass/_custom-variables/_appwork-material.scss: 

$enable-validation-icons: true;
See https://laravel.com/docs/5.7/upgrade#upgrade-5.7.0

  1. Update .env. Diff

  2. Update .gitignore. Diff

  3. Update phpunit.xml. Diff

  4. Update composer.json. Diff

  5. Update app/Http/Controllers/Auth/RegisterController.php. Diff

  6. Update app/Http/Kernel.php. Diff

  7. Update app/Http/Middleware/VerifyCsrfToken.php. Diff

  8. Update app/Providers/EventServiceProvider.php. Diff

  9. Update app/User.php. Diff

  10. Update bootstrap/app.php. Diff

  11. Update config/app.php. Diff

  12. Update config/cache.php. Diff

  13. Update config/database.php. Diff

  14. Update config/hashing.php. Diff

  15. Update config/logging.php. Diff

  16. Update config/mail.php. Diff

  17. Update config/queue.php. Diff

  18. Update config/services.php. Diff

  19. Update config/session.php. Diff

  20. Update config/view.php. Diff

  21. Update database/factories/UserFactory.php. Diff

  22. Update database/migrations/2014_10_12_000000_create_users_table.php. Diff

  23. Update resources/lang/en/validation.php. Diff

  24. Update storage/framework/cache/.gitignore. Diff

  25. Update tests/CreatesApplication.php. Diff

  26. Copy new files and directories:

    app/Http/Controllers/Auth/VerificationController.php
app/Http/Middleware/Authenticate.php
app/Http/Middleware/CheckForMaintenanceMode.php
public/web.config
storage/logs/
storage/framework/cache/data/
.editorconfig

  27. Execute composer install

  28. Execute yarn install

  29. Execute npm run dev

  1. Update composer.json. Diff

  2. Update package.json. Diff

  3. Copy with replace changed files and directories:

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

  4. Execute composer install

  5. Execute yarn install

  6. Execute npm run dev