install laravel-echo and pusher-js as a simple js file without using npm

Question

To Receiving Broadcasts notifications in laravel 5.3, I needed to include laravel-echo and pusher-js files into my blade templates.

I know that it is possible via npm package manager as has been explained in official laravel docs like this :

npm install --save laravel-echo pusher-js 

And then in resouces/assets/js/app.js file import it like this :

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key-here'
});

But I have a simple js file that all my scripts are Inside it and I did not use npm in my project and all my javascript files are as .js.

I went to laravel-echo github page But I did not find any js formatted file that I can use in my pages.

Is there any way other than npm to include laravel-echo?

Update:

I found that above codes are based on Typescript.I'm not familiar with Typescript. only I know that it can compile to pure javascript files. I am looking for laravel-echo as a js file that I could include it to my page and use included functions and methods. is it posibble?

Answer 1

I don't know if it's actually possible, but I had the same question as you. I was wirthing my .js files into the public folder. When I tried to add echo, everything went wrong. So, this is my solution, but you will still need to use npm.

1. I took my .js file and move it to resources\assets\js
   
2. Open resources\assets\js\app.js and add require(./filename.js);
   
3. run npm install
   
4. run npm run dev
   
5. Change the link to the new app.js file into my layout.

That way I managed to keep one js file into my code and use laravel-echo.

Maybe there is another solution, but I did not tried it.

1. Start a new laravel project
2. run npm install
3. Modify webpack.mix.js the following way:

mix.js('resources/assets/js/app.js', 'public/js').extract(['echo']);

4. copy the public/js/vendor.js file to your actual project.
   

Theorically, this is all the script echo need to be functional. At this point, I think you will need to modify/delete some lines to make it work without the webpack initialisation.