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!