Discussion :

[lostsoul]

Bonjour,

Je continue à découvrir Node, et la, j'ai besoin d'apprendre Americano (dérivé d'Express). J'ai lancé la commande qui cré le skelette de départ, et j'ai un msg d'erreur que je ne comprends pas trop au lancement de l'appli :

error - americano | Error: Most middleware (like json) is no longer bundled with Express and must be installed separately.

De plus, il n'y a pas de pages dans /client/public, et je ne sais pas trop comment faire pour créer une route avec des pages (jade ou ejs) dans ce répertoire.

Si quelqu'un peut m'éclairer svp ?

Merci d'avance,
Très cordialement,

ANDRE Ani

[headmax]

Salut je te conseille de faire une installation forcé au niveau de ton projet a ou ce trouve ton fichier package.json.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
//force les dépendances 
npm install -f
//essaye aussi l'installation séparé des dépendances   connect middleware 
npm install connect //la dépendance middleware voir https://github.com/senchalabs/connect#middleware

dans ton fichier de lancement de ton appli app.js ou server.js ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
//creation des paths
var experiences = require('./routes/experiences');
var experience = require('./routes/experience');
var addexperience = require('./routes/addexperience');
var editexperience = require('./routes/editexperience');
 
var formations = require('./routes/formations');
var formation = require('./routes/formation');
var addformation = require('./routes/addformation');
var editformation = require('./routes/editformation');
 
// view engine setup
app.set('views', path.join(__dirname, '/client/public'));
app.set('view engine', 'jade');
 
app.use('/experiences', experiences);
app.use('/experience', experience);
app.use('/addexperience', addexperience);
app.use('/editexperience', editexperience);
 
app.use('/formations', formations);
app.use('/formation', formation);
app.use('/addformation', addformation);
app.use('/editformation', editformation);

gl

[lostsoul]

J'ai fais l'install forcée, ainsi que celle de connect.
Mais, à quoi sert le reste svp, je ne comprends pas...

[lostsoul]

Dans le dossier controllers j'ai un fichier routes.js comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var index = require('./index');
module.exports = {
  '': { get: index.index }
};

Et la page index.js est dans le même dossier.

Comment modifier le fichier routes.js afin d'avoir les pages (ejs ou jade) dans le dossier /client/public ? Je ne sais pas vraiment comment faire.
D'ailleurs, comment faire pour avoir des pages ejs ou jade au lieu de index.js (outre le fait d'installer jade ou ejs).

[headmax]

Dans cette example j'ai mit comment je routes mes fichiers .jade sans l'extension pas besoin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
//creation des paths
var experiences = require('./routes/experiences');
var experience = require('./routes/experience');
var addexperience = require('./routes/addexperience');
var editexperience = require('./routes/editexperience');
 
var formations = require('./routes/formations');
var formation = require('./routes/formation');
var addformation = require('./routes/addformation');
var editformation = require('./routes/editformation');
 
// view engine setup
app.set('views', path.join(__dirname, '/client/public'));
app.set('view engine', 'jade');
 
app.use('/experiences', experiences);
app.use('/experience', experience);
app.use('/addexperience', addexperience);
app.use('/editexperience', editexperience);
 
app.use('/formations', formations);
app.use('/formation', formation);
app.use('/addformation', addformation);
app.use('/editformation', editformation);

dans cette example j'accède a ses fichiers .jade
par example le fichier formation.jade qui se trouve /client/public/formation.jade

http://locahost:3000/formation

[headmax]

Dans le dossier controllers j'ai un fichier routes.js comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var index = require('./index');
module.exports = {
  '': { get: index.index }
};

Et la page index.js est dans le même dossier.

Comment modifier le fichier routes.js afin d'avoir les pages (ejs ou jade) dans le dossier /client/public ? Je ne sais pas vraiment comment faire.
D'ailleurs, comment faire pour avoir des pages ejs ou jade au lieu de index.js (outre le fait d'installer jade ou ejs).

Pour ton index il faut

app.js ou server.js ("main")

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
var routes = require('./routes/index');
var monAutrePage = require('./routes/monAutrePage'); //il s'agit d'un parametre GET mais en mode rewriting d'ou './routes/' fait office /index?monAutrePage
...
 
//on configure jade sur la vue
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
 
 
//on utilise nos vues jades
app.use('/', routes);
app.use('/monAutrePage', monAutrePage );
 
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
 
