Moxie Loading
Moxie

Lean Logo

Why?

The idea for the LEAN Ecosystem was born from a desire to utilise WordPress as the engine behind a modern web application, based on AngularJS. We saw the potential of the WP-API, but also the lack of both back- and front-end infrastructure around it, LEAN aims to solve this. We hope you find it useful and it would be awesome if you considered contributing!

Overview

LEAN provides an opinionated workflow, aiming to spin up working websites as quickly as possible. It supports many WordPress features we’ve come to know and love, such as widgets and the admin bar, as well as some additional plugins such as Gravity Forms.

LEAN Mailing List

Keep up-to-date with Lean


Frontend

Angular, JavaScript, Atomic Design, SASS, Node/NPM, Gulp

Follow the getting started guide to get set-up. The LEAN front-end is based on the concepts of atomic design.

The ng-cms module is loaded via NPM. It’s based on the popular ui-router module and handles the connection with WordPress.

From when you load the app, the workflow is:

  1. Load the routes from the routes endpoint.
  2. Load the static data from the static endpoint.
  3. Load the current page’s data from the appropriate endpoint (configured in the data returned by the routes endpoint).
  4. Decide which template to render based on the data from (3) and render it.
  5. All the view data loaded in 3 is passed to the template and made available to the directives implemented within it.
  6. It’s also passed to the meta directive included in ng-cms, which renders metadata in the page <head>.

Steps 3-6 are repeated whenever the url changes.

The other awesome thing provided with the seed app, is ng-patternlab. This contains a number of re-usable patterns (e.g. a gravity forms front-end, widget areas and widgets and menus) plus our pattern lab (note this is an example of a pattern lab, actual pattern lab may differ).

Let’s look at the workflow used when working with ng-patternlab:

  1. Under the principals of atomic design our designers define all the atoms, molecules, organisms and templates required.
  2. Developers update patterns.json with all the atoms they need, plus sample data for each.
  3. Patterns can come from ng-patternlab’s library and bespoke patterns can be added to the project’s app folder.
  4. The Gulp script automatically builds your bundle.js, only including the required patterns.
  5. It also builds the pattern lab template which allows you to see your components as you style them.
  6. Repeat 2-5 for molecules, organisms then templates.


Backend

WordPress, PHP, Composer

Follow the getting started guide to set-up a new WordPress project with the LEAN plugin structure. The plugin includes a number of Composer packages by default, many of which provide endpoints via the WP-API infrastructure.

These include:

  • wp-acf – A set of useful functions for working with the ACF plugin and adding the fields to the REST API posts endpoint.
  • wp-page-templates – A way of adding page templates via a plugin.
  • wp-endpoints-static – An endpoint which returns a load of data used across the site, such as site name, widgets and menus.
  • wp-endpoints-routes – An endpoint which returns the set of routes to use in the app.
  • wp-widgets – Includes the infrastructure to build your own JSON-enabled widgets, plus a collection of pre-existing widgets.
  • wp-metadata – Adds metadata info the REST API’s posts endpoint. Includes support for Yoast.

You can add / remove packages as required in the plugin’s composer.json. Take a look in Packagist for a complete set.

The WP REST API

LEAN relies on the WP REST API plugin, which must be installed for things to work correctly out of the box. The REST API plugin provides a suite of default endpoints for posts, pages, users and many more.


Putting it all together

Overview of the LEAN Ecosystem

Getting Started

Before you start make sure you have the following installed on your machine:

Set-up the Backend

  1. Install the LEAN generator:
    npm install -g generator-moxie-lean
  2. Set-up a new WordPress installation on you local machine.
  3. Install and activate the REST API plugin.
  4. Run the LEAN new-wp-plugin generator in the root of your WordPress install:
    yo moxie-lean:new-wp-plugin

    Enter a plugin name with just -‘s, letters and numbers (also plugin names can’t start with a number and don’t use the name “lean”!).

  5. Go to the plugins section of your dashboard and activate your plugin.
  6. Go into Settings > Permalinks and set the structure to /blog/%postname%
  7. If all went well you should see some routes JSON at the /wp-json/lean/v2/routes endpoint, e.g. http://lean-test.dev/wp-json/lean/v2/routes.

Set-up the Frontend

  1. Clone ng-web-app:
    git clone https://github.com/moxie-lean/ng-web-app
  2. Create a new file in the config folder called config.local.json with the following content (replace lean-test.dev with the url of your WordPress install):
    {
       "dev": {
          "lnApi": {
             "base": "http://lean-test.dev/wp-json/lean/v2/",
             "endpoints": {
                "routes": "{API_BASE}routes",
                "static": "{API_BASE}static",
                "adminBar": "{API_BASE}admin-bar"
             }
          }
       }
    }
  3. Install all the packages (this might take a few minutes the first time) by running the following in the root folder of your project:
    npm install && bower install
  4. Now build the dev version of the app:
    npm run dev
  5. And run it:
    npm start
  6. It should launch in your browser automatically… enjoy!
  7. You should also go back into WordPress and set Settings > General > Site Url to your front-end’s url (note this might cause issues if your server is not properly configured for it*).
  8. And add a menu with a Home (“/”) link and the Sample Page. Set it to the “Main Menu” location and it will be automatically displayed by your app.

Top Tip: Use npm run watch whilst developing to automatically rebuild the app as you make changes. If you used npm start to launch it, changes will reflect in your browser as you develop 🙂

* The site url change didn’t work with MAMP when we tested it. It worked fine with a LEMP stack configured by Easy Engine (which we highly recommend).

Made with
  • angular
  • wordpress
  • html5
  • css3
  • sass
  • gulp
  • javascript
  • php
  • github
  • git