title: Display variable from JS file in html using pug file
body: <p>I have two files. One is a pug file:</p>
  
  <pre><code>doctype html
  html
  head
      meta(charset='utf-8')
      meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
      link(href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', rel='stylesheet')
      title Your first page
  body
      script(src='https://code.jquery.com/jquery-3.3.1.min.js')
      script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js')
      script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js')
  </code></pre>
  
  <p>and the second one is a JS file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var express = require('express'),
      logger = require('morgan');
  var app = express();
  var x = 1;
  var y = 2;
   
  app.set('views', __dirname + '/views'); 
  app.set('view engine', 'pug');         
  app.use(logger('dev'));                        
  app.use(express.static(__dirname + '/public')); 
   
  app.get('/', function (req, res) {      
      res.render('index', {pretty:true}); 
  });
   
  app.listen(3000, function () {                  
      console.log('The application is available on port 3000');
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I'd like to use x and y variables and display them using the pug file. How can I do this? </p>