praxisnetau / silverstripe-webpack2-starter
Starter kit for SilverStripe 4, Webpack 2 and Bootstrap 4.
Requires
- php: >=5.5.0
- gdmedia/ss-auto-git-ignore: ~1.0
- silverstripe/asset-admin: 1.0.x-dev
- silverstripe/cms: 4.0.x-dev
- silverstripe/framework: 4.0.x-dev
- silverstripe/graphql: 0.2.x-dev
- silverstripe/reports: 4.0.x-dev
- silverstripe/siteconfig: 4.0.x-dev
Requires (Dev)
- phpunit/phpunit: ~4.8
This package is not auto-updated.
Last update: 2024-10-26 20:43:11 UTC
README
SilverStripe 4 + Webpack 2 + Bootstrap 4 = awesome! 😎
This starter kit expands upon silverstripe-webpack-starter and has been revised to work with SilverStripe 4, Webpack 2 and Bootstrap 4. Modernizr is also included for easy browser feature detection.
Installation
Installation is via Composer.
Create a new project based on this repo by running:
$ composer create-project praxisnetau/silverstripe-webpack2-starter /path/to/project dev-master
Alternatively, clone the repo, and then run:
$ composer install
Once Composer has finished downloading packages, you'll need to create a .env
file either in the project root, or the
parent directory. An example file .env.example
is included in the repo to give you a head start. The .env
file
configures the environment and database settings for SilverStripe 4. Make sure you don't commit any .env
files with
sensitive information (such as passwords) to version control!
You'll also need to install the frontend dependencies in the themes/app
folder. You can either use Yarn or NPM to
install:
Yarn
$ cd themes/app
$ yarn install
NPM
$ cd themes/app
$ npm install
Development
Once the frontend dependencies are installed in node_modules
, you'll need to start the Webpack development server:
Yarn
$ yarn run start
NPM
$ npm run start
If everything goes according to plan, the Webpack development server should start running on http://localhost:8080
and
Webpack will compile the theme source files.
You can now access your app host in your browser. SilverStripe will build it's database, and CSS changes will be hot loaded by Webpack.
Configuration
The theme uses bootstrap-loader
and modernizr-loader
for easy customisation of your theme via configuration files:
themes/app/.bootstraprc
- YAML configuration for Bootstrapthemes/app/.modernizrrc
- YAML configuration for Modernizr
Using these files, you can selectively enable or disable features of both Bootstrap and Modernizr for your custom app build.
Production
To prepare files for distribution to production servers, you can run Webpack in production mode by using:
Yarn
$ yarn run build
NPM
$ npm run build
Webpack will clear your themes/app/production
folder and output optimised and minified CSS and JavaScript.
Deployment
When deploying your project to a live server, you do not need to deploy the themes/app/source
folder. Only deploy
themes/app/production
.
Attribution
- Thanks to Aaron Carlino and Stevie Mayhew for laying the groundwork for this repo to be built.