Front End Frameworks

The Forme boilerplate theme ships out of the box with Bootstrap 5.3 and jQuery 3.7, however there's nothing to stop you using whatever combination of frameworks you're more comfortable with, or even none at all. Go ahead and npm install as you see fit, and edit webpack.config.js as required.

For example in our own projects, we tend to avoid jQuery except for the simplest portfolio sites - currently we favour Stimulus for lighter interactions and widgets, and Vue 3 for more complex use cases like SPAs.

As for the CSS side, it's easy enough to swap out Bootstrap for whatever system you prefer. We currently dig more of a CubeCSS approach with Sass preprocessing and UnoCSS for our utility layer, but there are plenty of options out there.

Here is an example Encore config snippet for one of our own projects to give you some pointers, but checkout Webpack Encore for all the available options.

/* webpack.config.js */
Encore
    /* output settings */
    .setOutputPath('assets/dist/')
    .setPublicPath('/wp-content/plugins/foo-bar-plugin/assets/dist')
    .setManifestKeyPrefix('assets/dist/')
    /* public stimulus app entry point */
    .addEntry('app', './assets/src/js/app.js')
    /* admin stimulus app entry point */
    .addEntry('admin', './assets/src/js/admin.js')
    /* vue 3 app with typescript, @ alias, and dotenv */
    .addEntry('vue', './assets/src/vue/src/main.ts')
    .enableVueLoader(() => { }, { version: 3 })
    .enableTypeScriptLoader()
    .addAliases({ '@': path.resolve(__dirname, 'assets/src/vue/src') })
    .addPlugin(new Dotenv({ ignoreStub: true, path: './.env.local' }))
    /* enable sass */
    .enableSassLoader()

    /* other default settings */
    .disableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    });

Our Stimulus apps live in assets/src/js with separate controller directories for public and admin so they need to import their context accordingly.

assets/src/js/
├── admin.js
├── app.js
└── controllers
    ├── admin
    │   ├── foo_bar_controller.js
    │   └── bar_baz_controller.js
    └── public
        ├── baz_qux_controller.js
        └── qux_foo_controller.js

/* Public facing stimulus app - assets/src/js/app.js */
import '../css/app.css';

import { Application } from "@hotwired/stimulus"
import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"

window.Stimulus = Application.start()
const context = require.context("./controllers/public", true, /\.js$/)
Stimulus.load(definitionsFromContext(context))

/* Admin facing stimulus app - assets/src/js/admin.js */
import '../css/admin.css';

import { Application } from "@hotwired/stimulus"
import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"

window.Stimulus = Application.start()
const context = require.context("./controllers/admin", true, /\.js$/)
Stimulus.load(definitionsFromContext(context))

Our Vue 3 app code is in assets/src/vue. There is nothing particularly special about its structure or config, we just point Webpack to the entry point at assets/src/vue/main.ts and it handles the rest.

assets/src/vue/
├── README.md
├── babel.config.js
├── cypress.json
├── public
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── composables
│   ├── main.ts
│   ├── router
│   ├── shims-vue.d.ts
│   ├── shims-vuex.d.ts
│   └── store
├── tests
└── tsconfig.json

Front End Frameworks ​

Front End Frameworks