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.

How to config?

  1. Create a config folder on the root of your project
  2. Add a file called index.js.
  3. Add an export with an empty object to it:
module.exports = {


};

  1. Optional if you want to update the port used when developing or when running the project on production. Add a folder env and put two files in there. These should only be filled in when you want to use a different config based on the environment the project is ran:

    • local.js: Contains the port that the server listens to

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

    • production.js: Contains the port that the production server listens to

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

  2. Fill up your config/index.js up with diffenent options to update the paths or folder structure. Find the options below:

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/general/brand/logo.svg",
        favicon: "/assets/images/general/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"
    }
};