JavaScript na serveru: Node.js + Express + React + MySQL

Vytvořil jsem jednoduchý základ pro aplikace, základní MVC strukturu a pro ukázku spojení s databází (ano MySQL :)).

Na serveru je nutné mít nainstalovaný Node.js a MySQL server.

Z čeho všeho je to složené?

Express

Minimalistický framework, který zjednodušuje základní možnosti Node.JS.

var express = require('express');
var app = express();

app.get('/', function (req, res) {
    res.send('Ahoj světe!');
});

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Stránka běží na http://%s:%s', host, port);
});

React

https://facebook.github.io/react/

Knihovna pro šablony (MVC) od Facebooku. Pomocí UI kompoment vytvoříte strukturu webu.

Express-react-views

https://github.com/reactjs/express-react-views

Intergruje React šablony do Express frameworku díky těmhle 3 řádkům:

app.set('views', __dirname + '/app/views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

MySQL

https://github.com/felixge/node-mysql/

Díky této knihovně lze komunikovat s MySQL serverem.

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

connection.query('SELECT 1 + 1 as result', function(err, rows) {
  console.log("Result: " + rows[0].result);
});

Struktura

/app
    /controllers
    /models
    /views
/public
    /css
    /img
    ...
app.js
package.json

MVC

Model

Model pracuje s daty (například z MySQL):
/app/models/page.js

var mysql = require("../mysql").connection;

var Page = {
    get: function(callback){
        mysql.query("SELECT 'Nadpis' AS headline, 'Titulek' AS title", 
            function (error, rows, fields) {
            callback(rows[0]);
        });
    }
};

module.exports = Page;

V controlleru s ním lze pracovat po nahrání přes require

var models = {
    page: require("../models/page")
};
models.page.get(function(data){...});

Controller

Který se použije se rozhoduje v app.js

app.get('/', require('./app/controllers').index);

/app/controllers/index.js

var models = {
    page: require("../models/page")
};

var render = function(res, data){
    res.render('index', { 
        title: data.title, 
        headline: data.headline 
    });
};

module.exports.index = function(req, res){
    models.page.get(function(data){
        render(res, data);
    });
};

View

V controlleru je řečeno, která šablona se zavolá:

    res.render('index', { 
        title: data.title, 
        headline: data.headline 
    });

/app/view/index.jsx

var React = require('react');
var DefaultLayout = require('./layouts/default');

var HelloMessage = React.createClass({
    render: function() {
        return (
            
                {this.props.headline}
            
        );
    }
});

module.exports = HelloMessage;

Stažení

https://github.com/MichalKatuscak/Nodeus

Instalace

Pro instalaci stačí pouze nainstalovat Node.js moduly (v package.json jsou definované):

npm install

Spustění

Ve složce, kde se nachází app.js stačí spustit příkaz:

node app.js

Použití

Tento článek neslouží jako tutoriál k jednotlivým modulům, ty mají hezky propracovanou dokumentaci (odkazy na ně jsou výše u každého modulu), takže mi to přijde trochu zbytečné.