CODEWITHSUNDEEP
javascriptvariablesproduction-environment
bodacydo
bodacydo

Reputation: 79509

How to assign a value to a a JS variable in a web site depending if it's running locally or in production?

I work on web project on my laptop. When I'm done I upload my files to production. Every time I upload to production, I've to make sure I change various URLs in my javascript code to production URLs. For example:

var ping_url = 'http://10.10.128.233'      // locally
//var ping_url = 'http://ping.service.com' // in production

I've 3 urls like this in different parts of code. I often forget to change them before uploading to production, and as a result I break production website.

Is there a way to check if I'm running the website in laptop or in production?

I'd like to write:

if (local) {
  var ping_url = 'http://10.10.128.233'      // locally
}
else {
  var ping_url = 'http://ping.service.com' // in production
}

Any ideas?

Upvotes: 0

Views: 74

Answers (2)

deceze
deceze

Reputation: 522522

Ideally you have a deployment system which prepares and deploys your app and in the process takes care of environmental differences. For example, I'm partial to Capistrano. To deploy my projects, I type cap deploy on the command line, which runs build/packaging/configuration scripts, uploads the site to the server and then runs post-migration scripts there. You can deploy different config files in this process, or post-process your Javascript files in the process. There are a lot of different ways to make this change stick, all suited for different purposes.

If you have any sort of server-side language, you may want to use any of the below:

<?php if (...) : ?>
    var ping_url = '...';
<? else : ?>
    var ping_url = '...';
<?php endif; ?>

or

var ping_url = <?php echo json_encode($config['pingUrl']); ?>;

Environment variables can be very useful here; i.e. in your Apache configuration or .htaccess file somewhere you have something like:

SetEnv MYAPP_ENVIRONMENT production

In your app you do something along these lines:

$environment = getenv('MYAPP_ENVIRONMENT') ?: 'development';

And then you decide further what your environment is.

You have to figure out which combination of server-side processing, environment variables and deploy-time processing suits you best.

Upvotes: 2

Phil
Phil

Reputation: 164952

You could always inspect location.hostname and compare it to 'localhost' or whatever hostname you use on your laptop. For example

var ping_url = ~location.hostname.indexOf('localhost')
    ? 'http://10.10.128.233' : 'http://ping.service.com'

Upvotes: 2

Related Questions