Build Configuration

A typical build file for Quoia looks like this:

// Imports
const { build } = require('quoia');

// Configuration
let config = {
  outDir: './dist',
  rootPage: require('./src/home.quoia')
};

// Build with Quoia
build(config);

The config object takes a number of parameters to tweak how Quoia behaves.

Required:

• outDir {string} - Output directory that Quoia will build to. This is a file path relative to the build script file.
• rootPage {Comonent} - This is the component that should act as the root page of your site.

Optional:

• rootCopy {string[]} - An array of relative paths to copy directly to the output directory. This is ideal for static asset folders and the like. These can be folders or files. If you are referencing a folder, including a final / will copy the contents of the folder to the output directory, not the folder itself.
• templatingEngine {'handlebars'|'none'} - Specifies a templating engine to pass all templates through. Quoia has no dependencies, but it does support a few external tools, such as handlebars. In order to use this feature, you have to install handlebars:

  $ npm install handlebars

• cssPreprocessor {'sass'|'none'} - Specifies a CSS preprocessor to use internally. In order to take advantage of Sass, you have to install node-sass:

  $ npm install node-sass

• cssIncludePaths {string[]} - When using Sass, Quoia doesn't pass file paths. Instead, it passes the raw stylesheet contents, so Sass doesn't know where to look when resolving imports. To solve this, you'll have to pass in an array of absolute paths where Sass files will be. For example, to have sass look inside of ./node_modules, you could do:

  // Imports
  const { build } = require('quoia');
  const path = require('fs');
  
  // Configuration
  let config = {
    outDir: './dist',
    rootPage: require('./src/home.quoia'),
    cssPreprocessor: 'sass',
    cssIncludePaths: [
      path.join(__dirname, './node_modules'),
    ]
  };
  
  // Build with Quoia
  build(config);
  

• scriptInsertionPosition {'body'|'head'} - This specifies the insertion point for script tags. Since Quoia will automatically concat scripts into one file and dynamically insert the script, you can specify if the script should be inserted in the head tag or at the end of the body tag. (It inserts at end of body by default).
• scriptTransform {Function} - This is a pre-write transform you can apply to scripts in the project. It gets passed two parameters: the script contents, and the output directory for this script. The function should return a string that will be written to the script. You can use this function to transform the script with external tools, like uglify for example.
• styleTransform {Function} - This function works the same as scriptTransform but for styles. The two parameters that are passed are the style contents and the output directory for the styles.