Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:19Length:2.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Creating Your First Meteor App

Time to get things moving! In this lesson, you will learn how to create your first Meteor web application using the Command Console in Windows.

2.3 Creating Your First Meteor App

Hello and welcome back. Now that we've got Meteor installed on our system, in this lesson I want you to create your very first Meteor app. But before we create our web project, we need to make sure that we restart our command prompt. If we don't restart it then we're gonna get some errors when we try to create our app. So I'm gonna close the command prompt. I'm gonna hit the Windows button, and then type in cmd. And then I'm gonna right-click on Command Prompt and Run as administrator. Actually, we don't need to run it as administrator anymore now that it's installed. We can just click on it, and that will open up our Command Prompt. And I'm gonna navigate to my D drive, and you're gonna wanna navigate to the folder that you want your web project to be in. And I've actually got a sites folder on my D drive so I'm just gonna CD into that sites folder. And since this course is aimed largely at designers, let me point out that if you've never used a command prompt before, CD stands for change directory. It's how we navigate from one directory to another. So now that we're in the sites directory, this is where I would ideally keep numerous folders, each of which has its own web project in it. But now that I'm in the sites folder, I can use Meteor to create my web project, and it will create that project directory for me. So in this course, we're gonna be creating kind of a lightweight social networking app, kind of a lightweight version of Twitter, if you will. And the way we can create an app using Meteor, is first we type the command meteor and then create. And then the name of the folder that you want to create that's gonna contain your app in it. So let's just call this social-lite. And then hit Enter. And then it will create our project for us. So after a moment, after it goes through all it needs to go through to create all of the files needed for our app, we now have our app available for us in the sites directory. So if I type dir to view the contents of the directory, we can see that we do have a directory here called social-lite. And for those of you who, like me, are more visually oriented, let me go ahead and drag over a File Explorer window. And I'm now in my sites directory here, and you can see a folder now called social-lite. This folder was not there before. And if we navigate into that folder we can see the contents of that directory. Now we're not gonna go into a lot of detail over what all of these directories contain, but we will get familiar with some of the files in the client directory as well as the server directory. So the client directory, if we move back there, it contains a main.html main.css and main.JavaScript file. And these files are kind of our entry point for our app. These three files are always loaded when our web application first loads. And then if we go to our server folder we have a main.js file there that will handle a lot of the server side code. Now later on we'll be adding couple new folders, but for now that's about it. So let's see if our new app is working. Let's get rid of this. And in our Command Prompt, the first thing we need to do is we need to change our directory. We need to go into our social-lite folder. So we're gonna do cd social-lite. And that will take us into the social-lite folder. And once we're in that folder then we can simply type meteor to launch the server. So this is gonna run our website for us, this is gonna act as our web server. So after a moment passes, we can see that our server has started. And we can see that our app is now running at localhost:3000. So let's navigate to http://localhost:3000. And now we can see our Meteor app with some default content in it. You'll see there's even a little bit of functionality here. If we click on the Click Me button we see that the text here updates. So we've got some static content, we've got some dynamic content. And more importantly, we see that our Meteor app is running and now we can finally jump in and get started with the fun part. So thank you for watching, and I'll see you in the next lesson.

Back to the top