• Meteor

Creating the Project with Iron Scaffolding

I'd like to introduce you to a command line tool we'll be using to help us with scaffolding. That means it'll help us build up folders and boilerplate code that we would normally do by hand. This command line tool is called Iron. And you can find it in the new Iron-Meteor organization under the Iron-CLI project.

Let's head over to the console and install it. We can install Iron CLI by using the NMP package manager. And so you can type NPM install, and we'll use the -g switch to tell NMP to install this globally. And then the package you'll install is called iron-meteor. Now, I haven't actually released this yet, so I'm not going to press Enter. But by the time you do this, it should be released.

Now, this tool replaces Meteor M. And so I would recommend that you remove that tool first. And so to do that, you can say NPM uninstall meteor-em, and that will remove the old EM command line tool.

Now, once you've done this, you should be able to type iron and enter, and then you'll get a list of commands that you can use and a little bit of help on how to use the tool. So here in the list of commands, you can see that there's one called Migrate. And if you want to migrate an old project to the new structure, you can use that command, or you can just do it by hand.

So to start us off, I'm going to use the Create command. I'll type Iron Create. And this is to create a new project that uses the Iron Project layout. Now, the first thing we need to do is to provide a name to the Create command. So we're going to create an application called To Dos.

And we can pass it a number of options. The most important option is going to be what engine do we want to use for HTML, CSS, and JavaScript. So for example, if we wanted to use CoffeeScript, we could say --js equals, and then the extension of the file-- in this case, it's going to be Coffee for CoffeeScript.

Now, we're just going to use regular JavaScript, but we want to use less for CSS processing. So I'm going to say create all the stylesheet extensions with the extension LESS for less. So the left hand side can be CSS, JS, or HTML, and the right hand side can be any one of the supported engines. If you try to use one that's not supported, you'll just get an error.

So let's go ahead and create this app now with the less stylesheet engine. And what this is doing is creating a bunch of folders for us automatically. And then it will create the Meteor project and install the Iron Router Package for URL routing. If I change into the To Dos directory, let's take a look at the structure.

The first thing to point out is that there's this hidden folder called .Iron. And that's where the configuration goes for the project. We just talked about engines, and here's where that information gets stored. So this is saying to use regular HTML, regular JavaScript, and then Less for stylesheets. Once we get to templates, you'll see that you can optionally say to not create HTML for templates, and the same for JavaScript and CSS, depending upon how you want to lay out your project. So all of this is configurable, and you can change it anytime you want.

Now, the biggest change in the directory structure from what you might be used to is that now the Meteor application goes into a folder called App. So you see the .Meteor folder here? That's what indicates that this is a special Meteor folder, and this is the folder that the Meteor command line tool can work with. So inside the App folder are all of our application folders that we're used to, like Client, Lib, and Packages and so on.

Now, the reason for this is because in projects, we don't want everything related to configuration or scripts we might write to be part of the bundled app, that Meteor bundles. Sometimes, we want that just to be around the app. Another example might be for a test that we want to write that we don't want to be part of the core app. So having a higher level folder makes a lot of sense. And that's why we moved the media app itself into an app directory.

Now, we'll talk about this app structure more as we build out the To Dos app. The Bin folder in the project is for any kind of scripts that you write. I find that as your app gets bigger, we ended up with a lot of scripts, like to run database migrations or simulations and things like that. But the directory starts off as empty, so that's really just an optional place for you to put scripts.

The next directory is called Build, and that's where you can put a build of your Meteor app if you want in production. Or if you want to test a production build on your local machine before you deploy it, you can use the Iron Command Line tool to build your app, and it'll go into this folder.

The last directory is probably the most interesting. It's where we're going to store configuration settings for different environments. What I mean by environment is, we're normally working in development. And when we're ready, we push to production. So we push to a production server that we've created, or on some hosted service. And the settings that we use in each one of those environments are probably different.

So there's two ways to create settings in a particular environment-- in this case, development. We have an file, and what that does is allows us to export environment variables on the server. So this is the standard Unix way of sharing global variables between applications. You can just create these environment variables, and they're available on the server.

So when you start up your app using Iron Command Line tool, this environment SH file will get sourced automatically, and so these variables become available in your app. Now, the nice part about this is we can have another environment called Production where these environment variables get sourced from a different place-- for example, from a script that you used to start and stop your app. But we can reuse those same variables in development.

The second Settings file is called Settings.json, and that's your regular Meteor settings file. It's a JSON file where anything inside a public will be visible to anybody or anyone using the app. So it goes down to the browser automatically.

So you can put properties in here that you want visible on your client side code-- for example, if you have a mix panel token that you want your browser code to have access to. And then anything outside of the public block is only available or visible on the server. So this is where you can put private variables. But I would recommend that you just put those in your file.

So as we build out this project, you'll see a couple of examples where we'll use environment settings. So this is the project structure that was created for us using Iron. And now what I'm going to do is quit out of this and show you around the Iron tool little bit more.

So the first thing to note is because we have a different directory structure, if we want to run Meteor commands with the Meteor Command Line tool, we have to change into the App directory and then use the Meteor command. So this would be a little bit tedious over time. So a much better thing you can do is to just use the Iron command, and it will do the right thing.

So I'll change back. And if I type Iron, it will proxy any commands that it needs to to the Meteor Command Line tool, but it'll do it in the context of the Application directory. So you'll notice here that what's happened is I type Iron and it ran our app, but it also sourced our environment variables and brought in the Settings.JSON file. So you can see on the top line there that that's the Meteor command that was run for Us

Now, I want to add a couple packages to get us set up here, so I can use the Iron Command Line tool for that as well. And I'll type Iron Add. Let's first add the Less package for styling. So that's what we'll used to build up our stylesheets. And I'll add the Bootstrap package, which will give us some out-of-box style components.

And then let's add the Accounts packages while we're at it as well. So we'll say Iron Add Accounts UI, which will give us out-of-the-box buttons for logging in logging out. And then I'm also going to add Meteor Developer Accounts. So I'll say Accounts, Meteor Developer so that we can build OAuth integration with Meteor's OAuth service.