Customising Meteor Starter

Meteor speeds up development by making assumptions about how you’ll build your app. Meteor Starter is a Meteor boilerplate that does the same.

For those who are unfamiliar, take a moment to read what Meteor Starter offers.

I use Meteor starter as a base for pretty much all my projects. This article is about the first steps I take to make the generic boilerplate specific to my project.

0. Setup

To get a copy of Meteor Starter running, just clone the repo and run it

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

You should get this:
meteor-boilerplate

1. Let’s _config

The first thing to do is to open the config file. This is where all the non-environment specific information about the app is stored, including the name, the URL and social media links.

/both/_config/_config.coffee

config

These properties are used through your app and can be be rendered using the helper

{{Config}}

e.g.

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

You may not be able to replace all the fields right away, but the first three should be no problem.

Changing name, title and subtitle will change the appearance of the home page.

@Config =
    name: 'Cat Hats 4 Cats'
    title: 'Put a hat on that cat'
    subtitle: 'Great headwear for your favourite pet'

cat hats

It will also configure other parts of the app such as the seo and the page title.

2. Styling

Bootstrap variables are found in:

/client/style/bootstrap-variables.less

To give you app a different theme, you can copy a boostrap theme variables.less from Bootswatch.

The Google font import is found in:

/client/style/style.less

Changing the home screen image:

/client/views/home/home.less

Now our app looks and feels a little different

Cat_Hats_4_Cats

 

3. Collections, views and routes

Now it’s time to hack.

Collections

An example collection with collection2 schema:

/both/collections/posts.coffee

CollectionFS file storage collections with support for GraphicsMagick:

/both/collections/attachments.coffee
/both/collections/profile_pictures.coffee

Views

Views and layouts are found in:

/client/views

Router

The router adds some functionality to redirect non-logged in users and to scroll to the top of the page after the route has been rendered.

/both/router.coffee

What are you building

We’re keen to hear how Meteor Starter is being used. If you’ve created something you want to share, please add in the comments below.

2016-11-20T15:13:48+00:00

14 Comments

  1. Ace Corpuz March 14, 2015 at 9:41 pm - Reply

    how to create a default admin user?

  2. Jeff Hale May 22, 2015 at 1:33 pm - Reply

    Thank you for the great resources, Ben. The latest build structure seems to have been refactored so that there is no “both” folder and the app is more modular for example: /both/_config/_config.coffee is now at lib/config/_config.coffee and /both/collections/posts.coffee is now at /collections/posts.coffee . Readme and tutorial reflect the old structure.

    • yogiben May 22, 2015 at 4:12 pm - Reply

      Hey Jeff,

      Very good points! I’ve been trying to make some big improvements recently and this tutorial has become a little out of date. I’ll endeavour to update it soon. thanks for using.

  3. Dorian July 20, 2015 at 4:17 am - Reply

    home.less is now called home.import.less ?

  4. mr_nazrin September 20, 2015 at 9:14 am - Reply

    new to meteor and this admin page…how to route to my meteor app after login?

  5. Sameer Shemna October 2, 2015 at 3:41 pm - Reply

    how to customize the login page?

  6. wordsforthewise October 30, 2015 at 11:10 pm - Reply

    This tutorial and boilerplate don’t seem to work so well with the latest version on github. The clone of the master branch of the repo ends up with a black background on the intro section, and the path to the image is wrong. I can’t get a background image to show up. There are two _config.coffee, one in both/config and one in lib/_config, the one in both/config is the one that is actually referenced.

    • yogiben November 9, 2015 at 11:21 am - Reply

      Maintenance has decreased a little due to external commitments.

      Hoping to update tutorial soon after a big change in the code base.

  7. Jon Hayes May 20, 2016 at 11:16 pm - Reply

    Question – how do I go about storing uploads on S3 bucket?

  8. Medunoye August 4, 2016 at 1:34 pm - Reply

    so i did the cloning and i ran meteor … nothing happened

    • Dr. Gonzo August 19, 2016 at 4:57 pm - Reply

      Can you provide more details? Did you you cd into the app root directory? Do you have meteor installed on your machine?

  9. Dr. Gonzo August 19, 2016 at 5:03 pm - Reply

    Any tips on configuring the e-mail settings? I’m passing in a MAIL_URL envrionment variable in settings.json, have installed all the pretty-email dependency packages. It’s still throwing an error and trying to send from [email protected] for some reason

Leave A Comment