MetaBake
'All my friends KNOW the low-coder'
mbake CLI is open source and extensible low-code productivity bundler/builder that leverages Pug and JAMstack.
Overview
MetaBake(mbake) provides a bundler/builder for a developer to write cleaner code quicker, with pug
and livereload out of the box.
You can gradually adopt it while it allows you to develop quicker - and with clean simplicity - Static Websites, Custom Elements, custom CMS/E-Commerce, CRUD and all sorts of dynamic Web Apps.
Please star our main project here:
Prerequisites
You should know HTML, CSS and JavaScript - that is all we use. If you need to catch up, we recommend this book: 'Design and Build Websites' by Jon Duckett.
Quick start
npm i -g mbake mbake -w . /*
INTUITION in 4 Minutes
Building sites take a few moments, just add index.pug
and dat.yaml
files in the folder, and compile it with mbake .
from the root folder of your site.
Example
Create a folder called 'one'. In the folder 'one', create file index.pug
headerbody p Hello #{key1}
and create file dat.yaml
key1: World
Note: to create a new page|screen in mbake, create a new folder with an index.pug and day.yaml in each folder.
Now make with mbake:
mbake .
This will create index.html
. Of course you can use regular Pug syntax to include other Pug files or Markdown. (INTUITION Markdown flavor includes CSS support):
body div include:metaMD comment.md
And example Markdown file with CSS nested classes. Title is nested in 2 levels, .column class CSS and second level .stick CSS class
:::: column col-2
::: stick
Title
:::
::::
So if you write a Markdown file comment.md, it will be included in index.html
Watcher
This will start a webserver and auto-refresh browser, and watch for file changes to auto build:
mbakeX -w .
Instead of .
you can specify any path.
Also, the fact that we are generating this static content allows us to have the entire Web App served by a CDN
SASS
CSS can be hard to work with, so people use Sass/Scss. Create a style.scss
file:
$
Create file style.yaml
in assets folder, to compile your scss to css
css:
- style.scss
and run
mbake -s .
It will create a css file in assets/css
with auto-prefixes.
So the structure of asset folder should look something like that:
assets/ css/style.css /* this is going to be compiled from style.scss */ scss/style.scss /* your working area */ style.yaml /* with `scss` files that need to be compiled */ ...
TypeScript
TypeScript is supper-set of JavaScript. Write a ts file, like foo.ts:
fooi:number
and run
mbake -t .
Lots of time you use .ts to call DB services: such as Google FireStore.
Examples - Website
There are 12 very different examples included in the mbake CLI. One is just a website:
mbake -w
That will extract an example website in the current folder. ( Obviously you can create any layout with any combination of css and other libraries, but here is how we laid out an example/starter website).
mbake -f .
This emits a Pug file that you should include in your Pug's layout head section. In turn, the included file calls a mbToolBelt.js from a CDN.
Apps
While you can build websites: you can also build full webapps, eg. CRUD.
Other examples include:
- Using markdown CSS effect: allows non-programmers to write interactive stories
- Slide show with markdown
- Dashboard example
- Ads example