Pass Variables From Flask/Python Server To Javascript Files

Pass Variables From Flask/Python Server To Javascript Files

Almost any application requires data from server in its javascript files. Because managing application states with javascript got easier and practical by javascript community grows.

Flask is a great framework if you want to make web applications in Python. I will show you an example by using a Flask framework but this is an approach and you can apply this approach to any server side language.

First i created an html login page. This html document uses Jinja2 templating engine which is provided by Flask automatically.

start.html

...
<div class=”loginViaSmsSection”>
 <h5 class=”loginViaSmsTitle”>
 <svg>
 <title>SMS</title>
 <use xlink:href=”{{ url_for(‘static’, filename=’graphics/sprite.svg#sms’) | replace(‘%23’, ‘#’) }}” />
 </svg>
 Login via SMS
 </h5>
 <div class=”label”>Phone Number</div>
 <input type=”text” name=”phone_num” class=”loginInput” id=”phone_num” />
 <a href=”#” id=”loginViaSms” class=”loginViaSms”>
 Send Verification Code
 </a>
 <a href=”#” id=”switchToEmailLogin” class=”switchToEmailLogin”>or click here if you want to log in via email.</a>
 </div>
...
<script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>
...

start.html will be a simple html document when its rendered. I didn’t include any javascript to this document. All javascript code will be in app.js file.

There are some sensitive variables that we must keep in server like csrf token, application secrets and even data got from database. Our javascript file should access these variables whenever it wants.

You can think to inject all javascript code inside html document let Flask deal with it. This is very bad for search engines and makes it impossible to work with modular javascript.

We place only one javascript object inside our html document to pass variables that came from server, to javascript files.

start.html that saves variables in a javascript object:

...
<div class=”loginViaSmsSection”>
 <h5 class=”loginViaSmsTitle”>
 <svg>
 <title>SMS</title>
 <use xlink:href=”{{ url_for(‘static’, filename=’graphics/sprite.svg#sms’) | replace(‘%23’, ‘#’) }}” />
 </svg>
 Login via SMS
 </h5>
 <div class=”label”>Phone Number</div>
 <input type=”text” name=”phone_num” class=”loginInput” id=”phone_num” />
 <a href=”#” id=”loginViaSms” class=”loginViaSms”>
 Send Verification Code
 </a>
 <a href=”#” id=”switchToEmailLogin” class=”switchToEmailLogin”>or click here if you want to log in via email.</a>
 </div>
...
<script type="text/javascript">
window.appConfig = {
  debug: {% if env == 'development' %}true{% else %}false{% endif %},
  facebook_app_id: {{ facebook_app_id }},
  accountkit_api_version: '{{ accountkit_api_version }}',
  csrf_token: '{{ csrf_token }}'
}
</script>
<script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>
...

Now we can access all variables defined in window.appConfig object, from our javascript file.

app.js

...
window.fbAsyncInit = function() {
  FB.init({
    appId      : appConfig.facebook_app_id,
    xfbml      : true,
    version    : 'v2.8'
  });
  FB.AppEvents.logPageView();
};
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
var AccountKit_OnInteractive = function(){
  AccountKit.init({
    appId: appConfig.facebook_app_id,
    debug: appConfig.debug,
    state: appConfig.csrf_token,
    version: appConfig.accountkit_api_version
  })
}
...

Now our javascript is more comfortable to work with. This approach can be applied to any server side application.