Waffer
Waffer is a pre-designed MVC server
Install
There is a repo for cli wafferjs/waffer-cli
$ npm install -g waffer-cli
Usage
See waffer-cli usage
Features
Vue frontend
By default Vue.js and vue-router are used for rendering the website.
Custom components
Custom components are shared between views. Base project ships with two custom components which are used in every view to handle errors: error-handler
and error
Easiest way to create components in waffer is to run waffer component <name>
in directory of the project.
Note that to append custom components to your view you have to add proper tags to your pug template
html head link(href='/components.css', rel='stylesheet') // ... body // ... script(src='/components.js')
View files linking
By default all assets are taken from the assets/static/
directory of your project.
Every url that starts with @
represents a file from current view — i.e.
# request scripts/app.js of the current view http://example.com/@scripts/app.js # `/` is equal to `/index/` view http://example.com/my-view/@scripts/app.js
To access another files of another view you can request them from /view-name/file
. If requested file is not found it will be redirected to assets/static/
+ view-name/file
of the root of your project.
Two routers
There are two routers one on the server side and one on the client side
https://example.com/main-view/sub-view/
Server side router
Server side router handles main views — i.e.
https://example.com/users/https://example.com/posts/
These routes are defined by your view structure in the views/
directory of your project. The easiest way to create a new view is to run waffer view <name>
inside your project directory.
Server side views can be totally different from each other. You can serve single index.pug
file or a full blown view with client routing from the template.
Client side router
Client side router handles all sub-views — i.e.
https://example.com/users/wvffle/https://example.com/posts/123/
To define a route you have to add an entry to @scripts/routes.js
with subview url as a key and a template file as a value
'/users': 'templates/users' // ...
You can also name the routes by passing an array with the template as the first element and name of the route as the second one
// ... // add a name to the 404 route // to later get current route name in the code '*': 'templates/404' 'notfound'
Async template loading
Since we have a client router we should not include templates with all of the components of the routes. The size of the app.prod.js
would be massive if we did that.
These templates are loaded asynchronously as the subview is requested. By default they stay inside @templates/
directory.
Preprocessors!
Yup, here they are!
We chose to use pug, stylus and bublé but we are open to add support for more than just these three