silverstripe-webpack/README.md

91 lines
3.9 KiB
Markdown
Raw Normal View History

2018-03-24 11:50:48 +01:00
# silverstripe-webpack SS4.1.*
2018-02-05 12:08:06 +01:00
2018-02-05 12:18:00 +01:00
## Simple WebPack boiler plate for SilverStripe
2018-02-05 12:08:06 +01:00
2018-06-23 12:27:06 +02:00
Checkout files at /app/ folder for details
2018-02-05 12:08:06 +01:00
2018-02-05 12:52:38 +01:00
### Features:
2018-06-23 12:27:06 +02:00
+ 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
2018-02-05 12:52:38 +01:00
+ 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
2018-06-23 12:27:06 +02:00
+ 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)
2018-02-22 14:39:58 +01:00
+ Automatic linting (JS+SCSS)
2018-02-05 12:52:38 +01:00
+ Bootstrap 4 included by default
2018-02-22 14:39:58 +01:00
+ Font-Awesome included by default
+ Deferred requirements loading
+ Requirements auto-loading
2018-07-06 02:50:32 +02:00
+ Includes basic silverstripe modules
+ Some necessary extensions for example editing silverstripe elements as bootstrap grid columns
2018-02-05 12:52:38 +01:00
### Folder structure:
2018-02-22 14:39:58 +01:00
2018-06-23 12:27:06 +02:00
+ /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)
2018-02-05 12:52:38 +01:00
2018-06-23 12:27:06 +02:00
+ /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)
2018-02-05 12:52:38 +01:00
2018-06-23 12:27:06 +02:00
+ /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)
2018-02-05 12:52:38 +01:00
### Requirements:
2018-02-05 12:08:06 +01:00
2018-02-05 12:13:45 +01:00
+ composer
+ yarn
2018-02-05 12:52:38 +01:00
### Instalation:
2018-02-05 12:13:45 +01:00
2018-05-27 13:50:35 +02:00
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
2018-06-23 12:27:06 +02:00
cd silverstripe-webpack
2018-05-27 13:50:35 +02:00
composer install
npm install
```
2018-02-05 13:04:21 +01:00
+ edit robots.txt, humans.txt, cache.appcache, manifest.json and package.json to setup your own project
2018-02-05 12:13:45 +01:00
2018-02-05 12:52:38 +01:00
### Commands:
2018-02-05 12:13:45 +01:00
+ yarn - to update packages
2018-02-22 14:39:58 +01:00
+ 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
2018-02-07 05:58:49 +01:00
### TODO:
+ Planktos torrent auto-generation for static files (https://github.com/xuset/planktos#----------planktos)
2018-06-23 12:27:06 +02:00
+ ServiceWorker auto-generation