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 thebuild
commands.site/
– The website assets, can be moved to the CMS or deployed when abuild:preview
was 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 theatoms
molecules
andorganisms
folders in here as well. There's also alayouts
folder (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.ts
is the entrypoint for all._main.ts
– The entry point for the pages bundle, re-exports theApp.template.ts
and exports apages
object containing thedata
functions for each page.public/
– Contains the base.html
use to generate each page and astatic/
directory for assets that come from the CMS. Contents will only be copied over to thedist
folder when doing a preview build.
styles/
- All styling (.scss
files) for the project.main.ts
– The entry point for the Muban application.