Boilerplates¶

    As well as Django and Python applications, our Docker containerisation caninclude and build frontend components into your projects.

    Your project’s Boilerplate will define the components - HTML, CSS andJavaScript - that are set up each time the project is built.

    Every Divio Cloud project includes a Boilerplate, whether it’s one of ourstandard Boilerplates or a custom Boilerplate of your own, which will beselected when the project is created. At minimum, it will use ourBlank Boilerplate.

    The installs no components. It will be up to you to install anything you need,including templates for your site.

    Unless you are creating a django CMS site, the Blank Boilerplate is the onlyone we offer by default.

    Our HTML5 Boilerplateimplements the . TheHTML5 Boilerplate package is a popular starter set of starter files, whichincludes a generic HTML template, CSS to normalise and set some standardclasses, and some JavaScript including jQuery.

    Our implementation of it is very standard, and simply adapts it for use indjango CMS projects.

    Our Bootstrapand Boilerplates implement these two popular frontend frameworks.

    They are both fully-featured frameworks that include opinionated CSS andJavaScript for your own use, and numerous built-in widgets and standardised webcomponents.

    The Sass Boilerplate uses the HTML5 Boilerplate package as its basis. It uses:

    • to run the compilation
    • npm as a package manager
    • as a run-time environment.
      The advantage of using a dynamic Boilerplate with compiled components is thatit permits you to build a customised frontend, shorn of items your project doesnot require. Compiled components can also be heavily compressed and optimised,while the source files you work on can remain readable and comprehensive.

    The Webpack Boilerplate implements theBootstrap framework as a fully-compiled frontend set-up. It uses:

    • to run the compilation
    • Webpack to bundle all the modules
    • as a run-time environment.

    How Boilerplates work¶

    When you create a new project via the Divio Cloud Control Panel, you select aBoilerplate at the same time.

    The Control Panel examines the Boilerplate to determine what components shouldthen be installed.

    It does this by checking:

    • The boilerplate.json file (required in all Boilerplates). If templatesare specified here, they will be applied to the django CMS configuration asavailable templates.

    • The Boilerplate’s Dockerfile. Sections in the Dockerfile will becopied to the project’s Dockerfile appropriately; for example:

    ADD build /stack/boilerplate

    ENV NODE_VERSION=6.10.1 \
    NPM_VERSION=3.10.10

    ENV NODE_PATH=$NVM_DIR/versions/node/v$NODE_VERSION/lib/node_modules \
    PATH=$NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH

    will be copied to the:

    section.

    The Control Panel will then copy all files (other than the two mentioned above)and directories in the Boilerplate into the project, unless they are explicitlyexcluded in the the file’s list.

    The Control Panel will also detect and respond automatically to the presence ofvarious other files in the Boilerplate. These files are:

    • package.json - will be used by npm to install node packages
    • bower.json and .bowerrc - will be used by Bower to install frontendcomponents. Note that this is provided as legacy support. We no longerrecommend Bower (use npm instead)
    • gulpfile.js - used by Gulp execute specified compilation tasks
      The Control Panel will write appropriate commands into the Dockerfile, so thatwhen the project is next deployed, the appropriate components will be installedand tasks run.

    Bower commands will be placed inside the section ofthe Dockerfile, and so on.

    Note

    These operations are performed by the Control Panel only. They will not beperformed in the local environment, but only on the Test and _Live_servers.

    If you make changes to these files locally, in order to see the effectyou will need to:

    • push your changes to the Cloud, where they will be processed into theDockerfile
    • pull down the project again