Famo.us connect to MySQL

Question

I'm trying to connect a MySQL database through Famo.us. But I can't get it done. The folder structure of the app looks like this:

• app (the actually famo.us app)
  • content (images etc.)
  • lib
  • src
    • main.js (actually app)
    • requireConfig.js
  • styles
  • grunt
  • node_modules

main.js

/*globals define*/
define(function(require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var StateModifier = require('famous/modifiers/StateModifier');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var logo = new ImageSurface({
        size: [200, 200],
        content: '/content/images/famous_logo.png'
    });

    var logoModifier = new StateModifier({
        origin: [0.5, 0.5]
    });

    mainContext.add(logoModifier).add(logo);
});

Cause it's running on node I tried to install the mysql node_module in the node_modules folder, successfully. But I can't connect to it, because if I try to require mysql with require('mysql') in main.js it thinks I want to try a js file from the src folder. I can't point directly to the node_modules folder, because it gives me a 404 error also and it's not the way to do it according to famo.us' docs.

So i tried to add the mysql code to main.js this way, but it's not working either: mysql node:

require(['mysql'], function(mysql) {
    //foo and bar are loaded according to requirejs
    //config, but if not found, then node's require
    //is used to load the module.

    //Now export a value visible to Node.
    var connection = mysql.createConnection({
      host     : 'localhost',
      user     : 'root',
      password : 'test',
      database : 'app'
    });

    window.console.log(mysql);
});

requireConfig.js

/*globals require*/
require.config({
    nodeRequire: require,
    shim: {

    },
    paths: {
        famous: '../lib/famous',
        requirejs: '../lib/requirejs/require',
        almond: '../lib/almond/almond',
        'famous-polyfills': '../lib/famous-polyfills/index'
    }
});
require(['main']);

I didn't work with requireJS in combination with Node earlier and Famo.us is quite new, so they don't have documentation yet to connect with a mysql database. So I'm quite lost. Is anybody who knows probably a solution for this?

Answer 1

You might just be looking at this from the wrong perspective. Famo.us is a client side animation & physics engine. It's not intended to be used on the server. Famo.us is also completely back-end agnostic, because it doesn't care really want to know about what goes on on the serverside.

The 'require' function you see in famous code is not the same as 'require' in node. Node uses the CommonJS module pattern while RequireJS is different. That's explained in more detail here.

In short, your problem is you're trying to get client side code to do server side stuff, which can't be right. You're node server should serve all the client side files required, and to make requests to things like databases the client side should make an API request for the server to do something. Ideally you'd want to use a client side MVC (Backbone, Ember, Angular) to further keep your data from polluting the code that handles your presentation. The famo.us examples don't really go into that right now.

Answer 2

Fixed it. I started an extra node which I connected to.

connect.js

// The actual grunt server settings
module.exports =  function (grunt) {
  'use strict';
  return {
    options: {
      port: grunt.option('port') || 1337,
      livereload: grunt.option('livereload') || 35729,
      // Change this to '0.0.0.0' to access the server from outside
      hostname: grunt.option('hostname') || '0.0.0.0'
    },
    livereload: {
      options: {
        open: true,
        base: [
          '.tmp',
          '<%= config.app %>'
        ]
      },
      middleware: function (connect) {
        return [
          require('./server.js') // your server packaged as a nodejs module
        ]
      }
    },
    dist: {
      options: {
        open: true,
        base: '<%= config.dist %>',
        livereload: false,
      }
    }
  };
};

server.js (quickly implementation of Socket IO and MySQL):

var io = require('socket.io').listen(9001);

var mysql      = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '****',
  database : '****'
});

connection.connect();

connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
  if (err) throw err
  console.log("Connected to Database");
  io.sockets.on('connection', function (socket) {
    socket.emit('news', { hello: '22' });
    socket.on('my other event', function (data) {
      console.log(data);
      console.log(rows);
    });
  });
});
connection.end();

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Narrowcasting</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <link rel="stylesheet" type="text/css" href="lib/famous/core/famous.css" />

        <!-- build:css(app/) css/app.css -->
        <link rel="stylesheet" type="text/css" href="styles/app.css" />
        <!-- bower:css -->
        <!-- endbower -->
        <!-- endbuild -->

        <!-- build:js(app/) src/polyfills.js -->
        <script type="text/javascript" src="lib/famous-polyfills/functionPrototypeBind.js"></script>
        <script type="text/javascript" src="lib/famous-polyfills/classList.js"></script>
        <script type="text/javascript" src="lib/famous-polyfills/requestAnimationFrame.js"></script>
        <!-- endbuild -->

        <!-- process:remove:dev -->
        <script src="http://localhost:9001/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="src/main.js"></script>
        <!-- /process -->

        <!-- process:remove:dist -->
        <script type="text/javascript" src="lib/requirejs/require.js" data-main="src/requireConfig"></script>
        <!-- /process -->
    </head>
    <body></body>
</html>

main.js

define(function(require, exports, module) {
    var socket = io.connect('http://localhost:9001');
    socket.on('news', function(data) {
        console.log(data);
        socket.emit('my other event', { my: data });
    });
});