handle front-end large scale project in laravel

Question

our Team, work with laravel and we want to start a large scale project. The front-end project will be written with Html Css Bootstrap jquery Sass and we task runner is Gulp

---

How will our project directory be? sass directories and my file and images Where do they go?

Answer 1

You can use Laravel Mix to compile CSS and JavaScript pre-processors. So you will store all your assets into resources/assets folder.

Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors.

To use laravel mix you have to first install node and npm.

Then create files app.js and app.scss in resources/app/sass directory and resources/sass respectively. Then open webpack.mix.js file which will be on your project root write the following code in webpack.mix.js file

In webpack.mix.js file (you can see this file at your project root directory)

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Now let's see what is the meaning of above two lines?

mix.js('resources/assets/js/app.js', 'public/js') says to read app.js contents (which is stored in resources/js directory), pull them and put them up in public/js after mixing them up.

Same is for mix.sass. Since it is using SAAS compatible so you may use CSS or SAAS based syntax to define your layouts. Webpack compiled them to a single CSS anyway. Now in master.blade.php, all you have to make these two calls for JS and CSS resources respectively:

<script src="{!! asset('js/app.js') !!}"></script>

and

<link rel="stylesheet" href="{!! asset('css/app.css') !!}">

Now run npm run dev command. It will compile your CSS and JS files and put the build inside a public folder.

For detail explanation you can check

https://laravel.com/docs/5.7/mix

https://appdividend.com/2018/02/19/laravel-mix-compiling-assets-tutorial/

Answer 2

It varies from projects and frameworks. Put the stuff where you find that it makes the most sense. If you're running a standalone frontend app that uses Laravel as backend API you'll probably do well organising your app with it's own tree.

But considering you're using html, css, jquery and sass, which are standard web techniques, this is what Laravel is basically built for. So use blade-templates for the html and put all your jquery and css in the public folder. If you haven't used Laravel before you should probably plow through a series of tutorials to get the idea of its MVC structure.