Can I access Node process running on Trellis from my host machine on development?

trellis
1

Hello everyone!

I’m experimenting with vue-wordpress and I would like to make it working with Trellis. The package has NPM’s script for development - npm run dev - that starts the Node process that allows me to develop the Vue.js code.

If I understand my setup right, I need to start this process on my Trellis machine. So I did this:

  1. Added geerlingguy/nodejs ansible role to install Node and NPM to my Trellis.
  2. Successfuly ran npm install and npm run dev, which started the process on the Trellis machine on the port 8080.
  3. Added the following into my vagrantfile:
Vagrant.configure('2') do |config|
  # existing Trellis code
  config.vm.network "forwarded_port", guest: 8080, host: 8081

When I access http://localhost:8081 in my browser (Chrome, OSX), I see the following error: “This site can’t be reached / The connection was reset.”.

How do I forward the port correctly? I believe Trellis does something similar with Mailhog but I have not been able to find the code responsible for that.

Also I apologise for my possible ignorance - I’m a front-end guy who does not know very much about virtual machines. :slight_smile:

Thank you very much!

2

Why do you need to run the node process inside of your Vagrant machine? Can’t you run it on your host?

3

Thanks for a quick reply! This is how I understand vue-wordpress project so far:

On production I do not need any Node process - everything is built and running on the client. So after I run npm run build on the host, I see my changes and all the vue code runs as expected (SPA routing, state management, etc.).

On development however I need that Node process to run npm run dev so I don’t have to build my dist after every change. And that npm run dev process needs to have an access to the LAMP stack, so it sees index.php as an entry file. And for that I need to run the process from inside the Vagrant machine, right?

I’ve tried to run npm run dev from the host machine of course as well, but it only gives me the list of files in the browser (as there is no index.html file present).

Edit: Fixed some typos in commands. Everything is npm run * of course!

Edit 2: npm run dev inits webpack dev server: webpack-dev-server --env=dev

4

This topic was automatically closed after 42 days. New replies are no longer allowed.