Skip to content

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).

css

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/reset.css", "src/theme.css"],
  "production": ["dist/index.css"]
}

This would serve different assets based on your NODE_ENV.

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

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

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: true
type: boolean

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

theme

default:

{
  "favicon": null,
  "logo": null,
  "navigation": {
    "colorText": "#707070",
    "colorBackground": "#f5f5f5",
    "colorLinks": "#222222",
    "colorLinksActive": "#ffffff",
    "colorLinksActiveBackground": "#707070"
  },
  "content": {
    "colorHeadlines": "#222222",
    "colorText": "#222222"
  }
}

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..