Structure de base

Trois pages statiques dont login, avec style

app.js

@@ -0,0 +1,59 @@
+var express = require('express');
+var path = require('path');
+var favicon = require('static-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+
+var routes = require('./routes/index');
+var users = require('./routes/users');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'jade');
+
+app.use(favicon());
+app.use(logger('dev'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded());
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', routes);
+app.use('/users', users);
+
+/// catch 404 and forwarding 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;

bin/www

@@ -0,0 +1,9 @@
+#!/usr/bin/nodejs
+var debug = require('debug')('my-application');
+var app = require('../app');
+
+app.set('port', process.env.PORT || 3000);
+
+var server = app.listen(app.get('port'), function() {
+  debug('Express server listening on port ' + server.address().port);
+});

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "application-name",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "nodejs ./bin/www"
+  },
+  "dependencies": {
+    "express": "~4.0.0",
+    "static-favicon": "~1.0.0",
+    "morgan": "~1.0.0",
+    "cookie-parser": "~1.0.1",
+    "body-parser": "~1.0.0",
+    "debug": "~0.7.4",
+    "jade": "~1.3.0"
+  }
+}

public/stylesheets/style.css

@@ -0,0 +1,121 @@
+
+/****************************************
+*********** Élements généraux ***********
+****************************************/
+
+body {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  overflow-x: hidden;
+}
+
+a {
+  color: #00B7FF;
+}
+
+.wrap {
+  width: 90%;
+  max-width: 900px;
+  margin: auto;
+}
+
+header .wrap,
+footer .wrap {
+  max-width: 1200px;
+}
+
+
+/****************************************
+***************** Header ****************
+****************************************/
+
+header {
+  position: relative;
+}
+
+header::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -7em;
+  left: -1em;
+  width: 2560px;
+  height: 20em;
+  min-width: 120vw;
+  background-color: #006D80;
+  border-bottom: #78A419 solid 1em;
+  transform: rotate(5deg);
+  z-index: -1;
+}
+
+/********** Logo ************/
+
+.site-name {
+  position: absolute;
+  top: 15px;
+  font-size: 3em;
+  font-family: "Delius Unicase", Verdana, sans-serif;
+  font-weight: bold;
+  letter-spacing: 0px;
+  text-transform: uppercase;
+  color: white;
+}
+
+/********** Navigation ************/
+
+header .nav {
+  width : 100%;
+  padding-top: 1em;
+}
+
+header .nav li {
+  z-index: 1;
+}
+
+header .nav a {
+  font-size: 1.1em;
+  color: white;
+  transition: all 0.2s;
+}
+
+header .nav a:hover {
+  color: #78A419;
+}
+
+
+/****************************************
+***************** Footer ****************
+****************************************/
+footer {
+  position: relative;
+  overflow: hidden;
+  width: 100vw;
+  padding-top: 9em;
+  color: white;
+}
+
+footer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: -7em;
+  left: -1em;
+  width: 2560px;
+  height: 10em;
+  min-width: 120vw;
+  background-color: #006D80;
+  border-top: #78A419 solid 1em;
+  transform: rotate(5deg);
+  z-index: -1;
+}
+
+footer .wrap {
+}
+
+/****************************************
+***************** Content ***************
+****************************************/
+
+.content {
+  min-height: calc(100vh - 24.7em);
+  margin-top: 10em;
+}

routes/index.js

@@ -0,0 +1,17 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET home page. */
+router.get('/', function(req, res) {
+  res.render('index', { title: 'Accueil' });
+})
+
+.get("/about", function(req, res) {
+  res.render('about', {title: 'À propos'});
+})
+
+.get('/login', function(req, res) {
+  res.render('login', {title: 'Connexion'});
+});
+
+module.exports = router;

routes/users.js

@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;

views/about.jade

@@ -0,0 +1,5 @@
+extends layout
+
+block content
+  h1= title
+  p Monnéthic c'est bien, c'est chic.

views/error.jade

@@ -0,0 +1,6 @@
+extends layout
+
+block content
+  h1= message
+  h2= error.status
+  pre #{error.stack}

views/index.jade

@@ -0,0 +1,6 @@
+extends layout
+
+block content
+  h1= title
+  p Vous avez ma page #{title} ?
+  p Elle est belle, hein ?

views/layout.jade

@@ -0,0 +1,29 @@
+doctype html
+html
+  head
+    title= title
+    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.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous")
+    link(href="https://fonts.googleapis.com/css?family=Delius+Unicase:700" rel="stylesheet")
+    script(src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous")
+    link(rel='stylesheet', href='/stylesheets/style.css')
+  body
+    header
+      .wrap
+        p.site-name Monnéthic
+        ul.nav.justify-content-end
+          li.nav-item
+            a.nav-link(href="/") Accueil
+          li.nav-item
+            a.nav-link(href="/about") À propos
+          li.nav-item
+            a.nav-link(href="/login") Connexion
+    
+    .content.wrap
+      block content
+    
+    footer 
+      .wrap
+        p © Monnéthic 2018
+  

views/login.jade

@@ -0,0 +1,14 @@
+extends layout
+
+block content
+  h1= title
+  p Par ici les infos !
+  
+  form
+    .form-group
+      label(for="exampleInputId") Identifiant
+      input(type="text" class="form-control" id="exampleInputId" aria-describedby="idHelp" placeholder="Jean-Eudes69")
+    .form-group
+      label(for="exampleInputPassword") Mot de passe
+      input(type="password" class="form-control" id="exampleInputPassword" placeholder="Mot de passe")
+    button(type="submit" class="btn btn-primary") Valider