Snippet - JavaScript Bookmarklet to Convert Localhost URL to Production URL

As a web developer who blogs frequently, I often find myself toggling between my localhost environment and my production blog.

This process can become quite frustrating when you have to frequently rewrite URLs or visit the production site just to retrieve a blog post URL.

I encountered this issue so often that I decided to take matters into my own hands.

The solution? A nifty JavaScript bookmarklet that effortlessly transforms your localhost URL to your production URL.

No manually re-hand crafting a hostname, no extra navigation.

The Goal

The main objective of this bookmarklet is to make your life as a developer simpler by swiftly providing a production URL, without the need for you to manually visit your live blog.

This is a clear example of how a bit of ingenuity and some lines of JavaScript can automate a repetitive task, freeing up your time and mental space to focus on more complex problems. Try incorporating this bookmarklet into your workflow, and see the difference it can make!

The Code

Here is the minified version of the JavaScript bookmarklet I created:

javascript:(function() { var currentURL = window.location.href; var url = new URL(currentURL); if (url.hostname === 'localhost' && url.port === '4242') { url.protocol = 'https:'; url.hostname = 'curiouslychase.com'; url.port = ''; var modifiedURL = url.toString(); alert('Modified URL: ' + modifiedURL); } else { alert('Hostname is not localhost:4242. No modification needed.'); } })();

Here is the unminified version of the JavaScript bookmarklet:

javascript:(function() {
  var currentURL = window.location.href;
  var url = new URL(currentURL);
  
  if (url.hostname === 'localhost' && url.port === '4242') {
    url.protocol = 'https:';
    url.hostname = 'curiouslychase.com';
    url.port = ''; // Removes the port
    var modifiedURL = url.toString();
    alert('Modified URL: ' + modifiedURL);
  } else {
    alert('Hostname is not localhost:4242. No modification needed.');
  }
})();

How It Works

When activated, the bookmarklet first captures the current URL of your page, creating a URL object to gain access to its components (protocol, hostname, port, etc.).

It then checks if the hostname of the URL matches 'localhost' and the port is '4242'. If this condition is met, it understands you're in your local development environment. It then modifies the URL protocol to 'https' and the hostname to 'curiouslychase.com', effectively transforming your localhost URL into your production URL.

The transformed URL is then displayed in a browser alert, making it convenient for you to copy and paste elsewhere. If the conditions are not met (i.e., the hostname is not 'localhost' or the port is not '4242'), it lets you know with a simple alert that no modification was necessary.