// error handlers
 
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}
 
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
 
 
module.exports = app;

Donc ici tu aura comme fichier

/routes/index.js
/routes/monAutrePage.js

exemple index.js contient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Debian VPS' });
});
 
module.exports = router;

/client/public/index.jade
/client/public/monAutrePage.jade


est mon index.jade idem pour les includes ...
//extends layout est un fichier layout.jade présent dans /client/public/layout.jade contient les tags html head link script body

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
extends layout
block content
 div#top
  h1= title
  p Welcome to #{title}
  block menu
  div(id="data-ng-view", style="display:none")
    a#menuTest1(name="menuTest1", href="/users") Show Users | 
    a#menuTest2(name="menuTest2", href="/shouts") Show Shouts
   include ./header.jade
   include ./footer.jade

Voilà je pense que ça ira .

Gl

[lostsoul]

Oups, désolé, mais là, je suis plus perdu qu'avant en fait...

Voilà mon fichier server.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
var americano = require('americano');
var express = require('express');
 
var routes = require('./server/controllers/index');
var monAutrePage = require('./server/controllers/monAutrePage'); //il s'agit d'un parametre GET mais en mode rewriting d'ou './routes/' fait office /index?monAutrePage
 
 
//on configure jade sur la vue
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
 
 
//on utilise nos vues jades
app.use('/', routes);
app.use('/monAutrePage', monAutrePage );
 
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
 
// error handlers
 
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}
 
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
 
 
module.exports = app;
 
var port = process.env.PORT || 3000;
americano.start({name: '', port: port});

Le fichier /server/controllers/routes.js d'origine :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var index = require('./index');
module.exports = {
  '': { get: index.index }
};

Dans le même dossier, le fichier monAutrePage.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/monAutrePage', function(req, res) {
  res.render('monAutrePage', { title: 'Hello world' });
});
 
module.exports = router;

Dans le même dossier, le fichier index.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Debian VPS' });
});
 
module.exports = router;

Le fichier /client/public/layout.jade :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
extends layout
block content
 div#top
  h1= title
  p Welcome to #{title}
  block menu
  div(id="data-ng-view", style="display:none")
    a#menuTest1(name="menuTest1", href="/users") Show Users | 
    a#menuTest2(name="menuTest2", href="/shouts") Show Shouts
   include ./header.jade
   include ./footer.jade

Et /client/public/monAutrePage.jade (index.jade est quasi pareil) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
doctype 5
html(lang="fr")
  head
    title Autre
 
  body
    h1 autre
    p autre page

Je ne comprends pas en fait le index.js et index.jade, idem pour monAutrePage.js et jade.

A quoi sert ce fichier alors /server/controllers/routes.je :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var index = require('./index');
module.exports = {
  '': { get: index.index }
};

De plus, j'ai cette erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ReferenceError: app is not defined

Désolé, c'est sûrement tout bête ces questions...

[John Blobsmith]

Il semble que tu n'a pas déclarer la variable app dans ton fichier server.js.


En dessous de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var express = require('express');

il faut mettre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var app = express();

[John Blobsmith]

Je ne comprends pas en fait le index.js et index.jade, idem pour monAutrePage.js et jade.

index.js il dit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
module.exports.index = function (req, res, next) {
    res.render('index', { title: 'Debian VPS' });
};

- quand on l'appelle il va générer (render) un fichier html.
- il va utiliser la vue qui s'appelle index (client/public/index.jade)
- il envoi la variable title à la vue (title contient une chaine de caractère "Debian VPS")

A quoi sert ce fichier alors /server/controllers/routes.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var index = require('./index');
module.exports = {
  '': { get: index.index }
};

Désolé, c'est sûrement tout bête ces questions...

route.js c'est un fichier de routage (logique...).
Il fait le lien entre l'url de ton site et la fonctionalitée qui est derrière cette url.

- Pour l'instant la seul url routé est '' (donc rien, localhost:3000).
- La méthode http de routage défini est get (donc une url appelé via un navigateur).
- La fonctionalité lié à cette url est index.index:
* index c'est le module inséré en haut du fichier, soit index.js.
* index.index est donc la propriété index défini dans le module index.js (soit -> module.exports.index défini dans server/controllers/index.js)

