Get started with PyroCMS, Laravel, Bootstrap 4 and VUE

Earlier i wrote about how to get started with PyroCMS when bootstrap 4 was in beta. This is an updated version now that Bootstrap has officially been released. It's more down to a point and some include some commands to get you started more quickly.

Create your project

composer create-project pyrocms/pyrocms yourproject.dev

Add your env file

APP_ENV=local
APP_DEBUG=true
APP_KEY=base64:98P3BHq99h+luw2jddRFRldiIDvFVQDkP2u793Ud01w=
DB_CONNECTION=mysql
DB_HOST=localhost
DB_DATABASE=workbench
DB_USERNAME=root
DB_PASSWORD=""
APPLICATION_NAME=Default
APPLICATION_REFERENCE=default
APPLICATION_DOMAIN=localhost
ADMIN_EMAIL=william@pixney.com
ADMIN_USERNAME=admin
ADMIN_PASSWORD=admin
LAZY_TRANSLATIONS=true
DB_CACHE=true
LOCALE=en
TIMEZONE=UTC

Generate new key

php artisan key:generate

Install

php artisan install --ready

Set permissions

chmod -R 755 public/app  
chmod -R 755 bootstrap/cache  
chmod -R 755 storage

Create a custom theme

Install requirements

npm install

Scaffold your theme

php artisan make:addon pixney.theme.nameoftheme

Uninstall old bootstrap

npm uninstall bootstrap-sass

Install Bootstrap 4

npm install bootstrap

Cleanup & create stuff

rm -rf ./addons/default/pixney/nameoftheme-theme/resources/fonts &&
rm -rf ./addons/default/pixney/nameoftheme-theme/resources/js &&
rm -rf ./addons/default/pixney/nameoftheme-theme/resources/scss &&
rm -rf ./addons/default/pixney/nameoftheme-theme/resources/sass &&
mkdir -p ./addons/default/pixney/nameoftheme-theme/resources/sass &&
mkdir -p ./addons/default/pixney/nameoftheme-theme/resources/js &&
cp ./node_modules/bootstrap/scss/_variables.scss ./addons/default/pixney/nameoftheme-theme/resources/sass/variables.scss &&
cp -a ./resources/assets/js ./addons/default/pixney/nameoftheme-theme/resources && 
touch ./addons/default/pixney/nameoftheme-theme/resources/sass/theme.scss &&
echo "// Https://pixney.com
@import '~bootstrap/scss/functions';
@import 'variables';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/grid';
" > ./addons/default/pixney/nameoftheme-theme/resources/sass/theme.scss

Edit webpack.mix.js

mix.js('addons/default/pixney/nameoftheme-theme/resources/js/app.js', 'public/js')
   .sass('addons/default/pixney/nameoftheme-theme/resources/sass/theme.scss', 'public/css');
linkedinfacebook