Sage 10 / Bud server URL & port configuration with Trellis

Running a new Sage 10 install setup appears to not work as it did for me on my previous Sage 10 test last week…

bud.config.js:

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://trellis.sageten2.build')

    /**
     * Development URL
     */
    .serve('http://localhost:2222');
};

yarn build:

yarn run v1.22.17
$ bud build
[10%] [building] import loader ./node_modules/mini-css-extract-plugin/dist/
[100%] Compiled

β”Œ assets ────────────────────────────────────────────────────────────┐
β”‚                                                                    β”‚
β”‚                                                                    β”‚
β”‚       app        app.521c12.css       4.03 kB                      β”‚
β”‚       runtime    runtime.194772.js    1.24 kB                      β”‚
β”‚       editor     editor.5f39da.js     769 bytes                    β”‚
β”‚       app        app.f5abda.js        623 bytes                    β”‚
β”‚       editor     editor.31d6cf.css    0 bytes                      β”‚
β”‚       α ƒ          manifest.json        171 bytes                    β”‚
β”‚  βœ”    α ƒ          entrypoints.json     162 bytes                    β”‚
β”‚  βœ”    α ƒ          wordpress.json       33 bytes                     β”‚
β”‚                                                                    β”‚
β”‚                                                                    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

 duration    2s 961ms (427ms + 2s 534ms)   


 mode    production    hash       ae5ae51fbdbb41f02e06   
 bud     5.6.2         webpack    5.68.0                 

[99%] [cache] resolving snapshot build dependencies IdleFileCachePlugin shu
[99%] [cache] modules snapshot build dependencies IdleFileCachePlugin shutd
[100%] Compiled

βœ” that's a wrap
✨  Done in 5.28s.

yarn dev:

yarn dev
yarn run v1.22.17
$ bud dev
[99%] [done] MultiCompiler plugins

β”Œ assets ────────────────────────────────────────────────────────────┐
β”‚                                                                    β”‚
β”‚                                                                    β”‚
β”‚ βœ”    vendor/bud.app.editor    vendor/bud.app.editor.js    139.26   β”‚
β”‚ kB                                                                 β”‚
β”‚ βœ”    app                      app.js                      66.48 kB β”‚
β”‚ βœ”    editor                   editor.js                   57.51 kB β”‚
β”‚ βœ”    α ƒ                        manifest.json               110      β”‚
β”‚ bytes                                                              β”‚
β”‚ βœ”    α ƒ                        entrypoints.json            109      β”‚
β”‚ bytes                                                              β”‚
β”‚ βœ”    α ƒ                        wordpress.json              33 bytes β”‚
β”‚                                                                    β”‚
β”‚                                                                    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

 duration    2s 79ms   


 mode    development    hash       58f6f32db466f78a6f2a   
 bud     5.6.2          webpack    5.68.0                 


 server url:    http://localhost:51808/          
 proxy url:     http://trellis.sageten2.build/   


[100%] Compiled

It’s assigning a random port to the server url.

localhost:2222 resolves in the browser with:

SSH-2.0-OpenSSH_8.2p1
Invalid SSH identification string.

The assigned port: http://localhost:51808 does not resolve at all.

After a minute or two, it resolves with Error occurred while trying to proxy: localhost:51808/

I tried changing my chosen 2222 port to 51808 and re-ran yarn dev but it still won’t resolve.

trellis.sageten2.build resolves fine.

Per the docs:

After removing this line and running yarn dev, the output is:

yarn dev
yarn run v1.22.17
$ bud dev
[99%] [done] MultiCompiler plugins

β”Œ assets ────────────────────────────────────────────────────────────┐
β”‚                                                                    β”‚
β”‚                                                                    β”‚
β”‚ βœ”    vendor/bud.app.editor    vendor/bud.app.editor.js    139.26   β”‚
β”‚ kB                                                                 β”‚
β”‚ βœ”    app                      app.js                      66.48 kB β”‚
β”‚ βœ”    editor                   editor.js                   57.51 kB β”‚
β”‚ βœ”    α ƒ                        manifest.json               110      β”‚
β”‚ bytes                                                              β”‚
β”‚ βœ”    α ƒ                        entrypoints.json            109      β”‚
β”‚ bytes                                                              β”‚
β”‚ βœ”    α ƒ                        wordpress.json              33 bytes β”‚
β”‚                                                                    β”‚
β”‚                                                                    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

 duration    2s 77ms   


 mode    development    hash       58f6f32db466f78a6f2a   
 bud     5.6.2          webpack    5.68.0                 


 server url:    http://localhost:51844/          
 proxy url:     http://trellis.sageten2.build/   


[100%] Compiled

New random port that won’t resolve:
http://localhost:51844/

Is http://trellis.sageten2.build your working local dev URL, and you’re using a VM?

If so, this should be your Bud config:

...

.proxy('http://trellis.sageten2.build');

Nothing else after the .proxy. No .serve.

It’s assigning a random port

…but is this causing a problem? It sounds like you just have a configuration problem.

Here’s my example, using my local dev Trellis site at http://example.test:

# bud.config.js
...

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://example.test');

    /**
     * Development URL
     */
    // .serve('http://example.test:3000');
};

When I run yarn dev:

 server url:    http://localhost:50987/
 proxy url:     http://example.test/

And just to confirm, when you say that your localhost:XXXX session fails to load, are you still able to load http://trellis.sageten2.build without any issues? Because all the dev server is trying to do is proxy http://trellis.sageten2.build

Well that was easy, thanks!
Did something change since a week ago? Last week I did another setup and assigned my own proxy and server URLs and port and it was fine, so of course this threw me for a loop today.

Yes, there have been multiple releases of Bud lately that have also made their way into Sage

1 Like

That explains. All set here, thanks!
Just a bit more detail on how the confusion and changes from last week put me in my position…

Part of the confusion came from the first Sage 10 test project I started last week, with this bud config:

    .proxy('http://trellis.sagetest.build')

    /**
     * Development URL
     */
    .serve('http://localhost:4444');

Which resolved to port 4444 just fine.

Today, something I didn’t mention in my OG post, was this error I was getting with the following config on the my new sageten2 test project:

    .proxy('http://trellis.sageten2.build')

    /**
     * Development URL
     */
    .serve('http://trellis.sageten2.build:2222');
};

Which throws:
error Command failed with exit code 1.

Then modifying the server url to localhost ('http://localhost:2222'); does not throw the error and appears to complete successfully:

duration    221ms   


 mode    development    hash       58f6f32db466f78a6f2a   
 bud     5.6.2          webpack    5.68.0                 


 server url:    http://localhost:52086/      
 proxy url:     http://trellis.sageten2.build/   


[100%] Compiled

Then confusion of my chosen port and the random chosen port :hot_face:
So removing the .serve and running yarn dev while using the generated port works!

1 Like

I’m using Lando (Docker wrapper) and I have exposed the port 3000 for node. But if I remove the .serve() line, i cant use the generated localhost:xxxx as this port hasn’t been exposed in docker and site using localhost:xxxx is unreachable.

If i instead use

.serve('http://localhost:3000');

and run lando yarn dev, the site is still unreachable at http://localhost:3000’;

I can however always reach the site at the domain ie http://example.test/

So my understanding is since I am using Docker, I have to remove the serve() line, but I also need to find a way to expose any random generated port on localhost through docker?

Hey @Atari, since this topic is already solved and there’s existing topics about Lando and Sage dev, I’m gonna close this out. Please either use the existing open topics that haven’t been solved, or if they aren’t relevant anymore, feel free to create a new one!