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.
- Babel for ES6 browser support.
- 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.
You need to work in a WordPress environment in order to make the BFF work with webpack for local dev. To do that you need to install Advanced Responsive Images in your plugins
folder.
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 NPM or Yarn.
$ 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 :
$ npm start
BrowserSync will proxy your lando'server based on the name defined in your .lando.yml
.
$ npm run build
You can launch a bundle report with the following command :
$ npm run bundle-report