[bug] When using external IP from another device, styles are unaccessable

germaniuz commented 1 year ago

Agreement

[X] This is not a duplicate of an existing issue
[X] I have read the guidelines for Contributing to Roots Projects
[X] This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

When I use external IP in dev mode from another device (phone for example) I get only page without any styles or scripts, because urls has my proxy domain (http://sq.test/wp/pathtothemestyles) not an external IP address. But that proxy domain is unaccessable from remote device via wifi.

My config:

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/app/themes/sage/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl(3000)
    .setProxyUrl('http://sq.test')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .set('settings.color.custom', false)
    .set('settings.color.customDuotone', false)
    .set('settings.color.customGradient', false)
    .set('settings.color.defaultDuotone', false)
    .set('settings.color.defaultGradients', false)
    .set('settings.color.defaultPalette', false)
    .set('settings.color.duotone', [])
    .set('settings.custom.spacing', {})
    .set('settings.custom.typography.font-size', {})
    .set('settings.custom.typography.line-height', {})
    .set('settings.spacing.padding', true)
    .set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
    .set('settings.typography.customFontSize', false)
    .enable();
};

bud version 6.16.1

Expected Behavior

I expect my project loaded with styles and scripts on external device with external IP

Actual Behavior

I get page loaded without styles or scripts, because of the fact that url for styles is an proxy url, not external url

Steps To Reproduce

1.Install sage

Configure bud
run dev mode

version

6.16.1

Logs

No response

Configuration

No response

Relevant .budfiles

No response

kellymears commented 1 year ago

You should proxy a network resolvable address for this use case; not something resolvable only from the host. You can use setPublicProxyUrl to ensure that internal links still resolve to the development server.

Something like:

bud
  .setProxyUrl('http://[host ipv4]')
  .setPublicProxyUrl('http://sq.test')

If we proxy all WordPress assets there are significant issues with the admin interface because of WordPress' handling of cookies and cross-origin resource loading.

Personally, I recommend using solutions like Android Studio and Simulator.

germaniuz commented 1 year ago

Hi! With this settings I got error "Error occurred while trying to proxy: 192.168.3.29:3000/"

19 сент. 2023 г., в 10:31, Kelly Mears @.***> написал(а):

You should proxy a network resolvable address for this use case; not something resolvable only from the host. You can use setPublicProxyUrl https://bud.js.org/reference/bud.setPublicProxyUrl to ensure that internal links still resolve to the development server.

Something like:

bud .setProxyUrl('http://[host ipv4]') .setPublicProxyUrl('http://sq.test') If we proxy all WordPress assets there are significant issues with the admin interface because of WordPress' handling of cookies and cross-origin resource loading.

Personally, I recommend using solutions like Android Studio https://developer.android.com/studio/run/emulator and Simulator.

— Reply to this email directly, view it on GitHub https://github.com/roots/bud/issues/2449#issuecomment-1724974938, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACASLMXPNL7BEAMESXHP4KTX3FC5XANCNFSM6AAAAAA4Z6YMZI. You are receiving this because you authored the thread.

retlehs commented 1 year ago

Probably worth giving https://github.com/talss89/bud-localtunnel a shot for something like this

roots / bud