Browsersync external asset's asset issues and proxyUrl

sage
,
1

I’m wondering if I have this wrong.

Using the remote browserSync I was unable to get any assets that were linked inside the main.css to work. The main files would load and sync fine (main.css + main.js), but linked files would not be loaded on the web url of http://192.168.86.100:3000 but instead switch back to http://localhost:3000 for images/fonts(css) or import(js) called inside the asset files.

This was confusing at first, then I found changing the config.json’s proxyUrl to the External: http://192.168.86.100:3000 address which worked across both computers.

Now that I’m at the office and I have to delete that line so it’s back to localhost different WIFI makes this an abysmal solution.

Is this how it’s supposed to work? And if so, is there a logical place to say tell it to use whatever my computer’s local IP address is? Or do I install jq and add that to a script before calling yarn start.

1 Like
2

I have run into the exact same problem, and while I haven’t discovered a solution (nor am I likely knowledgable enough in order to do so), I have discovered a decent workaround.

In the .gitattributes file of your repo, add the following line:

/resources/assets/config.json filter=gitignore

Then define gitignore in your global .gitconfig. Unlike the above line, which will be committed to the repo so all your devices can take advantage of it, the next part needs to be specific to each computer you are working from based on their IP. Which is why we are making it a global change and not project-specific. It looks nasty with all the escaping which actually may differ for you depending on your version of sed (I’m on MacOS Sierra for what that’s worth):

$ git config --global filter.gitignore.clean "sed 's/.*proxyUrl.*/\"proxyUrl\"\\: \"http\\:\\/\\/localhost\\:3000\",/'"

$ git config --global filter.gitignore.smudge "sed 's/.*proxyUrl.*/\"proxyUrl\"\\: \"http\\:\\/\\/XXX\\.XXX\\.X\\.XXX\\:3000\",/'"

replacing Xs above with whatever your browsersync external IP is.

What these commands do is find any occurrence of the string proxyUrl in your config.json and completely replace that line with either "proxyUrl": "http://localhost:3000", prior to committing, or "proxyUrl": "http://yourIP:3000", after pulling.

That means you will have to run these git commands on any computers you want to work from, but it’s a once per computer per project thing. Not ideal, but better than having to change IPs literally every time you work from different locations.

Actually only after typing out this post did it just occur to me that you may be working from a laptop and this won’t be helpful at all. Oh well. I’ll post it anyway in case it helps somebody working from different computers at different locations!

Also, prior to today, I had never heard of git filters or sed before so it’s possible I’ve done something wrong. But it seems to work for me from my testing.