Home Manual Reference Source Test Demo

HTML

HTML files structure the layout of the web application. The final HTML files are generated by webpack and output to the public/ directory when building with npm run build and define the pages that can be accessed via browser in the final application.

Webpack

The webpack.config.js file(github) defines the HTML pages that will be generated by the build process. For each instance of the HtmlWebpackPlugin in the plugins section, webpack will output a new HTML file using the template at the filename provided (inside of public/).

Page Header Meta Attributes

The <meta> webpage attributes are passed into the instance of the HtmlWebpackPlugin for each page defined in the webpack config file. These attributes could be dynamically set for each page if desired, or can be the same for each html page (as they are currently) and imported from a json file(github)

Templating

Static

Simple Static HTML Templating can be done with the underscore-lodash-loader. This loader allow HTML files to be imported during the compilation process using @require or @import in the HTML files, and also enables variables that can be replaced when the HTML is generated (e.g. <%= name %>) will be replaced if we use @import(<file_name>, { name: "Devlin Junker" }) with Devlin Junker.

Dynamic Javascript Components (Handlebars)

More complicated components (especially those that require javascript or looping/conditional statements should be written with handlebars in the components/ directory.

If the component should respond to user interactions and events, the component should have a .hbs file and an index.js file containing a function, that imports the .hbs file and compiles it with the parameters and handlers passed in.

Other, less complex components can be written purely in .hbs files with helpers and partials.

HTML Linting

During the build process, webpack is configured to lint the final HTML files after each successful build with htmlhint to spot any errors in the HTML structure. This will cause an error in the build process output. You can see the rules defined in the .htmlhintrc file (github).

These include:

HTML Notes/Ideas