Nasrul Hazim Bin Mohamad

Laravel: Import Templates into Laravel

Apr
27

Assalamualaikum,

We know, there’s millions of web templates available out there – the clean look, corporate look, modern, minimalist. You name it, either it is free or paid version, usually it come in HTML, JS and CSS format. It’s hard to find template that is ready with Laravel.

Previously, here are some of the approaches I did, to get the template into Laravel application.

  1. Download the template, copy the assets, organise them in public directory. That’s ok, but I need a way to keep everything in resources/assets.
  2. Download the template, mimic / copy the important part of the template – CSS / JavaScript – place it in resources/assets and start writing codes for front-end assets, then compile using Laravel Mix.
  3. Get the list of dependencies used for the theme, manually install using yarn add..., then create scripts – CSS / JavaScripts – in resources/assets, then compile using Laravel Mix.

All these some of my previous approaches in importing templates into Laravel application.

Yesterday, I have a chance experimenting on new method. Here the workflow:

  1. Clone / Download the template into resources/assets/templates/
  2. In terminal, go into resources/assets/templates/the-template/, run npm install && npm run build – depending on your template selection, sometimes it is required to compile the template, but there is templates that did not require you to compile.
  3. Then in webpack.mix.js, copy all assets generated in resources/assets/templates/the-template/ to public/the-template.

Then you are done! You can start use the asset() helper like asset('the-template/js/vendor.js'), and so on in your layouts.

Following an example of the templates I have compile and export to public folders – but I did not implement in the new layout, as it require a lot of efforts to create components and use all the classes from the template.

Template Into Laravel

Hope my explanation will make you guys clear, how to import templates into Laravel projects – 3 main steps: git clone, build(optional), copy compiled assets with mix to public directory.

Thanks!

Laravel: Font Awesome 5

Feb
09

Assalamualaikum / Hi,

Today, I’m going to share how to include the new Font Awesome 5 in your Laravel application. You will need Node.js to do so – see Laravel Mix.

So to start with let’s, consider that you have your fresh Laravel application created, you need to install all front-end dependencies then install Font Awesome 5.

Create resources/assets/js/font-awesome.js and in resources/assets/js/font-awesome.js add the following:

Next, in webpack.mix.js, add the following:

In terminal run npm run production.

Once you’re done, you may use Font Awesome 5 in your application. See Font Awesome 5 for the icons available.

Please take note, this is for free Font Awesome 5. For Pro, you just need the license key and replace the word `free` to `pro` during installing the package

Training on Web Development with Laravel Framework (Advanced) at Barracuda Campus, Cyberjaya (08 Feb 2018). Interested to learn? Check out our website at Cleanique Coders or email us for further enquiry.