<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>

CC BY-SA 4.0
2022-08-31T09:47:58.090Z
2022-08-31T09:47:58.090Z
Max Strebel
<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>

CC BY-SA 4.0
2022-05-20T10:03:25.407Z
This is my main pain point with Craft Nitro. Getting BrowserSync or hot module reloading working is an utter nightmare. :(
Sandwich
<nitro><docker>
How to use Browsersync within Craft Nitro
# 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:
// 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, 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.


---

