https://reactcosmos.org/_next/static/chunks/pages/docs/configuration/cosmos-config-eef87bee602f9211.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1945],{8401:function(e,t,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/configuration/cosmos-config",function(){return s(4951)}])},4951:function(e,t,s){"use strict";s.r(t),s.d(t,{__toc:function(){return c},default:function(){return p}});var i=s(5893),o=s(6997),n=s(2643);let r=/^(.+?)( \[default: (.+?)\])?$/;function a(){let e=Object.assign({table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",code:"code"},(0,n.a)()),t=function e(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],i=[];return Object.keys(t).filter(e=>!e.startsWith("$")).filter(e=>!["vite","webpack"].includes(e)).sort((e,t)=>e.localeCompare(t)).forEach(o=>{let n=t[o];if("object"===n.type&&n.properties)i.push(...e(n.properties,[...s,o]));else{let{description:e,defaultValue:t}=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=e.match(r);return t?{description:t[1],defaultValue:t[3]}:{description:""}}(n.description);i.push({name:[...s,o].join("."),description:e,default:t})}}),i}(s(7261).properties);return(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Option"}),(0,i.jsx)(e.th,{children:"Description"}),(0,i.jsx)(e.th,{children:"Default"})]})}),(0,i.jsx)(e.tbody,{children:t.map(t=>(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:t.name})}),(0,i.jsx)(e.td,{children:t.description}),(0,i.jsx)(e.td,{children:t.default&&(0,i.jsx)(e.code,{children:t.default})})]},t.name))})]})}var l=s(208);let c=[{depth:2,value:"Config Schema",id:"config-schema"},{depth:2,value:"Config Options",id:"config-options"}];function d(e){let t=Object.assign({h1:"h1",code:"code",p:"p",strong:"strong",h2:"h2",pre:"pre",span:"span",a:"a"},(0,n.a)(),e.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h1,{children:(0,i.jsx)(t.code,{children:"cosmos.config.json"})}),"\n",(0,i.jsxs)(t.p,{children:["The Cosmos config is a ",(0,i.jsx)(t.strong,{children:"JSON"})," file, so it can only contain serializable\nvalues. This design decision is meant to discourage complex configuration,\nmake it easy to embed config options into the Cosmos UI, and enable visual\nconfig editing."]}),"\n",(0,i.jsx)(t.h2,{id:"config-schema",children:"Config Schema"}),"\n",(0,i.jsx)(t.p,{children:"You can enhance your Cosmos config with autocomplete in code editors like VS Code."}),"\n",(0,i.jsx)(t.pre,{"data-language":"jsonc","data-theme":"default",filename:"cosmos.config.json",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"jsonc","data-theme":"default",children:[(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:'"$schema"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://json.schemastore.org/cosmos-config"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-comment)"},children:"// your options..."})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,i.jsxs)(t.p,{children:["And if you use VS Code you can map the Cosmos config schema globally by ",(0,i.jsx)(t.a,{href:"https://code.visualstudio.com/docs/languages/json#_mapping-in-the-user-settings",children:"extending your user settings"}),"."]}),"\n",(0,i.jsx)(t.pre,{"data-language":"json","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"json.schemas"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:": ["})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  {"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:'"fileMatch"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"cosmos.config.json"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:'"url"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"http://json.schemastore.org/cosmos-config"'})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"]"})})]})}),"\n",(0,i.jsx)(t.p,{children:"Alternatively, you can reference the local Cosmos config schema in your workspace configuration."}),"\n",(0,i.jsx)(t.pre,{"data-language":"json","data-theme":"default",hasCopyCode:!0,children:(0,i.jsxs)(t.code,{"data-language":"json","data-theme":"default",children:[(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"json.schemas"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:": ["})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  {"})}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:'"fileMatch"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"cosmos.config.json"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,i.jsxs)(t.span,{className:"line",children:[(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-keyword)"},children:'"url"'}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,i.jsx)(t.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./node_modules/react-cosmos/config.schema.json"'})]}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,i.jsx)(t.span,{className:"line",children:(0,i.jsx)(t.span,{style:{color:"var(--shiki-color-text)"},children:"]"})})]})}),"\n",(0,i.jsx)(t.h2,{id:"config-options",children:"Config Options"}),"\n",(0,i.jsx)(l.UW,{type:"info",children:(0,i.jsxs)(t.p,{children:["To understand the Cosmos config options in more detail see\n",(0,i.jsx)(t.a,{href:"https://github.com/react-cosmos/react-cosmos/blob/main/packages/react-cosmos/config.schema.json",children:"config.schema.json"}),"."]})}),"\n",(0,i.jsx)(a,{})]})}var p=(0,o.j)({MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}=Object.assign({},(0,n.a)(),e.components);return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)},pageOpts:{filePath:"pages/docs/configuration/cosmos-config.mdx",route:"/docs/configuration/cosmos-config",timestamp:1790105926e3,title:"cosmos.config.json",headings:c},pageNextRoute:"/docs/configuration/cosmos-config"})},7261:function(e){"use strict";e.exports=JSON.parse('{"$schema":"http://json-schema.org/draft-04/schema#","additionalProperties":false,"properties":{"$schema":{"type":"string"},"rootDir":{"description":"The root directory that all others paths in this config are relative to. Usually the root of your repo. If omitted, rootDir is equal to the directory containing your Cosmos config. When you don\'t use a Cosmos config, rootDir defaults to the current working directory.","type":"string","minLength":1},"exportPath":{"description":"Output directory for static exports. [default: \\"cosmos-export\\"]","type":"string","minLength":1},"detectLocalPlugins":{"description":"Automatically detect and load local plugins. [default: true]","type":"boolean"},"disablePlugins":{"description":"Disable plugins. [default: false]","type":"boolean"},"staticPath":{"description":"Dir path to serve static assets from.","type":"string","minLength":1},"plugins":{"description":"Module IDs of Cosmos plugins (eg. \\"react-cosmos-plugin-open-fixture\\" or \\"../path/to/my-plugin\\").","type":"array","items":{"type":"string","minLength":1},"uniqueItems":true},"publicUrl":{"description":"Base URL for static assets. [default: \\"\\"]","type":"string"},"fixturesDir":{"description":"Name for directories that contain fixture files (eg. __fixtures__/example.jsx). [default: \\"__fixtures__\\"]","type":"string","minLength":1}

