Structure de Projet Meteor

Introduction

Il existe plusieurs types de solution de démarrage.

On peut les regrouper dans ces catégories:

  • Structure de projet
    • https://github.com/yogiben/meteor-starter
    • https://github.com/Differential/meteor-boilerplate
  • Générateur de projet
    • iron-cli
    • Kitchen
    • orion-cli

Pour les solutions de type structure, il suffit en général de faire un git clone. Exemple:

$ git clone https://github.com/yogiben/meteor-starter.git myproject
$ cd myproject
$ meteor

Attention à bien analyser les dépendances, les versions et choix d'implémentation des outils.

  • Certains sont orientés Bootstrap ou Semantic-ui et d'autre sont génériques, à vous de choisir le framework CSS
  • Chacun définit sa structure de répertoires

meteor-starter

  • https://github.com/yogiben/meteor-starter
  • http://learn.meteorfactory.io/meteor-starter/
  • http://learn.meteorfactory.io/customising-meteor-starter/
  • http://starter.meteor.com/
  • https://github.com/yogiben/meteor-admin/

Introduction

Cette base de projet est une des plus fonctionnelles parmis celles que j'ai testé.

Le seul défaut pour moi est l'utilisation du coffeescript que je ne maitrise pas encore mais vous trouverez une solution de conversion en Javascript un peu plus loin.

Remarque: Il n'y a aucun compte utilisateur au démarrage mais le premier utilisateur enregistré deviendra l'administrateur

TODO

  • manque imagemagik coté nodejs
  • https://github.com/CollectionFS/Meteor-cfs-graphicsmagick

Fonctionnalités

  • Le premier user créé aura un rôle admin
  • Dockerfile
  • i18n
  • interface admin: https://github.com/yogiben/meteor-admin/
  • login social
  • roles
  • controle de la qualité du password
  • Mail de récupération de mot de passe avec un lien : http://starter.meteor.com/reset-password/xxxxxxxx
  • Extension du profil user
  • Défilement continue de la page
  • Notifications
  • Config dans private/dev.json
  • Bootstrap3 en mode less pour personnalisation
  • Applications dans packages/
    • http://github.com/yogiben/meteor-comments.git
    • http://github.com/yogiben/meteor-favorites.git
    • http://github.com/yogiben/meteor-notifications.git
    • user-thumbs
    • http://github.com/yogiben/meteor-bootstrap

Installation

$ git clone https://github.com/yogiben/meteor-starter.git myproject
$ cd myproject
$ meteor update
$ MONGO_URL=mongodb://localhost/myproject meteor

Packages installés (après meteor update)

