• Meteor

Project Structure

From the class:  Setting Up Meteor Projects

In this video, we're going to create an overall project structure for a more sophisticated application than a bare bones app that gets created when you start off with Meteor. The purpose of the video is to show you around what a project structure could look like. And we're going to do it all by hand instead of using a command line tool. And that way you can see what everything is supposed to do.

Then, down the road, if you want to use a tool to make these jobs easier for yourself, you can do that. Normally, when we create a new Meteor application, we'd start by typing Meteor create and then the name of the application. But in this case, I'm going to start a little bit differently. I'm going to create a directory. And the name of the directory will be the name of my project. So let's call it to dos.

Then, we'll change into the to dos directory which currently is empty. Now, you'll see why we have this outer project directory in a second. But first, let's create the actual Meteor application. So inside of the to dos project folder, I'll type Meteor create, and this time I'll name the application app.

Now, if you're moving an existing application into a structure like this, you can just copy your application folder into the overall project folder and rename it to app. Now, the reason for having a structure like this with an outer project directory and then an inner media or application directory, is because Meteor has a bundling process whereby we can take all the folders and files inside of our app directory and bundle it into a Meteor application.

But we might want to have some other folders and files associated with our app that we don't want to take part in that process. For example, next, we're going to create a directory called config. So I'll use the make dir command, and we'll make a folder called config.

And now, I have two folders- the app directory and a config folder. Inside of the config folder, we'll put things like environment files and settings, settings.json sound file which we'll get to in a second.

Finally, I'll create a read me in the root file, in the root directory here, to tell people about our project. OK. Now, we have a read me, a Meteor application folder, and a config directory. Now, most of the time when we're working on our application locally, we'll be running the application in development. And so that's the same as changing into the app directory and just using the Meteor command to run the app.

But sometimes, we'll be running in different environments. An environment could be something like development, test, or production. So for example, when we deploy our app to a production server, we might change the environment to the production environment.

For each one of our different environments, we might have different configurations. So what I'd like to do is to go into the config folder and create a configuration folder for the development environment. I'll start off by making two new directories- one for development configuration and one for production, or one for test.

We'll cover production later. And next, I want to create two new files in our development environment. The first, we'll call en-- for short for environments-- .sh. The second, we'll call settings.json. These will be files that we can use to load environment variables and a custom settings JSON object for our Meteor application.

Now, our project structure should look like this. We have an overall project directory called to dos. And inside of it, we have an app directory which is where our Meteor folder or project goes and then, a config folder where we can put configuration options for our different environments. If I expand into the config folder, you can see I have a development and test environment.

And inside of development, we have two files, one for environment variables that we want to use in development and another for our Meteor settings which we'll cover in another video. Finally, I added to readme file to the root of the folder, and this helps other developers to know what the project is or-- if they're looking at it on GitHub-- how to get it set up and working.

Finally, let's put our entire project under get source control. I'll type get in it to initialize this as an empty git repository. And then, we'll add all of the existing files and folders. And I'll type the first commit message. And now, we have our first git commit, and everything is under source control.

In this video, we looked at how to set up an overall Meteor project folder for a more advanced application. Inside of it, we created a Meteor app called the app and a configuration directory to store configuration files. I also added to read me, and we added our project to git source control.