Static multi page

This build is based on a single template from which all pages are inherited. As well as components that can be included in pages. Particular attention was paid to the fact that in development mode rebuild all modules html.

• Simple setup instructions

  • Start development static mutli-page project with simple, configured, linter enabled, browser synced asset files.

• Configuration per environment

  • development - sourcemaps, browser synced developmentment server
  • production - minification, sourcemaps

• Configurable browsers versions support. Uses .browserslistrc

• The built CSS / JavaScript files will respect the configured supported browser versions using the following tools:

  • Sass - preprocessing css files. Use 7-1 Pattern for architecture
  • babel-preset-env - smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms.

• Support for assets optimization for production environment with ability to configure:

  • Code Minification of JavaScript and CSS processed files.
  • Images Optimisation - optimize jpeg, jpg, png, gif, svg filesize and loading type via imagemin. Plugin and Loader for webpack to optimize (compress) all images using imagemin. Do not worry about size of images, now they are always optimized/compressed.

• Support for source code syntax style and formatting linters that analyze source code to flag any programming errors, bugs, stylistic errors or suspicious constructs:

  • SASS syntax checker - you can change or add additional rules in .sasslintrc file. Configuration options can be found on sass-lint documentation.
  • JavaScript syntax checker - following the airbnb style, you can review and configure the rules in .eslintrc file. Configuration options can be found on eslint documentation.

• Latest Webpack 5 - JavaScript module bundler.

• Latest SASS compiler based on Dart sass.

• Latest Babel 7 (@babel/core) - JavaScript compiler - Use next generation JavaScript, today.

• Configured and ready to use Webpack Dev Server plugin for faster local development - webpack-dev-server

• Integration with Webpack Bundle Analyzer - Visualize size of webpack output files with an interactive zoomable treemap. HtmlWebpackPartialsPlugin - to add support for partials or templates. ExtraWatchWebpackPlugin - help you to attach extra files or dirs to webpack's watch system TerserWebpackPlugin - to minimize the script in production mode

1. Download latest template release or clone this. Rename it to your project name and browse the directory.
2. Install all dependencies using npm * install* command.

$ npm i

• Amend package.json file and optionally specify:

  • name - Name of your project. A name can be optionally prefixed by a scope, e.g. @myorg/mypackage.
  • version - Specify and maintain a version number indicator for your project code.
  • author - Your organisation or just yourself. You can also specify contributors.
  • description - Short description of your project.
  • keywords - Put keywords in it. It’s an array of strings.
  • repository - Specify the place where your code lives.
  • license - Announce your code license, figure out the license from Choose an Open Source License .

• Amend .browserslistrc file :

  • Specify the supported browsers versions - you can refer to full list of availalbe options.

• Edit the webpack.config.js if you want to specify:
  • server: configure development server, specify host, port. Refer to the full development server configuration options for webpack-dev-server.
  • limits: configure file size thresholds for assets optimizations.
    • Image/Font files size in bytes. Below this value the image file will be served as Data URL (inline base64).
  • paths: src or dist directories names and file system location.

You can additionally configure webpack for specific environment:

• development - webpack.config.js
• production - webpack.config
• HtmlWebpackPartialsPlugin - [webpack.config] - to add components for static pages

• SASS files are located under src/scss/
• JavaScript files with support of latest ECMAScript ES6 / ECMAScript 2016(ES7)/ etc files are located under src/js/
• Image files are located under src/images/
• Font files are located under src/fonts/
• HTML files are located under src/views
  • src/views/layout.html– this is the main html template from which all pages will be inherited.
  • under src/views/pages all html pages
  • under src/views/components all components for pages
  • It will automatically build all HTML files placed under src/views/pages directory, no need to manually configure each template anymore!

Each new standalone page only needs to create a file [name].html under pages.

├── package.json
└── src
    └── views
        ├── pages
        │   ├── about.html
        │   └── index.html
        └── components
            ├── footer.html
            ├── nav.html

Optimize assets for production by:

$ npm run production

Start a development server - reloading automatically after each file change.

$ npm run start

Development build by:

$ npm run dev

• CSS files are located under /public/css/
• JavaScript files with support of ES6 / ECMAScript 2016(ES7) files are located under /public/js/
• Images are located under /public/images/
• Fonts are located under /public/fonts/
• HTML files are located under /public/

$ npm run lint:sass

$ npm run lint:js

$ npm run stats

This will open the visualisaion on the default configuraiton URL localhost:8888, you can change this URL or port following the package documentation.

Distributed under the MIT License. See LICENSE.txt for more information.

This boilerplate template contains integration with Travis CI. The build system runs all linting scripts and deploys production optimized pages to GitHub pages upon push to the master branch Deployments history

[email protected]

@helgaj - https://t.me/helgaj

helgawebmentor