SilverStripe WebPack boilerplate + Basics of JS/CSS UI
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tony Air 4c3fb3cf73
IMPR: minor
3 weeks ago
app IMPR: minor 3 weeks ago
bin Minor improvements 7 months ago
public IMPR: size optimizations 2 years ago
themes IMPR: Minor updates 2 years ago
.editorconfig UPD: editorconfig 1 year ago
.env.dist SS4.1 support 5 years ago
.eslintignore SS4.1 support 5 years ago
.eslintrc Minor improvements 3 years ago
.gitignore IMPR: minify with fetch 10 months ago
.gitmodules Mapbox element 3 years ago
.htaccess Mapbox API + SilverShop improvements 4 years ago
.npmrc FIX: .npmrc 1 year ago 5 years ago UPD: 1 year ago
babel.config.json UPD: packages 1 year ago
composer.json IMPR: VideoFile 3 months ago
env-dist Mino website template improvements to make it easier to start 3 years ago
eslint.config.json IMPR: Switched to Webpack 5 + REACT + GraphQL 2 years ago
package.json IMPR: VideoFile 3 months ago
php.ini Mapbox API + SilverShop improvements 4 years ago
phpcs.xml IMPR: minor updates 9 months ago
phpunit.xml Intial commit 5 years ago
sass-lint.yml Minor improvements 7 months ago
test.php IMPR: Minor updates 11 months ago
webpack.config.common.js IMPR: Add build notification 8 months ago
webpack.config.js IMPR: minor 3 weeks ago
webpack.config.serve.js IMPR: Add optional configuration values 1 year ago


Simple WebPack boiler plate for SilverStripe

Checkout files at /app/ folder for details Take a look to for UI Kit details

Note: I prefer using vanilla JS with minimal external dependencies to reach higher loading speed. There's no jQuery and no React, but it can be connected optionally.

UI Demo

Use UI Repository at to build static HTML files



  • composer
  • node
  • yarn
  • pnpm package manager

Note: You can use npm package manager, but this one will save your disc space. Replace pnpm commands with npm if you prefer npm


git clone
cd silverstripe-webpack
composer install
pnpm install
cp ./env-dist ./.env

Those steps depends on your environment:

  1. Edit .env file to define database access credentials and CMS default admin
  2. sudo chown www-data:www-data -R public/assets && mkdir silverstripe-cache && chown www-data:www-data -R silverstripe-cache (www-data is commonly used UNIX user name, but it may depend on your environment)
  3. Open to build database
  • edit .env, robots.txt, humans.txt, cache.appcache, manifest.json and package.json to setup your own project
  • copy favicon.ico after yarn build to ./public folder

Building your custom UI

Edit following files:

  • app/client/src/js/_layout.js

  • app/client/src/js/types/Your_Custom_ClassName.js

  • app/client/src/scss/_layout.scss

  • app/client/src/scss/types/Your_Custom_ClassName.scss

To compile use: yarn build To start dev-server use: yarn start

Installing composer at some cpanel hostings

php -r "copy('', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

php -d memory_limit=-1 composer.phar update --ignore-platform-reqs


  • You can use /app/_config/webpack.yml to setup webpack server parameters which will be used by webpack server and by SilverStripe to serve static content
  • You can use WebpackJS('file-name') and WebpackCSS('file-name') functions at templates to require JS and CSS. It will be served using static files or by using Webpack if the website in development mode and Webpack server is running
  • WebpackTemplateProvider::WebpackJS('file-name') and WebpackTemplateProvider::WebpackCSS('file-name') can be used at php area
  • All images will be optimised at /app/client/src/img and will be written to /app/client/dist/img (by default)
  • Favicons will be generated at /app/client/dist/icons using /app/src/favicon.png
  • Folder /app/client/src/js/types is used to create page specific JS (just create JS file there and it will be compiled)
  • Folder /app/clent/src/scss/types is used to create page specific CSS (just create SCSS file there and it will be compiled)
  • Automatic linting (JS+SCSS)
  • Bootstrap 5 included by default
  • Font-Awesome included by default
  • Deferred requirements loading
  • Requirements auto-loading
  • Includes basic silverstripe modules
  • Some necessary extensions for example editing silverstripe elements as bootstrap grid columns
  • Built-in themes support

... More features available, but I don't have much time to describe all of them ...

Folder structure:

  • /app/_config/webpack.yml (Webpack configurtion)
  • /app/src/WebpackTemplateProvider.php (WebpackJS and WebpackCSS functionality)
  • /app/src/DeferedRequirements.php (Deferred Requirements + Requirements auto-loader)
  • /app/templates/ (An example of
  • /app/src (Your backend sources)
  • /app/client/src (Your frontend sources)
  • /app/client/dist (Your compiled-production assets)
  • /app/client/src/js (Your JS-scripts)
  • /app/client/src/js/app.js (main application file to include website-wide components)
  • /app/client/src/js/main.js (Your custom site-wide functionality)
  • /app/client/src/js/_pageType_and_component_template.js (A template which can be used to create new modules)
  • /app/client/src/types/*.js (Extra page-specific modules to be auto-compiled. My suggestion is to use *ClassName*.js and then require it at SilverStripe custom controller area)
  • /app/clent/src/scss (Your styling to be compiled)

  • /app/clent/src/scss/app.scss (main application file to include site-wide components)

  • /app/clent/src/scss/_variables.sccs (your custom and bootstrap variables)

  • /app/clent/src/scss/_layout.sccs (Your site-wide styling)

  • /app/client/dist (Compiled frontend files js, css, images etc)


  • yarn - to update packages
  • yarn start - to start webpack development webserver
  • yarn build - to build production assets
  • yarn lint:check - to check SCSS and JS linting
  • yarn lint:fix - to fix SCSS and JS linting automatically

Usefull UNIX console utilities

Code search (find . -name "." | xargs grep "some text" replacement)

ag "some text" ./

File content with code hightlighting (cat replacement)

bat ./app/src/Pages/Page.php

File listing (ls replacement)

exa -aTL3 ./app

git diff tool with bat code hightlighting (git show)