Be API Frontend Framework (BFF) is a friendly Front-end WordPress theme boilerplate to help you to start your own WordPress theme with modern tools.

• Webpack 5 JS, CSS and assets are built with Webpack.
• Esbuild Loader for ESNext & TypeScript transpilation.
• Eslint for JS code style.
• Stylelint for CSS code style.
• CSSNano for CSS optimization
• PostCSS Preset Env for modern CSS properties compatibility.
• PostCSS PX to REM to automatically convert px units to rem.
• PostCSS Sort Media Queries to combine multiple similar medie queries declarations.
• SVGO for SVG optimization.
• Image Webpack Loader for images optimization.
• Browser Sync to test your project on different devices.

You need composer to autoload all your classes from the inc folder.

Use the beapi/composer-scaffold-theme package that add it automatically to the composer.json file. You can add it yourself like this :

    "autoload": {
        "psr-4": {
            "BEA\\Theme\\Framework\\": "content/themes/framework/inc/"
        }
    }

The autoload is based on psr-4 and handled by composer.

You need a minimum of Node 12. Version 14 is recommended.

Download the latest release of BFF here and extract the zip archive into your themes WordPress's folder.

|____wp-admin
|____wp-content
| |____plugins
| |____themes
| | |____beapi-frontend-framework
| |____uploads
|____wp-includes

Of course, you can rename beapi-frontend-framework to define your WordPress theme's name.

Next, go to your theme folder (in the following example, I didn't rename beapi-frontend-framework) with your favorite Term software.

$ cd wp-content/themes/beapi-frontend-framework

Then install node dependencies with Yarn.

$ yarn

Alternatively, you can use NPM.

$ npm install

The configurations files are in config directory.

You can find the common Webpack settings file in webpack.common.js. For development mode purpose, you can edit webpack.dev.js file and for production mode, you can edit webpack.prod.js. You also have the loaders in loaders.js file and Webpack's plugin in plugins.js file.

You can find a .babelrc file to modify Babel configuration.

You can find a .eslintrc file to modify Eslint configuration.

After installing dependencies, you can run some commands which are explained below.

BFF is configured to work with lando. If you have a .lando.yml file in your project's root, set the path to your file in the browsersync.config.js file.

let fileContents = fs.readFileSync('../../../../.lando.yml', 'utf8')

Then, run the following command from the theme :

$ yarn start

BrowserSync will proxy your lando'server based on the name defined in your .lando.yml.

$ yarn build

You can launch a bundle report with the following command :

$ yarn bundle-report