Skip to main content

Posts

Front-end Presets - A New Feature in Laravel 5.5 Plus Community Supported Preset Options

Laravel 5.4 comes with Bootstrap and Vue.js including Example.vue component for your front-end scaffolding. Depending upon what we are developing, we might just need Bootstrap only but not Vue.js and vice versa or nothing at all. Laravel 5.5 comes with new artisan preset command to switch front-end scaffolding presets easily. Now there is React.js scaffolding included for React lovers. Bootstrap is a CSS framework while Vue.js is JavaScript framework. So artisan preset allows us to switch CSS framework or JavaScript framework separately. NOTE: This scaffolding is intended to be used on fresh install of Laravel before anything. Lets say we want React.js instead of Vue.js, all we have to do is php artisan preset react .  This will neatly switch JavaScript framework from Vue.js to React.js. It also replaces the Example.vue with Example.js React component. If we are working only with Bootstrap but don't want any JavaScript framework scaffolding, we can use php arti
Recent posts

Using Foundation 6 with Laravel 5

Laravel comes ready with Twitter bootstrap and Vue.js to get started with our project. But what if we want to use Zurb Foundation? I am assuming we already know the traditional way of referencing and using foundation via CDN or downloading and referencing it locally. But this tutorial is for those who want to use the power of SCSS in foundation inside Laravel. As of this writing I am using Laravel 5.4 and Foundation 6.4.1 on windows 10 with XAMPP. Assuming we have all the necessary installation like php, composer, node.js, npm, git etc., let get started. Let get started and go through it step by step. Step 1: Install a Fresh Copy of Laravel Documentation: https://laravel.com/docs/5.4 $ laravel new foundation_test $ cd foundation_test Open the folder with our favorite editor like Sublime Text , Atom Editor or  Visual Studio Code . If we open package.json file, the initial file looks like this {   "private": true,   "scripts": {     &quo