Folder Structure
A list of the folders and most important files inside a standard Muban project.
.storybook/– Contains the storybook configuration.dist/– Contains the output of thebuildcommands.site/– The website assets, can be moved to the CMS or deployed when abuild:previewwas used.node/– Contains a node-js project to be deployed to offer a API mock service.storybook/– Contains a storybook build.
mocks/– Contains API mock files used by @mediamonks/monck.public/– Contents of this folder will be copied over to thedist/site, and should contain files that will be accessed from the HTML templates orfetch. These are not processed by webpack (just copied over), and the filenames will stay the same (no[contenthash]is added). In the future, we could consider versioning parts of this folder.src/– All your project code.assets/– All non-js/css assets (e.g. images, video, fonts, etc) that you require directly in your JS/CSS and gets automatically processed by webpack. These file will get a[contenthash]in their filename to be different in each build if they have changed.components/– All your Muban Components, both UI and non-UI. For UI components we try to use atomic design, so expect theatomsmoleculesandorganismsfolders in here as well. There's also alayoutsfolder (which can be seen as page templates).pages/– Contains the page data files, used to render and preview the website pages. Pages are rendered using the templates, and thesrc/App.template.tsis the entrypoint for all._main.ts– The entry point for the pages bundle, re-exports theApp.template.tsand exports apagesobject containing thedatafunctions for each page.public/– Contains the base.htmluse to generate each page and astatic/directory for assets that come from the CMS. Contents will only be copied over to thedistfolder when doing a preview build.
styles/- All styling (.scssfiles) for the project.main.ts– The entry point for the Muban application.