Config

What is it?

The config contains the whole configuration of the project. If there is none, the default configuration defined by us will be used. If there is one present, this config will be combined with the one we have defined and every value you define overwrites the default values.

Structure

In order to customise your setup a bit more you should add a config folder on the root of your project. Within that folder, add the underlying structure

  • base: folder containing the main/base configuration of the project
    • index.js: file containing configuration applied in both local and production
    • local.js: file containing configuration when working locally
    • production.js: file containing configuration when deploying
  • scripts.js: file containing the js build structure

Base

The base folder contains the main/base configuration of the project. This is mainly linking directories or naming instances within the project.

index.js

By default this should contain a simple export of a small object:

module.exports = {
    /**
     * General info
     * -------------------------------------------------------------------------
     */
    app: {
        name: "Name of the project",
        logo: "/assets/images/brand/logo.svg",
        favicon: "/assets/images/meta/favicon.ico",
    },
};

local.js

This contains the configuration that is different when deploying the project. This is the configuration that should only be used locally. By default this should be something simple like the port the server makes use of:

module.exports = {
    server: {
        port: 9999
    }
};

production.js

This contains the configuration that is different when the project is deployed. This is the configuration that should only be used when the project is deployed. By default this should be something simple like the port the server makes use of. This can be anything, depends on your own server.

module.exports = {
    server: {
        port: 12000
    }
};

Script.js

This file contains the configuration necessary to build and minify the JavaScript structure. By default the brandplatform already contains the build for general:

module.exports = {
    general: "./src/js/general.js",
};

But don't worry, this can be overwritten by your own scripts.js. You should consider this object to be the entry point of webpack when building the files. This can be written in 2 different ways:

  1. Multiple entry points with just one file:
module.exports = {
    general: "./src/js/general.js",
    marketing: "./src/js/marketing.js",
    tools: "./src/js/tools.js",
};
  1. Multiple entry points with multiple files:
module.exports = {
    general: [
        "./src/js/general1.js",
        "./src/js/general2.js",
        "./src/js/general3.js",
    ],
    marketing: "./src/js/marketing.js",
    tools: "./src/js/tools.js",
    leapforward: [
        "./src/js/little-miss-robot.js",
        "./src/js/knight-moves.js",
        "./src/js/once.js",
    ],
};

Options

App

  • name: The name that will be shown as the <title> of the browser
  • logo: The location of the logo of the brand. This will be used in the header of the brandplatform
  • favicon: The location of the favicon used in the brandplatform. This will be used in the tab of the browser
  • description: Description of the project used in the meta tag <meta type="description">
  • version: DO NOT OVERWRITE The current/latest version of the project because this is linked to the package.json
module.exports = {
    app: {
        name: "Little Miss Robot",
        logo: "/assets/images/brand/logo.svg",
        favicon: "/assets/images/meta/favicon.ico",
        description: "",
        version: "",
    }
};

Environment

DO NOT OVERWRITE

  • node: The type of environment used by this project. Can either be
  • local* or production.
  • core: The type of environment used by the core NPM package. When working on the NPM package this is local, by default this is production
module.exports = {
    environment: {
        node: process.env.NODE_ENV,
        core: process.env.CORE_ENV
    }
};

Project

  • dir: The directory where all the Nunjucks templates are placed within
  • dist: The directory where the build will be placed within
  • changelog: The directory where all the changelog files are placed within
module.exports = {
    project: {
        dir: "./src/styleguide/",
        dist: "./dist",
        changelog: "./changelog"
    }
};

Taxonomy

  • library: Used to change how we call the component library
    • name: the name of the component library. Changes the copy in the main navigation from component library to the new value.
    • route: the copy in the route when navigating to the component library. This should NOT contain any spaces or special characters.
  • fundamentals: The name given to the category within the component library where the colors, typography and iconography is documented. Changing this will change the name in the sidebar and the route. This should NOT contain any spaces or special characters.
  • pages: The name given to the category where we collect all the pages or views build up with the components and building-blocks of the component library. This should NOT contain any spaces or special characters.
module.exports = {
    taxonomy: {
        library: {
            name: "Component library",
            route: "library"
        },
        fundamentals: "fundamentals",
        pages: "pages"
    }
};

Styles

  • dir: The directory where the scss files is placed within. This is used to compile to CSS
  • vendors: The directory where the vendors are placed within. This is used to make sure the compiler ignores these
  • linter: The directory to where the linter is located for linting the SCSS.
  • ignore: The directory to where the ignore for the linter is located to ignore linting certain files.
module.exports = {
    styles: {
        dir: "./src/scss/",
        vendors: "./src/scss/_vendors/",
        linter: "./.stylelintrc",
        ignore: "./.stylelintignore"
    }
};

Scripts

  • dir: The directory where the JavaScript files are located. This is used to compile ES6 to readable JavaScript for the browser. Very important to know is that you ALWAYS have to place your main JavaScript file directly in the folder because we loop over these files and see these as the main entry points. No other JavaScript file, except the main ones need to be placed here. The result is each file compiled with its imports.
  • vendors: The location of the JavaScript vendors te be ignored by the linters and the compiles
  • linter: The location of the JavaScript linter
module.exports = {
    scripts: {
        dir: "./src/js/",
        vendors: "src/js/vendors/",
        linter: "./eslintrc.json"
    }
};

Assets

  • images: The directory in which the images are located
  • fonts: The directory in which the fonts are located
  • videos: The directory in which the videos are located
  • audio: The directory in which the audio is located
module.exports = {
    assets: {
        images: "./src/assets/images/",
        fonts: "./src/assets/fonts/",
        videos: "./src/assets/videos/",
        audio: "./src/assets/audio/"
    }
};

Server

  • localhost: The port used to run the localhost on. When the project runs you need to navigate to localhost:9000 or you own defined port to view the brandplatform in the browser.
  • port: The port used by the server to listen to any changes
  • api: The API that is used to display content on the brand and resources pages. This API is build by Little Miss Robot.
module.exports = {
    server: {
        localhost: 9000,
        port: 9999,
        api: ""
    }
};

Release

  • zipname: The name of the zip file created when deploying
module.exports = {
    release: {
        zipname: "package.zip"
    }
};