Answers.Body: <p>This won't answer your question. But as Nitro is now not supported anymore and ddev is the proposed alternative, you could revisit this. It is way easier with ddev as it includes node.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-08-31T09:47:58.090Z
Answers.LastActivityDate: 2022-08-31T09:47:58.090Z
Answers.UserDisplayName: Max Strebel
Body: <p>I have a Craft CMS site running locally, using Craft Nitro. I want to use the nitro node container, rather than my own, which works beautifully <em>except</em> with regard to browsersync, and I'm not sure what I'm doing wrong.</p>
  <p>When I run <code>nitro npm run watch</code> (my main dev script), the logs show me that browsersync is running and they tell me some URLs. Of course, those URLs are localhost:3000 within the docker container, so naturally I can't access them that way.</p>
  <pre><code>[Browsersync] Proxying: https://craft-dev-website.nitro
  [Browsersync] Access URLs:
   -----------------------------------
         Local: https://localhost:3000
      External: https://0.0.0.0:3000
   -----------------------------------
            UI: http://localhost:3001
   UI External: http://localhost:3001
   -----------------------------------
  </code></pre>
  <p>This is all expected, but I <em>should</em> be able to access browsersync using Nitro's configured node ports (which are already 3000 and 3001!), and I have not been able to get that to happen.</p>
  <p>I've played with a <em>lot</em> of different combinations of the following browsersync options:</p>
  <pre class="lang-javascript prettyprint-override"><code>// webpack.mix.js
  
  mix
  //.... postCss, et cetera....
    .browserSync({
      https: true,
      host: &quot;0.0.0.0&quot;,
      proxy: &quot;https://craft-dev-website.nitro/&quot;,
      files: [
        &quot;./web/**/*.html&quot;,
        &quot;./templates/**/*.twig&quot;,
        &quot;./web/dist/**/*.css&quot;,
        &quot;./web/dist/**/*.js&quot;,
      ],
    });
  </code></pre>
  <p>I tried supplying the <code>host</code> option after reading <a href="https://craftcms.com/docs/nitro/2.x/node.html#configuring-node-server-ports" rel="noreferrer">this bit of the documentation</a>, which does sound like it's describing what I want.
  (I've also tried this config without the <code>proxy</code> set).</p>
  <p>I've also tried supplying the <code>proxy</code> option, to no avail. The URL I'm giving it is the local dev URL of my site. I've also tried <code>craft-dev-website.test</code> because using <code>.test</code> seems to be the convention, but I don't know whether that's actually enforced anywhere or whether I'm just fumbling for a coincidence. Anyway, it didn't work.
  (I've also tried this config without the <code>host</code> set).</p>
  <p>I'm also not entirely sure where I'm supposed to <em>go</em> in my browser to make this work. I think it should be <code>https://craft-dev-website.nitro:3001</code> for the UI, but it's possible that I'm just looking in the wrong place.</p>
  <p>Anyway, before I give up and just install all the build dependencies on my machine instead, does anyone see where I'm going wrong?</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2022-05-20T10:03:25.407Z
Comments.Text: This is my main pain point with Craft Nitro. Getting BrowserSync or hot module reloading working is an utter nightmare. :(
Comments.UserDisplayName: Sandwich
Tags: <nitro><docker>
Title: How to use Browsersync within Craft Nitro
ThreadText: # How to use Browsersync within Craft Nitro
  
  (Asked by: username_0 on 2021-12-21)
  
  I have a Craft CMS site running locally, using Craft Nitro. I want to use the nitro node container, rather than my own, which works beautifully *except* with regard to browsersync, and I'm not sure what I'm doing wrong.
  
  When I run `nitro npm run watch` (my main dev script), the logs show me that browsersync is running and they tell me some URLs. Of course, those URLs are localhost:3000 within the docker container, so naturally I can't access them that way.
  
  ```
  [Browsersync] Proxying: https://craft-dev-website.nitro
  [Browsersync] Access URLs:
   -----------------------------------
         Local: https://localhost:3000
      External: https://0.0.0.0:3000
   -----------------------------------
            UI: http://localhost:3001
   UI External: http://localhost:3001
   -----------------------------------
  
  ```
  
  This is all expected, but I *should* be able to access browsersync using Nitro's configured node ports (which are already 3000 and 3001!), and I have not been able to get that to happen.
  
  I've played with a *lot* of different combinations of the following browsersync options:
  
  ```javascript
  // webpack.mix.js
  
  mix
  //.... postCss, et cetera....
    .browserSync({
      https: true,
      host: "0.0.0.0",
      proxy: "https://craft-dev-website.nitro/",
      files: [
        "./web/**/*.html",
        "./templates/**/*.twig",
        "./web/dist/**/*.css",
        "./web/dist/**/*.js",
      ],
    });
  
  ```
  
  I tried supplying the `host` option after reading [this bit of the documentation](https://craftcms.com/docs/nitro/2.x/node.html#configuring-node-server-ports), which does sound like it's describing what I want.
  (I've also tried this config without the `proxy` set).
  
  I've also tried supplying the `proxy` option, to no avail. The URL I'm giving it is the local dev URL of my site. I've also tried `craft-dev-website.test` because using `.test` seems to be the convention, but I don't know whether that's actually enforced anywhere or whether I'm just fumbling for a coincidence. Anyway, it didn't work.
  (I've also tried this config without the `host` set).
  
  I'm also not entirely sure where I'm supposed to *go* in my browser to make this work. I think it should be `https://craft-dev-website.nitro:3001` for the UI, but it's possible that I'm just looking in the wrong place.
  
  Anyway, before I give up and just install all the build dependencies on my machine instead, does anyone see where I'm going wrong?
  
  **Tags:** nitro, docker
  
  > **Comments:**
  > **username_1**: This is my main pain point with Craft Nitro. Getting BrowserSync or hot module reloading working is an utter nightmare. :(  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2022-08-31. Score: 1
  
  This won't answer your question. But as Nitro is now not supported anymore and ddev is the proposed alternative, you could revisit this. It is way easier with ddev as it includes node.
  
  
  ---
  
  