Meteor project generator

This is another attempt to make some shortcuts while working with Meteor framework. In a previous post, I wrote about a bash script that could generate a reasonable (for me) directory structure for a new Meteor project. Additionally the script could download a fixed number of packages.

In it’s new iteration the script has the following features:

  • Creates a directory structure and various files
  • Downloads a fixed number of Meteor packages along with packages passed as arguments in command line
  • Can create new collections and their respective fixtures server-side
  • Can create new views (a combination of a new directory, a template, a helper and a new route)
  • Can scaffold a CRUD view for a given name, a collection, a fixture and a route
  • Generates navigational links from all views

I will not go into details as all the commands are explained at project’s README hosted on GitHub. What I will do is to create a small site with the tool in order to demonstrate how many steps required for such result. The following assumes that the script is placed somewhere in user’s path, it is executable chmod +x meteor-project and is available from the command line. Additionally the dollar sign $ represents the user’s command prompt

Create a new project with the default packages (the script installs iron router and Bootstrap 3) named blog:

after some command line output, the outcome will be a directory structure like this:

initial_project_tree

at this point the generated site looks like the this:

initial_site

CRUD views generation using scaffold command:

the fields name, registered and isAdmin along with their types are used to generate HTML controls and the respective collection and fixture.

After the execution of the above command, the directory looks like the following screenshot:

scaffold_directory

Finally generate a link in navbar for the newly created user view:

The visual result of steps 2 and 3 is this:

index page check the views -> user menu link

index_page

user index page showing all generated by the fixture user objects along with showeditdelete and new working buttons. Additionally each page’s title is automatically updated.

user_index

show user

show_user

edit user

edit_user

new user

new_user

Supported HTML controls: string, text, number, date, boolean, password url, tel, email, file, color and select.

You can read and check the script on Github
and check the above live site at meteor-project.meteor.com

Command line generator for Meteor projects

A bash script to create directory structures for new Meteor projects

As I mentioned in a previous post, I spend my free time trying to learn Meteor, a cool, simple but also smart and useful JavaScript web framework. During this time I find myself repeatedly doing the same things over and over again for each new project, such as:

  • create a project’s root directory
  • cd into the newly created directory and call the Meteor command line tool: meteor create project_name
  • delete the three generated files (html, js and css)
  • add two or three basic packages (mostly Bootstrap 3 and iron router)
  • create various sub-directories inside root directory for public, tests, server, client, common libraries, client libraries, etc

Pretty boring and not lazy enough experience. Hopefully not something which it cannot be fixed with a little scripting. My humble solution comes in a form of a Bash script that does all the steps mentioned in the list above. One can simply invoke the script from the command line and provide it with a name for the project to be created. Even the project name is optional, if not given the script will create a new project named new_project.

Here is a screenshot of a newly created project:

I hope most things speak for themselves but for further clarification:

  1. The script creates the project’s root directory
  2. Deletes the Meteor generated files
  3. Creates all directories and files
  4. Writes some very basic code in some of the files, like the templates used to form the basic layout and some JavaScript
  5. Finally adds iron router and bootstrap-3 packages

The generated code assumes that Bootstrap 3 will be used but it can be easily removed.

  • my_site is the name of the project and the root directory
  • my_site/client is the client side code, templates and stylesheets
  • my_site/client/lib is a directory where I put my subscriptions and some common utility code to run client side only
  • my_site/client/stylesheets are where all stylesheets files live. You can see the sticky_footer file which is used for Bootstrap sticky footers
  • my_site/client/stylesheets/style.css for further style customizations
  • my_site/client/views/layout contains partial templates for the head, the header and the footer while the main template renders all



  • my_site/client/views/index can be considered the home page
  • my_site/collections is a place to hold all of the collections
  • my_site/lib hosts common code that will run both on the server and the client, such as routes for the iron router
  • my_site/public for assets like images and the like
  • my_site/server is where all the server-side code lives
  • my_site/server/fixtures.js is a place to put collection fixtures for development
  • my_site/server/methods.js for the server-side methods
  • my_site/publications.js for collection publications

So if you want to skip some steps like me, you are welcomed to use the script which is available from Github. Put the script somewhere accessible from your user, I tend to maintain a ~/bin/ directory on my Ubuntu machine which is sourced by my .bash_profile. Finally call the script: meteor-project my_new_project_name_goes_here, that’s it.

Bash completion for the Meteor web framework

Recently I’ve got interested and diving into the Meteor JavaScript web framework. My first impressions are quite positive although the framework is still in pre 1.0 version (currently 0.9.2.1).

While i can write a lot about Meteor and my experiences so far, I am sure there are a lot better places one can find more info, you can find some at the end of this text. My main purpose for this post, is to introduce a bash script I’ve made in order to provide command line completions for Meteor’s command line tool which I found missing from the official distribution. From the command line one can create a new Meteor project, run the development server, add or remove packages and some other actions which are common to other web frameworks (Django, Ruby on Rails, etc).

The bash script covers all Meteor commands, for installation – usage check bellow the script.

Installation

Put it somewhere accessible for your user, for this example we assume the directory /home/myuser/meteor.bash, in your .bash_profile or .bashrc paste the following:

Additionally on Ubuntu systems you can put this file at /etc/bash_completion.d/, in this case you do not need to put the previous if [...] clause in your .bash_profile or .bashrc

Usage

or

The script is also available at Github which is the preferred method of getting it.

Meteor resources:

Found more up to date resources? Drop a comment and I will try to add them as soon as possible.