accounts-base@1.2.0
accounts-facebook@1.0.4
accounts-google@1.0.4
accounts-oauth@1.1.5
accounts-password@1.1.1
accounts-twitter@1.0.4
accounts-ui@1.1.5
accounts-ui-unstyled@1.1.7
alanning:roles@1.2.13
aldeed:autoform@5.3.0
aldeed:collection2@2.3.3
aldeed:simple-schema@1.3.3
aldeed:tabular@1.2.0
aldeed:template-extension@3.4.3
autoupdate@1.2.1
base64@1.0.3
binary-heap@1.0.3
blaze@2.1.2
blaze-tools@1.0.3
boilerplate-generator@1.0.3
bootstrap@0.3.1
callback-hook@1.0.3
cfs:access-point@0.1.49
cfs:base-package@0.0.30
cfs:collection@0.5.5
cfs:collection-filters@0.2.4
cfs:data-man@0.0.6
cfs:file@0.1.17
cfs:graphicsmagick@0.0.18
cfs:gridfs@0.0.33
cfs:http-methods@0.0.29
cfs:http-publish@0.0.13
cfs:power-queue@0.9.11
cfs:reactive-list@0.0.9
cfs:reactive-property@0.0.4
cfs:standard-packages@0.5.9
cfs:storage-adapter@0.2.2
cfs:tempstore@0.1.5
cfs:upload-http@0.0.20
cfs:worker@0.1.4
check@1.0.5
cmather:handlebars-server@2.0.0
coffeescript@1.0.6
comments@0.1.0
dburles:collection-helpers@1.0.3
dburles:google-maps@1.1.1
ddp@1.1.0
deps@1.0.7
ejson@1.0.6
email@1.0.6
facebook@1.2.0
fastclick@1.0.3
favorites@0.0.4
fortawesome:fontawesome@4.3.0
geojson-utils@1.0.3
google@1.1.5
handlebars@1.0.3
html-tools@1.0.4
htmljs@1.0.4
http@1.1.0
id-map@1.0.3
iron:controller@1.0.8
iron:core@1.0.8
iron:dynamic-template@1.0.8
iron:layout@1.0.8
iron:location@1.0.9
iron:middleware-stack@1.0.9
iron:router@1.0.9
iron:url@1.0.9
jparker:crypto-core@0.1.0
jparker:crypto-md5@0.1.1
jparker:gravatar@0.3.1
jquery@1.11.3_2
json@1.0.3
juliancwirko:s-alert@2.4.0
juliancwirko:s-alert-stackslide@1.1.3
launch-screen@1.0.2
less@1.0.14
livedata@1.0.13
localstorage@1.0.3
logging@1.0.7
manuelschoebel:ms-seo@0.4.1
meteor@1.1.6
meteor-platform@1.2.2
meteorhacks:meteorx@1.0.2
meteorhacks:subs-manager@1.4.0
meteorhacks:unblock@1.1.0
meteorspark:util@0.2.0
minifiers@1.1.5
minimongo@1.0.8
mobile-status-bar@1.0.3
momentjs:moment@2.10.3
mongo@1.1.0
mongo-livedata@1.0.8
mpowaga:string-template@0.1.0
mrt:moment@2.8.1
multiply:iron-router-progress@1.0.1
natestrauser:animate-css@3.2.6
notifications@0.0.7
npm-bcrypt@0.7.8_2
oauth@1.1.4
oauth1@1.1.4
oauth2@1.1.3
observe-sequence@1.0.6
ordered-dict@1.0.3
percolate:momentum@0.7.2
percolate:momentum-iron-router@0.7.0
percolate:velocityjs@1.1.0
raix:eventemitter@0.1.2
raix:handlebar-helpers@0.2.4
random@1.0.3
reactive-dict@1.1.0
reactive-var@1.0.5
reload@1.1.3
retry@1.0.3
reywood:publish-composite@1.3.6
routepolicy@1.0.5
service-configuration@1.0.4
session@1.1.0
sha@1.0.3
softwarerero:accounts-t9n@1.0.9
spacebars@1.0.6
spacebars-compiler@1.0.6
spiderable@1.0.7
srp@1.0.3
tap:i18n@1.5.0
templating@1.1.1
timmyg:wow@1.0.1
tracker@1.0.7
tsega:skrollr@0.0.2
twitter@1.1.4
ui@1.0.6
underscore@1.0.3
underscorestring:underscore.string@3.0.3_1
url@1.0.4
user-thumbs@0.0.8
useraccounts:bootstrap@1.11.1
useraccounts:core@1.11.1
webapp@1.2.0
webapp-hashing@1.0.3
yogiben:admin@1.1.2
yogiben:autoform-file@0.2.7
yogiben:autoform-map@0.1.3
yogiben:autoform-modals@0.3.5
yogiben:helpers@0.0.6
yogiben:mixpanel@0.0.7
yogiben:pretty-email@0.0.6
zimme:iron-router-active@1.0.4

Collection mongodb au démarrage

$ mongo
> use myproject
> show collections
meteor_accounts_loginServiceConfiguration
meteor_oauth_pendingCredentials
meteor_oauth_pendingRequestTokens
roles
system.indexes
users

Conversion JS

Pour ceux qui préfére travailler en javascript, voici une solution rapide pour convertir les fichiers coffee.


# Outil de conversion coffeescript -> javascript
npm install -g coffee-script

# Clonez le projet
$ git clone https://github.com/yogiben/meteor-starter.git myproject
$ cd myproject

# Créer un fichier .js à partir de chaque fichier .coffee
$ find -name "*.coffee" -exec coffee -b --no-header -c {} \;

