Web Bae•7mo ago

Local vs Prod Dev (with a twist)

I'm trying to setup separate dev scripts but a little differently, because i don't want the dev script to be limited to the webflow.io domain, rather just whenever the localhost is available. So if the localhost is running, then it loads the relevant script from localhost. If the localhost is not running, then it loads the public script instead Now, i've got this kind of working using fetch with some try catch to ensure that it doesn't just give up when the localhost is unavailable. My issue with fetch though is that it prints out a nice big CONNECTION_REFUSED error even if i try to catch and print the error in a log instead of an error For example:

const localScriptURL = 'http://localhost:3000/some-page.js';

try {
  const response = await fetch(localScriptURL);
} catch (error) {
  console.log('There was an error ', error);
}

// or

fetch(localScriptURL).catch((error) => {
  console.log('Error:', error);
});

const localScriptURL = 'http://localhost:3000/some-page.js';

try {
  const response = await fetch(localScriptURL);
} catch (error) {
  console.log('There was an error ', error);
}

// or

fetch(localScriptURL).catch((error) => {
  console.log('Error:', error);
});

Still displaying the error but in a console log just for demo purposes as opposed to console.error

14 Replies

AtomicZBRAOP•7mo ago

This is what i ended up on, it didn't solve the main issue, but it at least works instead of erroring out

const localScriptURL = "http://localhost:3000/some-script.js";
const publicScriptURL = "https://some-cdn.com/some-script.js";

function loadScript(url, callback) {
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.onload = function () {
    callback();
  };
  script.src = url;
  document.body.appendChild(script);
}

fetch(localScriptURL)
  .then(() => {
    loadScript(localScriptURL, function () {
      console.log("Dev Script loaded");
    });
  })
  .catch(() => {
    loadScript(publicScriptURL, function () {
      console.log("Public Script loaded");
    });
  });

const localScriptURL = "http://localhost:3000/some-script.js";
const publicScriptURL = "https://some-cdn.com/some-script.js";

function loadScript(url, callback) {
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.onload = function () {
    callback();
  };
  script.src = url;
  document.body.appendChild(script);
}

fetch(localScriptURL)
  .then(() => {
    loadScript(localScriptURL, function () {
      console.log("Dev Script loaded");
    });
  })
  .catch(() => {
    loadScript(publicScriptURL, function () {
      console.log("Public Script loaded");
    });
  });

Web Bae•7mo ago

does this work?

await fetch("http://localhost:3000/some-script.js")
    .then(response => response)
    .catch(() => null);

await fetch("http://localhost:3000/some-script.js")
    .then(response => response)
    .catch(() => null);

revent any logs in console but is showing null which you probably don't want or this?

try {
    await fetch("http://localhost:3000/some-script.js");
} catch (e) {
    // Silence the error
}

try {
    await fetch("http://localhost:3000/some-script.js");
} catch (e) {
    // Silence the error
}

AtomicZBRAOP•7mo ago

Both still print that connection refused error, for some reason it always seems to ignore the catch

AtomicZBRAOP•7mo ago

I was reading a recommendation someone made on stack overflow where they said you could overwrite the window.console function globally to ignore certain messages LOL

Web Bae•7mo ago

lol

Web Bae•7mo ago

how about this? 1:26 https://youtu.be/aCeD7GymetY?si=E66e6BuEPUwOet7g&t=86

Web Bae

YouTube

Separate Staging and Production Code in Webflow

Here's a little javascript snippet to serve different code depending on whether it's the staging domain or the production domain - super handy if you need to iterate on your code without worrying about publishing your in-development code to production and to maintain continuity on the live domain. // FREE STUFF 💪 My ULTIMATE Webflow Resource L...

Web Bae•7mo ago

i guess that doesn't really work either not exactly what you are looking for I've also seen this done by using a boolean flag IS_DEV in localStorage

AtomicZBRAOP•7mo ago

This is actually what sparked me to start 😂

Web Bae•7mo ago

but then you have to manage that local storage variable

AtomicZBRAOP•7mo ago

ooooh i never considered using local storage wonder if i could throw up local storage if the ip is mine

Web Bae•7mo ago

could use a url param too both solns are still more manual tho

AtomicZBRAOP•7mo ago

oh the url param is good too! I really don't mind a more manual thing, i just hate constantly adjusting the webflow scripts 😂

Web Bae•7mo ago

agreed 🤝

AtomicZBRAOP•7mo ago

Just a little update, but i ended up using localStorage combined with an applescript automation for triggering the localstorage variable on and off

const loadScript = (url, type) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.onload = resolve;
    script.onerror = reject;
    script.src = `${url}/${pageScript}`;
    document.body.appendChild(script);
  });
};

const loadScriptAsync = async () => {
  const localScriptURL = "http://localhost:3000";
  const publicScriptURL = "https://production.server.goes.here";
  const pageScript = "src/some-file.js";

  try {
    const url = localStorage.getItem("devMode") ? localScriptURL : publicScriptURL;
    await loadScript(url, "dev");
    console.log(`${url === localScriptURL ? "Dev" : "Public"} Script loaded`);
  } catch (error) {
    console.error("Error loading script:", error);
  }
};

loadScriptAsync();

const loadScript = (url, type) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.onload = resolve;
    script.onerror = reject;
    script.src = `${url}/${pageScript}`;
    document.body.appendChild(script);
  });
};

const loadScriptAsync = async () => {
  const localScriptURL = "http://localhost:3000";
  const publicScriptURL = "https://production.server.goes.here";
  const pageScript = "src/some-file.js";

  try {
    const url = localStorage.getItem("devMode") ? localScriptURL : publicScriptURL;
    await loadScript(url, "dev");
    console.log(`${url === localScriptURL ? "Dev" : "Public"} Script loaded`);
  } catch (error) {
    console.error("Error loading script:", error);
  }
};

loadScriptAsync();

Applescript automation (i'm triggering this with a raycast script and/or a streamdeck action)

tell application "System Events"
  -- Open the JavaScript console
  keystroke "j" using {command down, option down}
  delay 0.5

  -- Run the JavaScript code
  set jsCode to "if(localStorage.getItem('devMode')) { localStorage.removeItem('devMode'); } else { localStorage.setItem('devMode', 'true'); };"
  keystroke jsCode
  keystroke return
  delay 1

  -- Close the JavaScript console
  keystroke "j" using {command down, option down}
end tell

tell application "System Events"
  -- Open the JavaScript console
  keystroke "j" using {command down, option down}
  delay 0.5

  -- Run the JavaScript code
  set jsCode to "if(localStorage.getItem('devMode')) { localStorage.removeItem('devMode'); } else { localStorage.setItem('devMode', 'true'); };"
  keystroke jsCode
  keystroke return
  delay 1

  -- Close the JavaScript console
  keystroke "j" using {command down, option down}
end tell

Next steps would be seeing if i could automate the page script variable by making sure the filenames are the same as the slug of the current page, and then i wouldn't need to edit the script on the page, it would just be dynamic

Gaming

Programming

Local vs Prod Dev (with a twist)