Laravel 5.6, Bootstrap 4 + Template, jQuery and Vue

Published 3 months ago by Luka

I am trying to learn Laravel. I started with Laravel 5.5, but have re-started now with a clean new install of Laravel 5.6. I need Bootstrap 4 and jQuery as well as Vue. I have to admit that I struggle to understand Node and how to install everything. I did the following. I went into c:\xampp\htdocs\ and run laravel new blog this created me a directory with all the Laravel files. I then went into that directory and run npm install. This created me a folder called node_modules with all the packages. After that I run npm run dev. Apparently this compiles my SASS and the resources/assets/js/app.js file. After that I run php artisan make:auth which created me the app.blade in resources\views\layouts in there I have 2 entries:

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

Stupid question, do I still have to download the Bootstrap Files into the public folder manually and use

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

etc plus for all my other files or do I misunderstand something? Apparently Laravel 5.6 includes Bootstrap 4 so how can I just use that?

mcangueiro

Since Laravel 5.6 includes Bootstrap 4 already what you did is enough to have Bootstrap in your project. So, you are ready to go! :)

Luka
Luka
3 months ago (1,870 XP)

Thank you. Excellent, but what about jQuery/UI? I suppose that is not available yet is it? Do I have to download it or use a CDN link? I also want to use extra scripts like flexslider. What do I do with them? Do I download them manually and upload them into the public folder and use below link or is there any other way?

<script src="{{ asset('js/flexslider/jquery.flexslider.js') }}"></script>
Luka
Luka
3 months ago (1,870 XP)

I actually noticed that I got an Error when i add

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

The Error shows Source-Map-Error bootstrap.js.map

So I found in public/js/app.js the line

//# sourceMappingURL=bootstrap.js.map

I removed the //# the Error changes to popper.js mapping Error, so I found again an entry for popper and removed again the //# which fixed that Error, but unfortunately I get a new Error "popper is not defined"

I am not quite sure what I am missing here. As I said what I am trying to be able to use Bootstrap 4, jQuery/UI, Flexslider.js and Vue.js. Any help to get it up and running in Laravel 5.6 would be fantastic.

Luka
Luka
3 months ago (1,870 XP)

I still got the same problem and I am not sure how to solve it. It is also not clear if I actually have to copy all the Javascript files into my public folder or if that should happen automatically if I do npm run dev which does not happen right now... any advice anyone? Or maybe I good Tutorial for Laravel 5.6?

MaverickChan

have your install node.js and npm?

need to compile css and js before you go

Luka
Luka
3 months ago (1,870 XP)

Yes, that is all installed and when I run "npm run dev" it comes back with successfully compiled. I just do not know how to include for example flexslider and jQuery/UI. I also still get mapping error for bootstrap and popper, besides when I uncomment sourceMappingURL in the app.js but then I get the "popper is not defined" Error, so I run into different issues here.

Heyaj05

When you say you did a fresh install - did you make sure your node_moduels folder was deleted and then re created ?

Luka
Luka
3 months ago (1,870 XP)

As described in my first post, I created a new Laravel Project. I then went into that directory and run npm install. This created me a folder called node_modules with all the packages.

Heyaj05

@Luka Sorry I missed that. Ok so everything you need for bootstrap should be there for you to use. Just make sure you are referring the css and app.js file in your blades.

Now if you decide to use a pre defined template you will definitely have to use the css from there and add it to the new file - which you will refer in your app.scss file so it can compile it.

Heyaj05

@Luka also you will have to refer to any other js file that template refers to for example my layout file is like this

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Laravel') }}</title>
   <meta name="csrf-token" content="{{ csrf_token() }}">
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <!-- <script src="//{{ Request::getHost() }}:3000/socket.io/socket.io.js"></script>-->
  </head>

 

 <body class="classname" >

   <div id="managerDashboard"></div>
  
     <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
      <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Luka
Luka
3 months ago (1,870 XP)

@Heyaj05, Thank you so much for your help. I just don't understand what the nodes_modules folder does. For example I have done a npm install flexslider. After that I had a folder called Flexslider in my nodes_modules folder, but what do I now actually do? Do I copy the folder from there into my public/js folder or is it supposed to do that automatically when I run npm run dev? Is there anything I have to change in rescources/assets/js/app.js to call up flexslider or is it just in the blade template?

Heyaj05

Basically all the libraries are stored in there. So your bootstrap libraries are there, your vue libraries are stored there. YOU don't change anything in there your project basically calls these files to perform their function.

So eg flexslider library is installed there you create an instance of that library in your project so you can use it.

Luka
Luka
3 months ago (1,870 XP)

Ok, that is actually what I thought and it means I will have to upload the node_modules folder to the webserver as well in the end. So just to confirm, any files in node_modules I can just leave in there and do not need to copy them into any other folder? And I do not need to use:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.0/jquery.flexslider.min.js"></script>

or

in my blade layout file? I still get the "popper is not defined" error and I think jQuery is still not working, so right now flexslider is not working so I can not test if I need to add that link or now. Do I have to do anything else after the below 2 to be able to use a package?

npm install package name
npm run dev
Heyaj05

In your layout file you have to call

  <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.0/jquery.flexslider.min.js"></script>

And the popper file as well .

Luka
Luka
3 months ago (1,870 XP)

Now I am lost. I assumed that with using:

npm install package name
npm run dev 

The packages are then available to use in my project so I wont have to link to them via CDN. What is the node_modules folder with all the libraries then for?

Please sign in or create an account to participate in this conversation.