08_final_steps.md

Final Steps

In this final part of the tutorial, you will learn to use a different theme as well as to create an optimized version of your application for production.

Adding a Second Theme to the Application

The CSS files that we have written for our widgets and layouts only cover the basics that are necessary for displaying our application. For a more sophisticated styling, let us add another theme based on Bootstrap CSS, called cube.theme. You can obtain the theme from NPM:

npm install laxar-cube.theme

You could also create your own theme under application/themes/, using the cube.theme as a template. The LaxarJS documentation contains a manual on themes related to this shop demo, which goes into more detail.

Changing the Theme

The theme used by the application can be changed in the file init.js, by replacing "default" with "cube":

// 1/3 in the artifacts import:
import artifacts from 'laxar-loader/artifacts?flow=main&theme=cube';
// ...

// 2/3 in the LaxarJS application configuration
const configuration = {
   // ...
   theme: 'cube',
   // ...
};


create( [ vueAdapter ], artifacts, configuration )
   // 3/3 if tooling is used, adjust it as well
   .tooling( require( 'laxar-loader/debug-info?flow=main&theme=cube' ) )
   .flow( 'main', document.querySelector( '[data-ax-page]' ) )
   .bootstrap();

Finally, the webpack configuration needs to be extended to support the SCSS-import paths required by the cube.theme. For this, the following element needs to be added to the module.rules array in the webpack.config.js:

{
   test: /[/](laxar-)?cube[.]theme[/].*[.]s[ac]ss$/,
   loader: 'sass-loader',
   options: require( 'laxar-cube.theme/sass-options' )
}

Themed SCSS for Layouts and Widgets

This already goes a long way in changing the appearance of the application. But the individual layouts and widgets will still fall back to their default.theme folders, using the slightly different set of variables from vanilla Bootstrap CSS. To fully theme your application, you'll have to use SCSS stylesheets that are customized for the cube.theme for some of the artifacts:

• application/layouts/one-column/cube.theme/scss/one-column.scss
• application/layouts/three-columns/cube.theme/scss/three-columns.scss
• application/widgets/article-browser-widget/cube.theme/scss/article-browser-widget.scss
• application/widgets/article-teaser-widget/cube.theme/scss/article-teaser-widget.scss
• application/widgets/shopping-cart-widget/cube.theme/scss/shopping-cart-widget.scss

After restarting the development server, your application should look similar to this:

Deploying the Application

The application is now complete and we can prepare an optimized version ready for deployment:

npm run optimize

Start the server with npm start and visit the production version.

In contrast to the debug.html, the optimized version (index.html) does not pick up changes automatically. However, the download size of the application is greatly reduced when using the optimized version, making for a much better user experience, especially on mobile devices. For this reason, it is strongly recommended to always use this version for production. In case you are familiar with webpack: The above command simply runs webpack -p --env.production.

Of course, when creating you own application, you do not have to use the HTML files provided by the LaxarJS scaffolding as-is. Instead, you should be able to include the relevant sections from the index.html file into any server side templating system: Only the stylesheet reference and the body contents (container div, script) are required. Depending on you setup, you may need to update the paths to resources under dist/. For more advanced production configuration, consult the webpack documentation.

The Next Step

Go ahead and develop your own application! Check out the LaxarJS manuals for more information, and get familiar with the LaxarJS Patterns to learn how to create the best and most reusable widgets.

« The article-search-box-widget | Final steps