Available options

miyagi works without setting any configuration by analyzing your files and guessing the correct template engine and template files extension. If this does not work or you want to customize it further, miyagi offers many configuration options.

`assets`

Settings for assets that miyagi serves (independently from your components).

`root`

default: ""
type: string

This settings can be helpful if assets are located in another folder, e.g. public/assets, but they should actually be served from assets/. In that case you could set this option to public.

`css`

default: null
type: object

Can either be a string, an array of strings or an object with your NODE_ENVs as key and a string or array as values:

{
  "development": ["src/reset.css", "src/theme.css"],
  "production": ["dist/index.css"]
}

This would serve different assets based on your NODE_ENV.

`customProperties`

default:

{
  "files": [],
  "prefixes": {
    "color": "color",
    "typo": "typo",
    "spacing": "spacing"
  }
}

type: object

This object is used to generate your automated styleguide.

More information about automated styleguides.

`es6Modules`

default: false
type: boolean|object

If you use ES6 modules, you can set this to true, so type="module" is added to the script tags of your included JS files (useful when using unbundled JavaScript). It is also possible to define this for each NODE_ENV via an object like this:

{
  "development": true,
  "production": false
}

`folder`

default: null
type: string|array|object

If you need miyagi to serve static assets (like images, SVGs, etc.), you can define one or multiple folders here.

Can either be a string, an array of strings or an object with your NODE_ENVs as key and a string or array as values:

{
  "development": ["svgs", "templates"],
  "production": ["templates"]
}

This would serve different assets based on your NODE_ENV.

`js`

default: null
type: string|array|object

Can either be a string, an array of strings or an object with your NODE_ENVs as key and a string or array as values:

{
  "development": ["src/index.js", "src/module.js"],
  "production": ["dist/index.js"]
}

This would serve different assets based on your NODE_ENV.

`manifest`

default: null
type: string

If you create CSS and JS files with hashes and have therefore a manifest file, you can set this here and then use the same keys of the manifest file for your CSS and JS files in assets.css and assets.js. miyagi will then resolve these.

`build`

Settings for creating a static build.

`basePath`

default: /
type: string

If you deploy your build into a subfolder instead of the root folder, set this option to the path of the subfolder.

`folder`

default: "build/"
type: string

The folder where your build files will be saved. Use --folder when using as a cli argument.

`outputFile`

default: false
type: boolean

Defines if an output.json file (containing all paths to the standalone views of a component) should be created.

`components`

`folder`

default: "src"
type: string

The folder where your components live.

`ignores`

default: ["node_modules", ".git", "package.json", "package-lock.json", ".miyagi.js"]
type: array

miyagi ignores these folders and files when looking for your components.

When setting a value, it is added to the default value and does not overwrite it.

engine

instance

default null

See Extending template engine

name

default: null
type: string
required: true

The name of your template engine (see supported template engines)

options

default: null
type: object

These options are passed to the rendering function of your template engine. You can use that for setting a custom namespace e.g..

`files`

This is the configuration for your actual component files.

Each entry accepts an object with the following keys:

extension: the file extension in your components folder (type: string)
name: the name of the file in your components folder (type: string)

`css`

default:

{
  "extension": "css",
  "name": "index"
}

Note: You can use "<component>" for name if the file should have the same name as the component folder.

`docs`

default:

{
  "extension": "md",
  "name": "index"
}

`js`

default:

{
  "extension": "js",
  "name": "index"
}

Note: You can use "<component>" for name if the file should have the same name as the component folder.

`mocks`

default:

{
  "extension": "json",
  "name": "mocks"
}

`schema`

default:

{
  "extension": "json",
  "name": "schema"
}

`templates`

default:

{
  "name": "index",
  "extension": null
}

Note: You can use "<component>" for name if the file should have the same name as the component folder.

`projectName`

default: "miyagi"
type: string

`ui`

Settings for the web UI.

`reload`

default: true
type: boolean

Defines if your component automatically reloads after saving.

`reloadAfterChanges`

`componentAssets`

default: false
type: boolean

Defines if your component automatically reloads after the css or js file of your component has been updated.

NOTE: This is disabled by default for the case that you have a build process that bundles your components assets. These bundled files could be added to your configuration in the assets key.

`renderComponentOverview`

default: false
type: boolean

Defines if an overview of all your components should be rendered on the start page.

`theme`

default:

{
  "favicon": null, // path to a favicon
  "logo": null, // path to a logo
  "mode": "light", // "light" or "dark"
  "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
  "navigation": {
    "colorText": "#707070",
    "colorBackground": "#f5f5f5",
    "colorLinks": "#222222",
    "colorLinksActive": "#ffffff",
    "colorLinksActiveBackground": "#707070"
  },
  "content": {
    "colorBackground": "#ffffff",
    "colorHeadline1": "#222222",
    "colorHeadline2": "#222222",
    "colorText": "#222222"
  },
  "css": "", // string of CSS which gets added to miyagi and components. can be used to changed the styling of miyagi or e.g. add custom fonts defined in `fontFamily`,
  "js": "" // string of JS which gets added to components
}

`validations`

Read more about validations in the Web UI section.

`accessibility`

default: true
type: boolean

`html`

default: true
type: boolean

`schema`

default: {}
type: object

This object gets passed to the instance of the schema validator AJV. See all available options. You can use this to define custom formats e.g..