# Remplace les .coffee dans package.js
$ find -name "package.js" -exec sed -i 's/\.coffee/\.js/' {} \;

# Supprimez les .coffee
$ for i in `find -name "*.coffee"`; do rm -f $i; done

Customisation

  • Copiez i18n/en.i18n.json dans i18n/fr.i18n.json pour traduction

  • modifiez private/settings/dev.json

    • Supprimez les entrées non utilisés comme facebook
    • Remplacez environment pour production
  • Pour modifier le css: client/style/bootstrap-variables.less

  • Pour modifier les fonts google : client/style/utils/fonts.import.less
  • Pour modifier l'image de l'écran d'accueil: client/views/home/home.import.less
  • Les vues/layout sont dans client/views
  • Les collections sont dans collections/*.js
  • Les routes sont dans lib/_config/router.js et lib/router.*.js

  • Pour la configuration principale, editez lib/_config/_config.js

this.Config = {
  name: 'My App',
  title: function() {
    return TAPi18n.__('configTitle');
  },
  subtitle: function() {
    return TAPi18n.__('configSubtitle');
  },
  logo: function() {
    return '<b>' + this.name + '</b>';
  },
  footer: function() {
    return this.name + ' - Copyright ' + new Date().getFullYear();
  },
  emails: {
    from: 'no-reply@' + Meteor.absoluteUrl(),
    contact: 'hello' + Meteor.absoluteUrl()
  },
  username: false,
  defaultLanguage: 'en',
  dateFormat: 'D/M/YYYY',
  privacyUrl: 'http://meteorfactory.io',
  termsUrl: 'http://meteorfactory.io',
  legal: {
    address: 'Jessnerstrasse 18, 12047 Berlin',
    name: 'Meteor Factory',
    url: 'http://benjaminpeterjones.com'
  },
  about: 'http://meteorfactory.io',
  blog: 'http://learn.meteorfactory.io',
  socialMedia: {
    facebook: {
      url: 'http://facebook.com/benjaminpeterjones',
      icon: 'facebook'
    },
    twitter: {
      url: 'http://twitter.com/BenPeterJones',
      icon: 'twitter'
    },
    github: {
      url: 'http://github.com/yogiben',
      icon: 'github'
    },
    info: {
      url: 'http://meteorfactory.io',
      icon: 'link'
    }
  },
  homeRoute: '/',
  publicRoutes: ['home'],
  dashboardRoute: '/dashboard'
};

Ajout d'un spinner de chargement

$ meteor add sacha:spin

Editez client/shared/loading.html:

<template name="loading">
  {{> spinner}}
</template>

Configuration de l'interface d'administration

  • https://github.com/yogiben/meteor-admin/

Editez lib/_config/adminConfig.js

Configuration d'une authentification github

  • Le lien à configurer comme callback sur github est http://YOUR_HOST/_oauth/github
$ meteor add accounts-github

Configuration dans private/settings/dev.json::

    "serviceConfigurations": {
        "github": {
            "clientId": "xxx",
            "secret": "xxx"
        }
    }

TODO:

Meteor.loginWithGithub({
  requestPermissions: ['user', 'public_repo']
}, function (err) {
  if (err)
    Session.set('errorMessage', err.reason || 'Unknown error');
});

Modifier lib/_config/oauth.js
  if user.services?.github
        user.emails = [{address: user.services.github.email, verified: true}]
        user.profile.firstName = user.services.github.given_name
        user.profile.lastName = user.services.github.family_name
if user.services?.github?.id
  profileImageUrl = user.services.github.picture

   forLoggedInUser: ['services.github'],
    forOtherUsers: ['services.github.username']

Développement

  • Utilisation de Config
Read our <a href="{{Config.blog}}">blog</a>

Collections dans /lib/collections/*

TODO - Personnalisation du compte utilisateur

TODO - Google Analytics

TODO - Ajout de packages

  • Formulaire de contact
  • Auth social
  • SEO
  • SiteMap

iron-cli

Création d'un projet


$ npm install -g iron-meteor

$ iron create myproject

$ cd myproject

# https://github.com/parlaywithme/full-pack/
$ iron add parlay:full-pack

$ iron remove insecure autopublish
$ iron add audit-arguments-check
$ iron add twbs:bootstrap
$ iron add yogiben:admin
$ iron add useraccounts:bootstrap
$ iron add matb33:collection-hooks
$ iron add nimble:restivus
$ iron add msavin:jetsetter
$ iron add mizzao:user-status
$ iron add sacha:spin
$ iron add accounts-password
$ iron add juliancwirko:s-alert
$ iron add gadicohen:headers


# TODO: TEMPORAIRE
$ iron remove appcache browser-policy gadicohen:headers

$ iron remove twbs:bootstrap yogiben:admin useraccounts:bootstrap


Meteor Settings

--settings settings.json

3. Démarrage

Il faudra surement relancer le meteor une seconde fois si le fichier packages.json n'est pas créé avant.

$ MONGO_URL=mongodb://localhost/myproject iron run -p 0.0.0.0:8080

# Derrière un proxy, ajouter cette variable d'environnement
$ HTTP_FORWARDED_COUNT=1

Starter Pack - parlay:full-pack

$ meteor|iron add parlay:full-pack

Packages installés:

parlay:full-pack                    added, version 1.0.3_2
parlay:starter-pack                 added, version 1.0.3_2
accounts-base                       added, version 1.2.0
aldeed:autoform                     added, version 4.2.2
aldeed:collection2                  added, version 2.3.3
aldeed:simple-schema                added, version 1.3.3
amplify                             added, version 1.0.0
appcache                            added, version 1.0.4
audit-argument-checks               added, version 1.0.3
browser-policy                      added, version 1.0.4
browser-policy-common               added, version 1.0.3
browser-policy-content              added, version 1.0.4
browser-policy-framing              added, version 1.0.4
coffeescript                        added, version 1.0.6
dburles:collection-helpers          added, version 1.0.3
dburles:mongo-collection-instances  added, version 0.3.1
email                               added, version 1.0.6
iron:controller                     added, version 1.0.8
iron:core                           added, version 1.0.8
iron:dynamic-template               added, version 1.0.8
iron:layout                         added, version 1.0.8
iron:location                       added, version 1.0.9
iron:middleware-stack               added, version 1.0.9
iron:router                         added, version 1.0.9
iron:url                            added, version 1.0.9
localstorage                        added, version 1.0.3
matb33:collection-hooks             added, version 0.7.13
meteorhacks:async                   added, version 1.0.0
meteorhacks:kadira                  added, version 2.19.6
meteorhacks:meteorx                 added, version 1.3.1
meteorhacks:npm                     added, version 1.2.2
meteorhacks:ssr                     added, version 2.1.2
meteorhacks:subs-manager            added, version 1.3.0
mizzao:timesync                     added, version 0.3.1
momentjs:moment                     added, version 2.9.0
mongo-livedata                      added, version 1.0.8
mquandalle:bower                    added, version 1.3.12_3
msavin:mongol                       added, version 0.5.5
npm-node-aes-gcm                    added, version 0.1.3_6
oauth-encryption                    added, version 1.0.5
peerlibrary:assert                  added, version 0.2.5
raix:handlebar-helpers              added, version 0.2.4
service-configuration               added, version 1.0.4
softwarerero:accounts-t9n           added, version 1.0.9
spiderable                          added, version 1.0.7
stevezhu:lodash                     added, version 1.0.2
u2622:persistent-session            added, version 0.2.2
underscorestring:underscore.string  added, version 2.4.0
useraccounts:core                   added, version 1.8.1
zimme:collection-behaviours         added, version 1.0.4
zimme:collection-softremovable      added, version 1.0.4
zimme:collection-timestampable      added, version 1.0.6
zimme:iron-router-active            added, version 1.0.3
zimme:iron-router-auth              added, version 3.0.1

Ajouter:

    twbs:bootstrap
    yogiben:admin
    useraccounts:bootstrap
    matb33:collection-hooks
    nimble:restivus
    msavin:jetsetter
    mizzao:user-status

    percolate:migrations
    edgee:slingshot
    percolate:server-info
    aldeed:template-extension
    percolate:paginated-subscription
    hitchcott:method-hooks
    matteodem:easy-search
    percolate:synced-cron

Packages

Introduction

Il y a beaucoup d'avis sur cette question mais pour l'instant, pour ma part, j'ai choisi la suivante:

.meteor/
client/
    stylesheets/
    lib/
    views/
    helpers.js
    router.js
    startup.js
common/
    lib/
    collections/
server/
    lib/
    startup.js
    methods.js
    publish.js
public/
private/
i18n/
packages/
settings.json
README.md

Installation

git clone https://github.com/srault95/meteor-app-base.git myproject

cd myproject/app

meteor update

orion-cli

  • https://github.com/matteodem/orion-cli
  • https://github.com/matteodem/meteor-boilerplate
  • http://matteodem.github.io/meteor-boilerplate/

Outil en ligne de commande pour générer une application Meteor

Utilise un fichier json pour décrire les données à générer

Création de packages avec meteoris

Avantages

  • Génération d'un package réutilisable pour chaque projet créer avec le générateur Mugen

Inconvénients

  • Génère du HTML static dans les templates sans utiliser autoform

Installation

$ git clone https://github.com/radiegtya/meteoris.git myproject
$ cd myproject
$ MONGO_URL=mongodb://localhost/start2 meteor -p 0.0.0.0:8080
  • Login/Mot de passe Admin: admin@meteoris.me / admin

Structures de projet

iron-cli

my-app/
 .iron/
   config.json
 bin/
 build/
 config/
   development/
     env.sh
     settings.json
 app/
   client/
     collections/
     lib/
     stylesheets/
     templates/
     head.html
   lib/
     collections/
     controllers/
     methods.js
     routes.js
   packages/
   private/
   public/
   server/
     collections/
     controllers/
     lib/
     methods.js
     publish.js
     bootstrap.js

boilerplate

client/                 # Client folder
    compatibility/      # Libraries which create a global variable
    config/             # Configuration files (on the client)
    lib/                # Library files that get executed first
    startup/            # Javascript files on Meteor.startup()
    stylesheets         # LESS files
    modules/            # Meant for components, such as form and more(*)
    views/              # Contains all views(*)
        common/         # General purpose html templates
model/                  # Model files, for each Meteor.Collection(*)
private/                # Private files
public/                 # Public files
routes/                 # All routes(*)
server/                 # Server folder
    fixtures/           # Meteor.Collection fixtures defined
    lib/                # Server side library folder
    publications/       # Collection publications(*)
    startup/            # On server startup
meteor-boilerplate      # Command line tool

Void

  • https://github.com/SachaG/Void

    client CSS helpers handlebars.js router.js views common footer.html header.html layout.html loading.html notFound.html items item.html item.js items.html pages homepage.html main.html main.js collections items.js lib helpers.js permissions.js packages iron-router sample-package public server fixtures.js publications.js

meteor-boilerplate

  • http://github.differential.com/meteor-boilerplate/

exponential.io

  • http://tech.exponential.io/meteor/building-large-modular-apps-meteor/

    /projectName /docs - Documentation /src - Root directory of all source files /client - [Client only] /collections - Local, unsynced collections /compatability - 3rd party JS libs that export a global symbol /conf - Configuration /lib - Library code (client-only) /routers - As the name implies, define routes here /startup - Code to run on document.ready() /stylesheets - CSS files /subscriptions - Subscribe to publications /views - Contains one nested directory for each module /collections - [Client & Server] Collections and methods that act on the collection /lib - [Client & Server] Library code that is used on client and server /packages - [Client &/or Server] Meteor, Meteorite and local packages /private - [Server only] Private data files /public - Static files /images - Image files /server - [Server only] /publications - Publish Mongo collections /startup - Code to run when the server starts

yeoman - generator-met

  • https://github.com/cmalven/generator-met
  • https://github.com/Pent/generator-meteor

    .meteor/ .gitignore packages release client/ main.coffee router.coffee vendor/ views/ index/ index.html index.coffee layout/ layout.html lib/ collections/ packages/ public/ server/ main.coffee methods.coffee publications/ .gitignore README.md index.html