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

Question

To receive broadcast notifications in laravel 5.3 , I needed to include laravel-echo and pusher-js files in my click templates.

I know this is possible with the npm package manager , as described in laravel docs as follows:

npm install --save laravel-echo pusher-js 

And then in the resouces/assets/js/app.js 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 in which all my scripts are inside, and I did not use npm in my project, and all my javascript files were .js .

I went to the laravel-echo github , but I did not find a js-formatted file that I can use on my pages.

Is there a way besides npm to enable laravel-echo?

Update:

I found that the above codes are based on Typescript . I am not familiar with Typescript. only i know that it can compile clean javascript files. I am looking for laravel-echo as a js file that could include it on my page and use the included functions and methods. is this an offering?

Answer 1

I don’t know if this is possible, but I had the same question as you. I was wirthing my .js files in a shared folder. When I tried to add an echo, everything went wrong. So this is my solution, but you still need to use npm.

• I took the .js file and moved it to resources\assets\js
  
• Open resources\assets\js\app.js and add require(./filename.js);
  
• run npm install
  
• run npm run dev
  
• Change the link to the new app.js file to my layout.

Thus, I managed to save one js file in my code and use laravel-echo.

Perhaps there is another solution, but I have not tried it.

• Start a new laravel project
• run npm install
• Modify webpack.mix.js as follows:

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

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

Theoretically , this is all script echo should be functional. At the moment, I think you will need to change / delete some lines so that they work without initializing webpack.