Récapitulons:
- tu tape htttp://localhost:3000 dans ton navigateur.
- Ca appelle le routeur et demande la route '' (route vide) en get
- Le routeur appelle index.index
- index.js demande un rendu de la vue index.jade et lui envoi la variable title (avec 'Debian VPS' à l'intérieur)
- index.js envoi en réponse au navigateur ('res' comme 'response') la page html généré.

[John Blobsmith]

Bon, j'ai regardé de près americano....

J'ai une solution plus simple pour faire des générations de pages html.

- Ré-installe un projet tout neuf.
- npm install ejs --save

- Fichier route.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
var index = require('./index');
module.exports = {
  '': { get: index.index },
  'test': { get: index.test }
};

- Fichier controller/index.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
module.exports.index = function (req, res, next) {
  res.send('Hello');
};
 
module.exports.test = function (req, res, next) {
    res.render('test.ejs', {title: 'Hello lostsoul'});
};

- Fichier views/test.js (dans le dossier views et pas public... public c'est pour les fichiers statics....)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<h1><%= title %></h1>
test test test test

Pour afficher la page tu va sur http://localhost:3000/test
Et voila... simple... non ??

[lostsoul]

Merci !
J'ai créé un dossier views car il n'y en a pas par défaut, et j'ai mis un fichier test.ejs dedans, et ça fonctionne.
Merci pour la précision pour public, je croyais que c'était les fichiers pour le client (html, css, etc...).

Par contre, j'ai voulu essayer de créer une autre page et ça ne fonctionne pas. Je m'y prends mal je suppose.
J'ai une erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
controllers/routes.js:5
  'essai': { get: index.essai }

Et j'ai Cannot GET /essai sur toutes les pages...

J'ai pourtant essayé de suivre ce que tu as fais.

Le fichier /controllers/index.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
module.exports.index = function (req, res, next) {
  res.send('Hello');
};
 
module.exports.test = function (req, res, next) {
    res.render('test.ejs', {title: 'Hello lostsoul'});
};
 
module.exports.essai = function (req, res, next) {
    res.render('essai.ejs', {title: 'C est moi !'});
};

Le fichier /controllers/routes.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
var index = require('./index');
module.exports = {
  '': { get: index.index },
  'test': { get: index.test }
  'essai': { get: index.essai }
};

[John Blobsmith]

t'a oublié une virgule dans route.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var index = require('./index');
module.exports = {
  '': { get: index.index },
  'test': { get: index.test },
  'essai': { get: index.essai }
};

[lostsoul]

Erreur bête, il manquait une virgule...

Merci pour tout ;-)

[lostsoul]

J'avais trouvé tout seul, sans voir ton message.

[lostsoul]

Petite question, si je veux ajouter ce que j'ai fais avec les flux RSS, dois-je créer un autre fichier, ou je mets le code dans server.js.
Je suppose qu'il serait mieux de créer un autre fichier, pour avoir un code plus simple, surtout si j'ajoute d'autres fonctionnalités, non ?

[John Blobsmith]

Le mieux serai de créer un fichier avec le code dedans et que tu inclus dans le controller.
On est donc dans une structure MVC ou le controller récupère les données du model puis les envoi a la vue.

[lostsoul]

Oui, c'est bien ce que je pensais. C'est l'avantage du modèle MVC, tout est plus ou moins compartimenté pour faciliter le dev, non ?
Reste à voir comment faire ça maintenant.
Google est mon ami, je vais farfouiller sur le net voir si je trouve des trucs pour m'aider. Merci ;-)

[lostsoul]

Je n'ai pas trouvé grand chose sur le net. La pluspart des exemples sont en un seul fichier.

J'ai testé un peu.

J'ai aussi modifié mon fichier server.js. Le favicon ne s'affiche pas, les erreurs 404 fonctionnent, l'utilisation d'ejs doit peut-être être mise dans le fichier config.js, à voir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var americano = require('americano');
var favicon = require('serve-favicon');
var app = americano();
 
app.use(favicon(__dirname + '/client/public/favicon.ico'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
 
 
var port = process.env.PORT || 3000;
americano.start({name: 'MonApp', port: port}, function(err, app, server) {
 
// erreur 404  
app.use(function(request, response) {
  response.writeHead(404, { "Content-Type": "text/plain" });
  response.end("404 error ! Page non trouvee\n");
});
 
});

J'ai créé le fichier /server/controllers/flux.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
var FeedParser = require('feedparser')
var request = require('request');
 
var req = request('http://www.slate.fr/rss.xml')
var feedparser = new FeedParser();
 
var items = [];
var meta = {};
 
req.on('error', function (error) {
    // handle any request errors
});
req.on('response', function (res) {
    var stream = this;
 
    if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
 
    stream.pipe(feedparser);
});
 
 
feedparser.on('error', function(error) {
    // always handle errors
});
feedparser.on('readable', function() {
    // This is where the action is!
    var stream = this;
    meta = this.meta;
    var item = {};
 
    while (item = stream.read()) {
        items.push(item);
    }
 
});
 
exports.flux = flux.js;

Puis modifié la page /views/essai.ejs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<h1><%= title %></h1>
<h1>Page de TEST</h1>
 
<p>Bienvenue !</p>
 
<br>
<ul>
<% for(var i=0; i<items.length; i++) {%>
   <li> <a href="<%= items[i].link %>"> <%= items[i].title %> </a> </li>
   <li><%= items[i].author %></li>
   <li><%= items[i].pubdate %></li>
   <li><%= items[i].summary %></li>
<% } %>
</ul>
 
<br>
 
META
<br>
 
<h2> <%=  meta.title %> </h2>
<h2> <%=  meta.language %> </h2>
<h2> <%=  meta.link %> </h2>
 
<ul>
    <% for(var i=0; i<items.length; i++) {%>
    <li><%= items[i].link %></li>
    <% } %>
</ul>
 
 
<ul>
    <% for(var i=0; i<items.length; i++) {%>
    <li><%= items[i].link %></li>
    <% } %>
</ul>

Mais j'ai une erreur, items is not defined.

[lostsoul]

Le favicon fonctionne.

Pour le items, je ne sais pas si c'est mon export qui n'est pas bon ou s'il manque quelque chose. j'ai essayé require dans mon fichier principal mais ça ne fonctionne pas non plus, même en mettant le fichier flux.js à la racine.

[John Blobsmith]

En fait je voyais le truc comme ca:

Le code est pas très propre mais on pourra rectifier ca plus tard...
/server/models/flux.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
var FeedParser = require('feedparser')
var request = require('request');
 
var req = request('http://www.slate.fr/rss.xml')
var feedparser = new FeedParser();
 
var items = [];
var meta = {};
 
req.on('error', function (error) {
    // handle any request errors
});
req.on('response', function (res) {
    var stream = this;
 
    if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
 
    stream.pipe(feedparser);
});
 
 
feedparser.on('error', function(error) {
    // always handle errors
});
feedparser.on('readable', function() {
    // This is where the action is!
    var stream = this;
    meta = this.meta;
    var item = {};
 
    while (item = stream.read()) {
        items.push(item);
    }
 
});
 
module.exports.items = items;
module.exports.meta = meta;

/server/controllers/index.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var flux = require('./../models/flux.js');
 
 
module.exports.index = function (req, res, next) {
  res.send('Hello');
};
 
module.exports.test = function (req, res, next) {
    res.render('test.ejs', {title: 'Hello lostsoul'});
};
 
module.exports.essai = function (req, res, next) {
    res.render('essai.ejs', {
        title: 'C est moi !',
        items: flux.items,
        meta: flux.meta
        }
    );
};

/views/essai.ejs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<h1><%= title %></h1>
    <h1>Page de TEST</h1>
 
    <p>Bienvenue !</p>
 
    <br>
        <ul>
            <% for(var i=0; i<items.length; i++) {%>
                <li> <a href="<%= items[i].link %>"> <%= items[i].title %> </a> </li>
                <li><%= items[i].author %></li>
                <li><%= items[i].pubdate %></li>
                <li><%= items[i].summary %></li>
                <% } %>
                </ul>
 
                    <br>
 
                    META
                        <br>
 
                            <h2> <%=  meta.title %> </h2>
                                <h2> <%=  meta.language %> </h2>
                                    <h2> <%=  meta.link %> </h2>
 
                                        <ul>
                                            <% for(var i=0; i<items.length; i++) {%>
                                                <li><%= items[i].link %></li>
                                                <% } %>
                                                </ul>
 
 
                                                    <ul>
                                                        <% for(var i=0; i<items.length; i++) {%>
                                                            <li><%= items[i].link %></li>
                                                            <% } %>
                                                            </ul>