See an example of the default deployed project.
- Download the default project template
cd ~/Downloads/project
make serve
to start you dev servermake build
to generate your site
Monobase let's you build sites in a component based way, allowing you to isolate and re-use every part of your website. Don't build a site, build a site system, and re-use it everywhere.
More great features:
- Components can be optionally be interactive (if marked with
Dynamic()
). - Style and correctness enforcing through TypeScript and Prettier.
- Automatic fast browser reloading on changes.
- Fast with even huge sites through incremental rendering.
- Easily extendable with existing React components.
- Automatic port selection if default is taken.
- Secure SSL serving by default.
- Nicely formatted terminal logging.
- Extensive error page with hints for common issues.
- Optimized builds for production.
/Makefile
Shorthands for commands to quickly build or install./pages
The html pages including site structure./pages/index.tsx
Default index page./pages/404.tsx
File not found page./components
The React Components used by the pages./components/template.tsx
Default page template./static
Just static files like css, images, fonts and downloads.
Some React components are interactive. Monobase generates a single script called components.js containing every marked component and hydrates them after the page load so they become interactive. This means the inital html gets loaded statically, and then code attaches itself automatically after page load.
To mark components as interactive wrap them in the Dynamic
component [example]
You can find these in the default project /components/examples
folder.
- Grid - A simple but dynamic grid.
- Button – Just a button you can click.
- Timer - A timer that displays the running time in ms.
- Cookie - An input that stores values in a cookie.
- Scroll – An element that responds to page scrolling. [todo]
- Mouse – A mouse location display.
- Styled – An example of a static, inline styled component.
- Picture - A responsive image loader.
- Visible - A wrapper that hides the content if offscreen.
- Unsplash - An unsplash random image element.
If you want to build something that resembles a blog, you will need a list of articles wit optional extra info like a date, title, etc.
- On a page or component edit the current page and every component in the
project/components
will be reloaded. So make sure every file you'd like to use with autoreload is in either theproject/pages
orproject/components
folder. - Only the hydrated components will show in the React Dev tools, as it uses runtime introspection and can't find static html components.
Make project based (non relative) path loading work.Improve dynamic component discovery (automagically, tips welcome).Harden component hydration with unique names based on component file hashes.Minifiedcomponent.js
settings for production.Potential speedup: separate ts type checking from compilation, likeawesome-ts-loader
.- Make a development page listing all components at
/components
where you can click them to see an isolated version.
The output of make build
is just a web project that you can deploy anywhere, like Amazon S3 sites or Netlify. I myselfs also really like Zeit or Netlify for static websites.
- Install Zeit:
yarn --global install now
- Build project:
make build
- Upload:
now ./build