PHPackages a2nt/silverstripe-webpack - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. a2nt/silverstripe-webpack ActiveSilverstripe-recipe[Utility & Helpers](/categories/utility) a2nt/silverstripe-webpack ========================= SilverStripe WebPack boilerplate + Basics of JS/CSS UI 5(2y ago)891BSD-3-ClauseSchemePHP >=8CI failing Since Feb 22Pushed 1y ago3 watchersCompare [ Source](https://github.com/a2nt/silverstripe-webpack)[ Packagist](https://packagist.org/packages/a2nt/silverstripe-webpack)[ RSS](/packages/a2nt-silverstripe-webpack/feed)WikiDiscussions master Synced 3d ago READMEChangelog (3)Dependencies (36)Versions (7)Used By (0) Simple WebPack boiler plate for SilverStripe -------------------------------------------- [](#simple-webpack-boiler-plate-for-silverstripe) [![Silverstripe Version](https://camo.githubusercontent.com/9f7090780b4e6aa6ffca7d6d85e63d081eb872abf310d4280567580c963fb743/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53696c7665727374726970652d352e312d3030356165312e7376673f6c6162656c436f6c6f723d7768697465266c6f676f436f6c6f723d666666666666266c6f676f3d646174613a696d6167652f7376672b786d6c3b6261736536342c50484e325a79423462577875637a30696148523063446f764c336433647935334d793576636d63764d6a41774d43397a646d636949485a705a58644362336739496a41674d4341784d4445754d446b78494455344c6a55314e5349675a6d6c7362443069497a41774e57466c4d53496765473173626e4d36646a30696148523063484d364c7939325a574e30595335706279397559573576496a3438634746306143426b50534a4e4e5441754d444531494455754f445534624330794d5334794f444d674d5451754f5745324c6a55674e693431494441674d434177494463754e445134494445774c6a59314e4777794d5334794f444d744d5451754f574d344c6a67784d7930324c6a4533494449774c6a6b324c5451754d444934494449334c6a457a494451754e7a6732637a51754d444934494449774c6a6b324c5451754e7a6731494449334c6a457a624330324c6a59354d5341304c6a59334e6d4d314c6a55304d6941354c6a51784f4341784f4334774e7a67674e5334304e5455674d6a4d754e7a637a4c5451754e6a553051544d794c6a513349444d794c6a5133494441674d434177494455774c6a41784e5341314c6a67324d6e70744d5334774e5467674e4459754f444933624449784c6a49344e4330784e433435595459754e5341324c6a55674d434178494441744e7934304e446b744d5441754e6a557a5444517a4c6a59794d7941304d6934774d6a686a4c5467754f44457a494459754d5463744d6a41754f545535494451754d4449354c5449334c6a45794f5330304c6a63344e484d744e4334774d6a6b744d6a41754f545535494451754e7a67304c5449334c6a45794f5777324c6a59354d5330304c6a59334e6b4d794d6934304d79307a4c6a6b334e6941354c6a67354e4330754d44457a494451754d546b34494445774c6a41354e6d457a4d6934304e79417a4d6934304e794177494441674d4341304e6934344e7a55674e4449754e546b7965694976506a777663335a6e50673d3d)](https://packagist.org/packages/goldfinch/google-maps) 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 ======= [](#ui-demo) Use UI Repository at to build static HTML files Demo: ### Requirements: [](#requirements) - 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 ### Installation: [](#installation) ``` git clone https://github.com/a2nt/silverstripe-webpack.git 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 your-dev-url.pro/dev/build?flush 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 [](#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 ------------------------------------------- [](#installing-composer-at-some-cpanel-hostings) ``` php -r "copy('https://getcomposer.org/installer', '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 ``` ### Features: [](#features) - 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: [](#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/Page.ss (An example of Page.ss) - /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) ### Commands: [](#commands) - 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 [](#usefull-unix-console-utilities) #### Code search (find . -name "*.*" | xargs grep "some text" replacement) [](#code-search--find---name---xargs-grep-some-text-replacement) ag "some text" ./ [https://github.com/ggreer/the\_silver\_searcher](https://github.com/ggreer/the_silver_searcher) #### File content with code hightlighting (cat replacement) [](#file-content-with-code-hightlighting-cat-replacement) bat ./app/src/Pages/Page.php #### File listing (ls replacement) [](#file-listing-ls-replacement) exa -aTL3 ./app ### git diff tool with bat code hightlighting (git show) [](#git-diff-tool-with-bat-code-hightlighting-git-show) ### Health Score 32 — LowBetter than 72% of packages Maintenance28 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community11 Small or concentrated contributor base Maturity67 Established project with proven stability Bus Factor1 Top contributor holds 99.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~425 days Total 4 Last Release 748d ago Major Versions 2.6.3 → v5.x-dev2024-04-26 PHP version history (2 changes)2.6.2PHP >=7.1.0 5PHP >=8 ### Community Maintainers ![](https://www.gravatar.com/avatar/9c10d444da3afa00b1851c2595f47190836de733c6f49855d2a751b1e613f78d?d=identicon)[a2nt](/maintainers/a2nt) --- Top Contributors [![a2nt](https://avatars.githubusercontent.com/u/672794?v=4)](https://github.com/a2nt "a2nt (391 commits)")[![MasonD](https://avatars.githubusercontent.com/u/612454?v=4)](https://github.com/MasonD "MasonD (1 commits)") --- Tags silverstripewebpack ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/a2nt-silverstripe-webpack/health.svg) ``` [![Health](https://phpackages.com/badges/a2nt-silverstripe-webpack/health.svg)](https://phpackages.com/packages/a2nt-silverstripe-webpack) ``` ### Alternatives [dynamic/silverstripe-locator SilverStripe Locator Module. Show locations on a map. Search by geoposition. 2113.2k1](/packages/dynamic-silverstripe-locator)[bummzack/page-blocks Modular content-blocks for SilverStripe pages 135.3k](/packages/bummzack-page-blocks) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)