tonyair
/
silverstripe-webpack
mirror of https://github.com/a2nt/silverstripe-webpack.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity
SilverStripe WebPack boilerplate + Basics of JS/CSS UI
9 Commits 4 Branches 3 Tags 51 MiB
Scheme 70.9%
JavaScript 19.7%
SCSS 5.3%
PHP 4.1%
Go to file
Tony Air 6692660eca LICENSE.md 2018-02-06 10:52:55 +07:00
site Minor fix 2018-02-05 18:37:22 +07:00
.gitignore Intial commit 2018-02-05 18:11:01 +07:00
LICENSE.md LICENSE.md 2018-02-06 10:52:55 +07:00
README.md Update README.md 2018-02-05 19:04:21 +07:00
browserconfig.xml Intial commit 2018-02-05 18:11:01 +07:00
cache.appcache Intial commit 2018-02-05 18:11:01 +07:00
composer.json Minor description updates 2018-02-05 18:18:00 +07:00
humans.txt Intial commit 2018-02-05 18:11:01 +07:00
manifest.json Intial commit 2018-02-05 18:11:01 +07:00
package.json Intial commit 2018-02-05 18:11:01 +07:00
phpcs.xml.dist Intial commit 2018-02-05 18:11:01 +07:00
phpunit.xml Intial commit 2018-02-05 18:11:01 +07:00
robots.txt Intial commit 2018-02-05 18:11:01 +07:00
webpack.config.common.js Intial commit 2018-02-05 18:11:01 +07:00
webpack.config.dev.js Intial commit 2018-02-05 18:11:01 +07:00
webpack.config.prod.js Intial commit 2018-02-05 18:11:01 +07:00
webpack.configuration.js Intial commit 2018-02-05 18:11:01 +07:00

README.md

silverstripe-webpack

Simple WebPack boiler plate for SilverStripe

Checkout files at /site/ folder for details

Features:

  • You can use /site/_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 /site/src/img and will be written to /site/dist/img (by default)
  • Favicons will be generated at /site/dist/icons using /site/src/favicon.png
  • Folder /site/src/js/types is used to create page specific JS (just create a JS file there and it will be compiled)
  • Bootstrap 4 included by default

Folder structure:

  • /site/_config/webpack.yml (Webpack configurtion)

  • /site/code/WebpackTemplateProvider.php (WebpackJS and WebpackCSS functionality)

  • /site/templates/Page.ss (An example Page.ss)

  • /site/src (Your sources)

  • /site/src/js (Your JS-scripts)

  • /site/src/js/_components (Your JS components to be included)

  • /site/src/js/_components/_spinner.js (An example to display and hide loading spinner)

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

  • /site/src/js/main.js (Your custom site-wide functionality)

  • /site/src/js/_events.js (Your custom site-wide events)

  • /site/src/js/_pageType_and_component_template.js (A template which can be used to create new modules)

  • /site/src/types/*.js (Extra page-specific modules to be autocompiled. My suggestion is to use ClassName.js and then require it at SilverStripe custom controller area)

  • /site/src/scss (Your styling to be compiled)

  • /site/src/scss/_components (Your custom SCSS components)

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

  • /site/src/scss/_variables.sccs (your custom variables, ex. bootstrap)

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

P.S to compile page specific styling add following line to /site/src/types/PageClassName.js
import "../scss/types/PageClassName.scss";

Requirements:

  • composer
  • yarn

Instalation:

Commands:

  • yarn - to update packages
  • yarn start - to start webpack webserver
  • yarn build - to build assets# silverstripe-webpack