Search code examples
phplaravellocalhostemojilaravel-artisan

Laravel Failed to Load vendor resource from server?

I am trying to get emoji on my textarea in Laravel. I have the problem that the Plugin which I got from Github doesn't get loaded to the web. I followed every instruction.

I get the respond:

emojionearea.min.js

  • Failed to load resource: the server responded with a status of 404 (Not Found)

emojionearea.min.css

  • Failed to load resource: the server responded with a status of 404 (Not Found)

And this lead to an type error because it doesn't find the Plugin.

I have really no clue I tried to clear the cache, autoload-dump and also tried to publish. Also tried to access in Blade with HTML, URL and ASSET but nothing has worked out for me. My Thought on this is that it is caused because it is in the Vendor folder and not in the public folder.

I am working on macos and I am using Mamp.

// web.php
Route::get('emojiTest', function () {
    return view('emojioneareaTest');
});


// emojioneareaTest.blade.php
<!doctype html>
<html lang="en">

<head>
    <title>emojionearea by mervick</title>
    <link rel="stylesheet" href="vendor/mervick/emojionearea/dist/emojionearea.min.css">
    <script type="text/javascript" src="vendor/mervick/emojionearea/dist/emojionearea.min.js"></script>

</head>

<body>
    <textarea class="emoji"></textarea>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            if (window.jQuery) {
                // jQuery is loaded
                alert("Yeah!");
            } else {
                // jQuery is not loaded
                alert("Doesn't Work");
            }
        }
        $(document).ready(function() {
            $(".emoji").emojioneArea({
                pickerPosition: "right",
                tonesStyle: "bullet"
            });
        });
    </script>
</body>

</html>

PATH to the Plugin

- Project
 - Vendor
  - mervick
   - emojionearea
    - dist
     - emojionearea.min.css
     - emojionearea.min.js

The expected result should be, I'm able to get the emojis. Right know I can't try out the package. Also if I am not to far of I would like if you guys can give me a inside if the I am trying to get emojis is the industrial way.

I hope you guys can help me to resolve this problem.

Solution

  • The files outside of the public directory are not available over HTTP (since public is the server's Document Root). You have one option .

    • Move the both css and js files into /public folder and access it by using 
    <link rel="stylesheet" href="{{ asset('css/emojionearea.min.css') }}">

    and for js file

    <script src="{{asset('js/emojionearea.min.js')}}" type="text/javascript"></script>