tonyair/silverstripe-webpack
1
1
Fork 0
mirror of https://github.com/a2nt/silverstripe-webpack.git synced 2024-10-22 17:05:31 +02:00
Code Issues Projects Releases Wiki Activity
6914a47f93
silverstripe-webpack/README.md
Tony Air ff3894e011
Update README.md
2018-07-06 07:50:32 +07:00

3.9 KiB
Raw Blame History

silverstripe-webpack SS4.1.*

Simple WebPack boiler plate for SilverStripe

Checkout files at /app/ folder for details

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 4 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

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/_components (Your JS components to be included)

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

  • /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/_events.js (Your custom site-wide events)

  • /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/_components (Your custom SCSS components)

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

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

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

Requirements:

  • composer
  • yarn

Instalation:

Install composer:

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

git clone https://github.com/a2nt/silverstripe-webpack.git
cd silverstripe-webpack
composer install
npm install
  • edit robots.txt, humans.txt, cache.appcache, manifest.json and package.json to setup your own project

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

TODO: