Develop Reference

What's the difference between storing "private" variables in .js instead of .env? [duplicate]

I have a Javascript frontend that does Ajax calls to my backend. To do that, it needs a "backend_URL" that I hard-coded in the Ajax get() call, say "http://myservice/backend".
Now if I want to deploy my app on different machines, some of which will use this url with HTTPS: "https://myservice/backend", and some not (because they lack a proper certificate and do not expose valuable data).
Where should I put the "USE_HTTPS=1" config variable so that someone deploying the app can choose to use or not SSL ? Of course the question extends itself to other config variables.
I thought about adding a ".config" file at the project root, but then I don't know how to import it in my code. Or should I export environment variables ? Or a node.js feature ?

I ended up writing a conf.js file with content
window.CONFIG = {
SOME_CONSTANT: 22,
}
and included it in a new <script> in my index.html before the other scripts.
The window is not mandatory but shows where it comes from when I call that as window.CONFIG anywhere in the rest of the javascript.

CONFIG = (function(){
var conf_info = {};
conf_info["url"] = 'http://codepen.io/pen/';
return{
getValue : function(param){
return conf_info[param];
}
}
})();
//some where in different file
document.getElementById("result").innerHTML = CONFIG.getValue('url');

Access items inside Webpack bundle in browser console

I am using Typescript with Webpack (debug build using source maps). I can access Static class files in the sources tab normally. However, the class name itself is undefined at the global scope.
class SomeStaticClass {
public static doSomething() {
console.log("I just did something!");
}
}
I would like to access / call
SomeStaticClass.doSomething()
from console in the browser (say Google Chrome Inspector Tools).

Assuming that you want to get all files, you can do something like this:
window.SomeStaticClass = require('./path-to-file-with-class').default;
Inspired by workwise's answer

you can call the static method by
console.log(SomeStaticClass.doSomething())
I managed to make it work refer this url

I managed a workaround like the following. In the main exports.tsx (assuming this is the top level export):
import { StaticClassToBeExposed } from '...SomeFile';
if(type of window !== undefined) {
window.StaticClassToBeExposed = StaticClassToBeExposed;
}

How do you manage namespace in Meteor?

So here is my problem :
Currently, I have a dozen of functions related to WEBRTC within a template js file. My objective is to have those functions in a separate file, called webRTCWrapper.js for example, and to call those functions in my template without using global variable.
I think I must use namespaces, am I correct ?
If so, how do you use them ?
EDIT : For anyone interested, this is exactly what I was looking for :
http://themeteorchef.com/snippets/using-the-module-pattern-with-meteor/

Make a directory called packages/ parallel to your .meteor/ directory. You can create a package that exports a single object/function. On the command line, use meteor create --package <yourpackagename> and meteor add <yourpackagename> You can edit the js file to add a namespace.
MyNamespace = {};
MyNamespace.myFunction = function () { };
Then, in the package.js, simply export that namespace.
api.export('MyNamespace');

You can use a common pattern of having a global object and your functions inside that object.
Greetings = {
hello: function(name) { return "Hello "+name+" how are you?"; }
}
And then you can call it inside the template helpers :
Template.GreetingsTemplate.helpers({
sayHello: function() { return Greetings.hello('Maxence'); }
})
Take note of the loading order of files in Meteor, anything inside the lib folders is loaded first. If you run into problems where "Greetings" object is not defined, then its because that file was not loaded already.
Edit:
You can reuse the same pattern for adding more functions in different files (you could use App = App || {} but it will throw error in Chrome for example).
App = (typeof App === 'undefined')? {} : App;
App.someFunction = function(){};
or even, if you use underscore.js:
App = (typeof App === 'undefined')? {} : App;
_.extend(App, {
someFunction: function(){}
});

Since now the regular way to use the code from another file was going through a global (server and client). As Joao suggested you can make your own global App variable where you will store or more generically a global MODULE one (basically the same solution as Joao but with explanation).
But with with the arrival of ES2015 support, we will very soon be able to have an official pattern to achieve this. However as the 1.2 does not supports yet the import/export syntax:
Note, The ES2015 module syntax (import/export) is not supported yet in Meteor 1.2.
If you want to start using those features earlier, I would recommend using this package which is an temporary solution to fill the current import/export gap, the meteor team development are currently looking for an elegant solution to support this.

Where to place javascript functions in Meteor applications

In Meteor we normally attach javascript functions to Templates. Where do we place standard javascript functions?
For instance, in one of my apps I have a UserInfo.js file which has a bunch of javascript functions for handling users logging in and getting user information.
Below are two of my functions in UserInfo.js
File is located in the client/scripts folder:
isAdminById = function(userId) {
var user;
user = Meteor.users.findOne(userId);
return user && isAdmin(user);
};
isAdmin = function(user) {
if (!user || typeof user === 'undefined') {
return false;
} else {
return !!user.isAdmin;
}
};
When I run the app and call isAdmin() from the browser console it says:
ReferenceError: isAdmin is not defined
---- Edit ----
It seems the problem was fixed temporarily when I placed the javascript file under the client/compatibility folder but now the issue has resurfaced. The only thing I remember changing was calling >> Meteor Reset
More Info:
I think the issue arises when I use coffeescript. When I convert my coffeescript files to js files everything seems to work.

You need to declare coffeescript variables as global with #:
#isAdmin = user -> ...
This is due to how Meteor variable shadowing works in connection with coffeescript automatic variable declaration.
Coffeescript by default does the "smart" variable declaration by itself - basically by placing var variableName in the first place in javascript where the variable is visible. In your case, this causes isAdmin to be declared by var in js, and therefore it's scoped to the file.
Using # char supersedes this default behavior by binding the variable to this, global or window object instead.

Your code is correct, it's probably a load order problem.

Global JavaScript namespace and Mocha

I have been tasked with implementing Mocha tests for some JavaScript that already exists on a large website. This website has a global namespace object to hold all of it's functions and common vars, as well as a per page set within the same object, and I have attempted to use Mocha to recognise this but I cant seem to.
For example:
//global namespace declaration in the common.js file
var ns = {};
ns.commonValue = 1;
ns.commonFunc = function () {};
//extension of the namespace on an individual page
ns.thisPage = {};
ns.thisPage.pageVal = 1;
When testing the individual page JavaScript, ns is undefined.
Any help would be good.
Thanks in advance

Given your files are named
common.js
page.js
Then you should have
<script src="common.js"></script>
<script src="page.js"></script>
<script src="test.page.js"></script>
load page without mocha, and look at what inspector says, then correct, then add mocha