1,"fixtureFileSuffix":{"description":"Suffix for fixture files (eg. example.fixture.jsx). [default: \\"fixture\\"]","type":"string","minLength":1},"ignore":{"description":"Patterns for ignoring fixture and decorator files (eg. [\\"**/dist/**\\"]).","type":"array","items":{"type":"string","minLength":1},"uniqueItems":true},"watchDirs":{"description":"Directories where the Cosmos server watches for fixture files changes while running. [default: [\\".\\"]]","type":"array","items":{"type":"string","minLength":1},"uniqueItems":true},"lazy":{"description":"Dynamically import fixture and decorator modules as they are loaded. When false all fixture and decorator modules are imported statically and bundled together. [default: false]","type":"boolean"},"exposeImports":{"description":"Expose user imports and config required for the Cosmos renderer. Used with React Native and in custom integrations. When a path is specified it requires a file extension (eg. \\"src/cosmos.imports.ts\\"). [default: false]","anyOf":[{"type":"string","minLength":1},{"type":"boolean"}]},"host":{"description":"Dev server host. Set to null to accept connections from any address that reaches the server. [default: null]","anyOf":[{"type":"string","minLength":1},{"type":"null"}]},"port":{"description":"Dev server port. [default: 5000]","type":"number"},"portRetries":{"description":"Max number of port retries. [default: 10]","type":"number"},"https":{"description":"Server will be served over HTTPS.","type":"boolean"},"httpsOptions":{"description":"Additional options for HTTPS server.","type":"object","additionalProperties":false,"properties":{"certPath":{"description":"Path of a certificate file.","type":"string"},"keyPath":{"description":"Path of a certificate\'s key file.","type":"string"}}},"httpProxy":{"description":"Proxy some URLs to a different HTTP server (eg. an API backend dev server).","type":"object","additionalProperties":true,"patternProperties":{".*":{"anyOf":[{"type":"string"},{"type":"object","description":"Advanced HTTP proxy config.","additionalProperties":true,"required":["target"],"properties":{"target":{"type":"string"},"secure":{"type":"boolean"},"pathRewrite":{"type":"object","patternProperties":{".*":{"type":"string"}}},"logLevel":{"type":"string","enum":["error","debug","info","warn","silent"]}}}]}}},"globalImports":{"description":"Modules to be imported before loading components. Stuff like reset.css, polyfills, etc.","type":"array","items":{"type":"string","minLength":1},"uniqueItems":true},"rendererUrl":{"description":"Required when renderer doesn\'t run on the same port (or host) as the Playground. Useful for integrations with build tools. [default: null]","anyOf":[{"type":"string","minLength":1},{"type":"object","additionalProperties":false,"required":["dev","export"],"properties":{"dev":{"type":"string","minLength":1},"export":{"type":"string","minLength":1}}},{"type":"null"}]},"dom":{"description":"DOM-related options","type":"object","properties":{"containerQuerySelector":{"description":"Document selector for existing element to use as component parent (eg. #root). A blank container element is created from scratch if no selector is provided. [default: null]","type":["string","null"],"minLength":1}}},"vite":{"description":"Vite-related options","type":"object","additionalProperties":false,"properties":{"configPath":{"description":"Path to Vite config. Set to false to disable reading it from the default path. [default: \\"vite.config.js\\" or \\"vite.config.ts\\"]","anyOf":[{"type":"string","minLength":1},{"enum":[false]}]},"mainScriptUrl":{"description":"URL to custom main script (eg. \\"/src/my-main.tsx\\"). [default: detect main script URL]","anyOf":[{"type":"string","minLength":1},{"type":"null"}]},"port":{"description":"Vite renderer port. [default: 5050]","type":"number"}}},"webpack":{"description":"Webpack-related options","type":"object","additionalProperties":false,"properties":{"configPath":{"description":"Path to an existing webpack config, which Cosmos will reuse to build your code. Set to null to disable this behavior. [default: \\"webpack.config.js\\"]","anyOf":[{"type":"string","minLength":1},{"type":"null"}]},"overridePath":{"description":"Path to a user module that customizes the webpack config used by Cosmos. Set to null to disable this behavior. [default: \\"webpack.override.js\\"]","anyOf":[{"type":"string","minLength":1},{"type":"null"}]},"includeHashInOutputFilename":{"description":"Changes output filename from \\"[name].js\\" to \\"[name].[contenthash].js\\". [default: false]","type":"boolean"}

1,"hotReload":{"description":"Enable webpack\'s Hot Module Replacement. [default: true]","type":"boolean"},"reloadOnFail":{"description":"When using webpack\'s Hot Module Replacement, enable automatic location reload after webpack fails to update modules. [default: false]","type":"boolean"}}},"ui":{"description":"UI plugin options","type":"object","additionalProperties":true,"properties":{"rendererPreview":{"description":"Options for the renderer preview UI plugin.","type":"object","additionalProperties":false,"properties":{"backgroundColor":{"description":"Background color of the iframe preview. [default: \\"#fff\\"]","type":"string"}}},"responsivePreview":{"type":"object","additionalProperties":false,"properties":{"devices":{"description":"List of device viewports.","type":"array","items":{"type":"object","additionalProperties":false,"required":["label","width","height"],"properties":{"label":{"type":"string","minLength":1},"width":{"type":"number","minimum":1},"height":{"type":"number","minimum":1}}}}}}}}},"title":"JSON schema for React Cosmos configs","type":"object"}')}},function(e){e.O(0,[6997,2888,9774,179],function(){return e(e.s=8401)}),_N_E=e.O()}]);