Thursday, January 25, 2018

Front-end Presets for Older Laravel Frameworks

Preset is a new artisan command that provides opinionated scaffolding for various front-end frameworks/libraries such as React, Bootstrap, and Vue.js. This command is very helpful if your projects want to scaffold from the default Laravel's front-end framework, Vue.js, to something else like React. This command also provides you a way to remove all of the presets by running the command: php artisan preset none. At the time of writing, preset artisan command is only available for Laravel 5.5.

Projects that still run on PHP 5 can't use Laravel later than 5.4. Yet, some web hostings still not support PHP 7. Thus, most of them 'stuck' on Vue.js preset.

Of course, you can't be stuck to a front-end framework just because there is no preset artisan command. You can just set up your package.json manually by using npm command and by adding required packages one by one. What if you don't want the hassle of setting up the npm packages?

Laravel


In case you are too lazy or don't have time for setting up the packages, follow this guide to scaffold the frameworks similar to preset command does. Most preset are straightforward, they just modify your package.json and generate some 'bootstrap' code.

Install Laravel Mix and merge this package.json with your package.json first, if you are using Laravel version below 5.4.

React

  1. Run this command in your project directory:
    npm install babel-preset-react@^6.23.0 react@^15.4.2 react-dom@^15.4.2 --save-dev
  2. Copy this code to resources/assets/js/components/Example.js
  3. Copy this code to resources/assets/js/app.js
  4. Copy this code to webpack.mix.js
  5. Optionally, remove Vue.js from dependencies: npm uninstall vue --save-dev and delete  resources/assets/js/components/ExampleComponent.vue

Bootstrap

  1. Install Bootstrap and jQuery:
    npm install bootstrap-sass@^3.3.7 jquery@^3.1.1 --save-dev
  2. Save this code to resources/assets/sass/_variables.scss
  3. Save this code to resources/assets/sass/app.scss
  4. If you are using Laravel version below 5.4 save this code to webpack.mix.js

Vue.js

  1. Run this command in your project directory:
    npm install vue@^2.5.7 --save-dev
  2. Copy this code to resources/assets/js/components/ExampleComponent.vue, this code to resources/assets/js/app.js, and this code to webpack.mix.js
  3. Optionally, remove React dependencies: npm uninstall babel-preset-react react react-dom --save-dev and delete resource/assets/js/components/Example.js

None

This preset is for removing all front-end scaffolding.
  1. Run this command to delete all presets:
    npm uninstall babel-preset-react react react-dom bootstrap-sass jquery vue --save-dev
  2. Copy this code to resources/assets/js/app.js
  3. Delete resources/assets/sass/app.scss content
  4. Optionally, delete these directories: node_modules, resources/assets/js/components, public/css, public/js; and this file: resources/assets/sass/_variables.scss.



No comments:

Post a Comment