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