BeAPI FrontEnd Framework

ℹ️ What is Be API Frontend Framework ?

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.

⚒️ Main 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.

🔴 Requirements

Composer

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/"
        }
    }

Autoload

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

Node 12+

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

Installation

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

⚙️ Configuration

The configurations files are in config directory.

Webpack

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.

Babel

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

Eslint

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

🚀 How to use BFF ?

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

Start with Browser Sync

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.

Build

$ yarn build

Bundle report

You can launch a bundle report with the following command :

$ yarn bundle-report