• Stars
    star
    873
  • Rank 52,257 (Top 2 %)
  • Language Handlebars
  • Created about 11 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Boilerplate meteor app - starting point for meteor apps

meteor-boilerplate

A starting point for MeteorJS applications. Includes iron-router, Bootstrap 3, Font Awesome, LESS and more.

Included Packages

Installation

  1. Clone this repo to <yourapp>

git clone https://github.com/Differential/meteor-boilerplate.git <yourapp>

  1. Remove .git

cd <yourapp> && rm -rf .git

  1. Start coding!

File Structure

We have a common file structure we use across all of our Meteor apps. Client-only files are stored in the client directory, server-only files are stored in the server directory, and shared files are stored in the both directory. The private and public directories are for either private or public assets.

Bootstrap and LESS

The majority of Bootstrap can be customized with LESS variables. If you look in client/stylesheets/base/lib/bootstrap/variables.import.less you will see a slew of configuration variables that can be tweaked to drastically change the look and feel of your site without having to write a single line of CSS.

However we should avoid modifying the core Bootstrap Less files (in case we want to update them later), and should instead override the variables in our own LESS files.

For example, to change the color of all primary buttons and links, simply add a @brand-primary variable to stylesheets/base/variables.import.less:

// variables.import.less
@brand-primary: #DC681D;

If you'd like to override a feature of Bootstrap that can't be modified using variables, simply create a new file in the client/stylesheets/components directory named after the corresponding Bootstrap component (eg. buttons in this case), and make your changes there.

// buttons.import.less
.btn {
  text-transform: uppercase;
}

After your file is ready, you need to import it into client/stylesheets/base/global.less. So, you would add in this statement:

@import '@{components}/buttons.import.less';

The reason that this is done is to avoid any issues when the LESS files are compiled into CSS. That way, if one component relies on another or you want a certain order for your components, you can avoid any issues.

SEO

Page titles, meta descriptions and Facebook and Twitter meta tags are handled by the yasinuslu:blaze-meta package. Global settings are configured in both/router/meta.js, while individual page settings are set at the controller level.

  • Note: the spiderable package will need to be installed and configured on your server in order for bots to read your meta tags.
PostsShowController = AppController.extend({
  path: '/posts/:_id',
  waitOn: function() {
    return this.subscribe('post', params._id);
  },
  data: function() {
    return {
      post: Post.find({_id: params._id})
    };
  },
  onAfterAction: function() {
    if(this.ready()) {
      Meta.setTitle(this.data().post.title);
    }
  }
});

Favicons and Touch Icons

Upload your image to http://realfavicongenerator.net/ and place the resulting images in public/images/favicons

Seed Data

You can use the dburles:factory and anti:fake packages to generate fake collection data for testing your UI. See server/seeds.js for an example:

Meteor.startup(function() {

  Factory.define('item', Items, {
    name: function() { return Fake.sentence(); },
    rating: function() { return _.random(1, 5); }
  });

  if (Items.find({}).count() === 0) {

    _(10).times(function(n) {
      Factory.create('item');
    });

  }

});

More Repositories

1

accounts-entry

Meteor sign up and sign in pages
CoffeeScript
305
star
2

meteor-mobile-cookbook

Helpful guides and tips for building Cordova apps in Meteor.
264
star
3

polymer-demo

Polymer & Meteor
CSS
164
star
4

meteor-workers

Spawn headless worker meteor processes to work on async jobs.
CoffeeScript
80
star
5

flexapp

Free mobile app website template
JavaScript
68
star
6

reststop2

Do RESTful APIs with Meteor 0.6.5 and up.
JavaScript
67
star
7

meteor-billing

Package for common billing functionality
CoffeeScript
52
star
8

meteor-voltage

Provides easy, editable, static pages in Meteor. Editable in Markdown.
JavaScript
44
star
9

meteor-profile

Gives you a basic, out-of-the-box user profile page
CoffeeScript
37
star
10

meteor-uploader

CoffeeScript
33
star
11

meteor-vulcanize

Vulcanize html imports in your meteor app.
JavaScript
32
star
12

meteor-comments

Meteor package to add comments to any document with optional notifications.
CoffeeScript
28
star
13

lister

App for easy public sharable lists. Our meteor playground.
JavaScript
24
star
14

todos-playground

Playing with components!
HTML
21
star
15

docs

Who we are and what we stand for.
21
star
16

meteor-boilerplate-lite

A training ground for new meteor developers
CSS
11
star
17

meteor-reapp

Meteor + Reapp!
JavaScript
7
star
18

timeago

Meteor package with helper for jquery timeago.
JavaScript
7
star
19

pages-template

Our open source github pages template that every gh-pages branch should start from.
CSS
7
star
20

differential.github.io

Organization Page
CSS
6
star
21

jumpstart

Base starting point for front-end dev
CSS
6
star
22

supporter

Open source Meteor app to support social communities in their effort to help each other resolve their needs.
CoffeeScript
6
star
23

voltage-example

This is an example project using the meteor-voltage Meteor package.
HTML
4
star
24

meteor-cluster

JavaScript
4
star
25

willow-creek

JavaScript
3
star
26

react-native-activitykit

TypeScript
2
star
27

di-base

A starting point for Meteor Night School graduates
HTML
1
star
28

rivervalley-apollos

JavaScript
1
star
29

di-cli

Differential command line tool.
JavaScript
1
star
30

slides

JavaScript
1
star