Download the PHP package a2nt/silverstripe-webpack without Composer
On this page you can find all versions of the php package a2nt/silverstripe-webpack. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download a2nt/silverstripe-webpack
More information about a2nt/silverstripe-webpack
Files in a2nt/silverstripe-webpack
Package silverstripe-webpack
Short Description SilverStripe WebPack boilerplate + Basics of JS/CSS UI
License BSD-3-Clause
Informations about the package silverstripe-webpack
Simple WebPack boiler plate for SilverStripe
Checkout files at /app/ folder for details Take a look to https://github.com/a2nt/webpack-bootstrap-ui-kit.git 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 https://github.com/a2nt/webpack-bootstrap-ui-kit.git to build static HTML files
Demo: https://rawcdn.githack.com/a2nt/webpack-bootstrap-ui-kit/master/dist/index.html
Requirements:
- composer
- node
- yarn
- pnpm package manager
https://pnpm.js.org/en/installation
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:
Those steps depends on your environment:
- Edit .env file to define database access credentials and CMS default admin
- 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)
- 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
Edit following files:
- app/client/src/js/_layout.js
-
app/client/src/js/types/_Your_CustomClassName.js
- app/client/src/scss/_layout.scss
- app/client/src/scss/types/_Your_CustomClassName.scss
To compile use: yarn build To start dev-server use: yarn start
Installing composer at some cpanel hostings
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:
- /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:
- 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" ./ https://github.com/ggreer/the_silver_searcher
File content with code hightlighting (cat replacement)
bat ./app/src/Pages/Page.php https://github.com/sharkdp/bat
File listing (ls replacement)
exa -aTL3 ./app https://github.com/ogham/exa
git diff tool with bat code hightlighting (git show)
All versions of silverstripe-webpack with dependencies
ext-json Version *
silverstripe/recipe-cms Version ^5
silverstripe/recipe-plugin Version *
wilr/silverstripe-googlesitemaps Version *
silverstripe/userforms Version *
undefinedoffset/sortablegridfield Version *
silverstripe/spamprotection Version *
jonom/silverstripe-betternavigator Version *
silverstripe/externallinks Version *
symbiote/silverstripe-gridfieldextensions Version *
colymba/gridfield-bulk-editing-tools Version ^4
dnadesign/silverstripe-elemental-list Version *
dnadesign/silverstripe-elemental-virtual Version *
dnadesign/silverstripe-elemental-userforms Version *
axllent/silverstripe-version-truncator Version *
axllent/silverstripe-bootstrap-forms Version *
silverstripe/redirectedurls Version *
undefinedoffset/silverstripe-nocaptcha Version *
stevie-mayhew/silverstripe-svg Version *
innoweb/silverstripe-sitemap Version *
silverstripe/multiuser-editing-alert Version *
silverstripe/environmentcheck Version *
a2nt/silverstripe-font-awesome-field Version dev-master
a2nt/silverstripe-progressivewebapp Version dev-master
bummzack/sortablefile Version *
ezyang/htmlpurifier Version ^4.13
endroid/qr-code Version ^3.9
jonom/focuspoint Version *
silverstripe/login-forms Version *
axllent/silverstripe-trailing-slash Version *
webbuilders-group/silverstripe-turnstile Version *
a2nt/cms-niceties Version *
dynamic/flexslider Version ^5
dynamic/silverstripe-elemental-flexslider Version ^2.0@dev