Getting npm run watch to work with Laravel and Laragon


  • | 689 points

    Hi, newbie question! I am trying to setup a project using laravel as backend and vuejs as front end.
    I am having issues when I run npm run watch, it gets compiled ok but I cannot access for example my-project-example.dev:8080 which is the local dev server. Should I try to change the webpack dev default server port or is there any other solution?
    Thanks,


  • administrators
    | 66215 points

    @lorenzo1975 : You should show an image of your console so we can identify issue and help you.


  • | 689 points

    Hello @leokhoa thanks for you support. Here I have attached of the result build with npm run watch:

    1. From running command npm run watch:
      0_1502767587991_upload-de4699c7-551f-4437-ad87-e4d389df6323

    2. Here the build result

    0_1502767461618_upload-85e85b6f-3d94-47e7-b883-24d4383d91da

    I can see my changes reflected in the browser at the project address, but shouldn't I have two running web servers? One from js at project.dev:8080 and the other one from php / laragon at project.dev ?

    I will try with a full spa test with vue-router to see if I am actually taking over php, while testing this I am following a very simple tutorial and it does not use vue-rotuer, so I am still returning welcome.blade.php as root path. I was just expecting with npm run watch to see also a dev server at :8080

    Kindest,
    Lorenzo


  • administrators
    | 66215 points

    Did you try npm run dev?

    npm run dev
    

  • | 689 points

    Hi, yes I did and it builds correctly...
    0_1502771012584_upload-62ffd5eb-68b0-4b4c-8c6d-01c19a40f1ac

    but I still get no response from :8080, all works fine at .dev see my snapshot of network tab on example.dev

    0_1502771324018_upload-92f0b594-86e7-44b6-bf51-45eb54ab3e8c

    and on example.dev:8080

    0_1502771409962_upload-13f21483-a7f2-4364-9e26-b9604505504f

    Now in settings I have not touched anything, so I guess nginx is not active:

    0_1502771496178_upload-6a7e034f-0af8-41c3-b046-1ac011a41140


  • administrators
    | 66215 points

    @lorenzo1975 : If you check Nginx, you surely can run at 8080 :)
    So, you did nothing wrong. You run npm run watch to ask Node.js auto reload for you if there is any file change.
    Apache serves your PHP at port 80. If you need port 8080, you can change Apache's port or activate Nginx.


  • | 689 points

    @leokhoa I mentioned being a newbie! But I am still a bit confused, when I run npm run watch on a vuejs project for example I get a built in dev server running...correct? It uses by default port 8080.

    If I check nginx I sure serve the site via nginx, but my question / doubt is still there, what happens to the webpack dev-server? Is it running in the background? For a simple tutorial like the one I was following is fine, but what about when I try (I will soon) try to setup a full single page app and just use laravel as the backend, in this case I will want to have the site running on :8080 via node, is this correct?

    P.S. Thanks for the amazing work on this community, I really enjoy laragon by the way.


  • | 689 points

    @leokhoa

    Ok, getting closer...! I changed apache to 8888, now I can run both at same time :) webpack dev server at 8080 and php at 8888, I am getting addicted...:)


Log in to reply
 

Looks like your connection to Laragon was lost, please wait while we try to reconnect.