How to change URLs inside a client-side JS at build?

Question

I have a JS file that gets served by a Node.Js server to a web browser.

When running in Dev I want the client-side JS to send data to the localhost so can I log the payload to my local node.js server.

But when we deploy to production I of course want the client-side JS file to send data from the browser to my Production URL.

Right now I've been manually modifying the URL in the JS file that gets served, toggling between localhost and the public URL before I do my Gulp build but I know that is not the right way, and prone to the "whoops I forgot" issue.

What is the correct approach? Or best practice? Is there some gulp package I should be using?

What in particular are you modifying before you run gulp? Are you running a Node server? Static website? — Himmel, Jul 28 '16 at 20:36
I did a bit of research and it seems there is not a great and easy solution for this. In the end I decided to change where the URLs are located. Luckily, in my case this JS is getting called from a tag. So I set the URL as part of a global var in the tag, and just have the JS file reference the global var. Now the URL payloads are set two are controlled by the calling HTML/JS. — Cyph, Jul 28 '16 at 22:40
You mean you want to get the [base url](http://stackoverflow.com/questions/10251805/get-my-web-app-base-url-in-javascript) ?? — al_kasih_empatix, Jul 28 '16 at 22:41
@al_kasih_empatix No. In a JS file I serve. Some data gets generated and sent to the server. I want to set that Var that holds that URL where the browser sends data two different URL when in dev vs production. I dont want to keep changing it manually before I build the project. — Cyph, Jul 28 '16 at 22:43

score 4 · Accepted Answer · answered Aug 04 '16 at 18:41

In case you haven't solved this by now you can use gulp-replace. For example, say you have a build task that reads from /src, minifies your JavaScript and outputs it to /dist. You can pipe your JavaScript source to replace() (first argument is the development URL, second argument is your production URL):

var gulp = require('gulp');
var path = require('path');
var jsmin = require('gulp-jsmin');
var replace = require('gulp-replace');

var SOURCE = 'src';
var BUILD = 'dist';
var URL = 'http://www.whatever.com/api';

gulp.task('build', function () {
    return gulp.src(path.join(SOURCE, '**/*.js'))
        .pipe(jsmin())
        .pipe(replace('http://localhost:3000/api', URL))
        .pipe(gulp.dest(BUILD))
});

If you have a file ./src/script.js that does a simple jQuery AJAX request, see the before and after effect below.

Before

$.get('http://localhost:3000/api', function (data) {
    console.log(data);
});

After (ignoring minification)

$.get('http://www.whatever.com/api', function (data) {
    console.log(data);
});

So if we have logic that depends on hostname, origin, etc. replace it multiple times? Is there a better way to do this? — Phani Rithvij, Sep 24 '21 at 18:39

How to change URLs inside a client-side JS at build?

1 Answers1