Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:25Length:2.9 hours
  • Overview
  • Transcript

2.2 App Setup

Hello ladies and gentleman. This is Daniel for Touch plus. In this exciting video we're going to go ahead and set up the scaffold for our app. As you can see I'm in my brackets text editor and the folder is completely empty. Now you can use whatever text editor you want but, I'm going to use brackets. Sublime is good, I like Intelliga, just use whichever one works for you. If the one you're using doesn't let you create files inside of it, just use Windows Explorer or Mac Explorer to create the files. So the first thing we're going to do is init our npm and our bower.json files. This is going to allow us to install Bauer packages and npm packages. I'm going to go ahead and open up my terminal window at this directory. Now, with my terminal open, the first thing we'll do is create a package.json. To create a package.json, just type npm init npm will give you a long list of options, the default for all of these options is fine. So, just rapidly tap the Enter key. If we have a look inside our directory, we can see package.json has been created. Next, let's do the same thing for Bauer. In your terminal, type bowerInit. There will be a list of options and once again, just press Enter all the way through them. All right, so we now have a bauer file. Let's test those out. We know we're going to need angular, so make sure bauer's working by typing bauer install angular. And put --save. If you get an error here you want to make sure you have bauer installed on your computer. So you can install bauer with mpn install --global bauer just like this. Now the very next thing we're going to need to make is a get ignore file. So that our get repository doesn't get filled with our bauer packages and mpn packages. So create a new file in this directory. And just name it .get ignore. And now type in "node underscore modules." and on a different line bauer_components. All right. So things are looking good. Now, in this tutorial, I'm not going to guide you on when to make get commits. I'm going to be doing my own get commits between tutorials. You should commit to get whenever you feel comfortable. This may be frequently or infrequently or not at all. It's up to you. Next we're going to need an app and a test directory, so let's create those two directories in our root. Sometimes the test directory is called spec. In this tutorial we're just going to call it test. Now in our app directory we're going to need an index.html file to kind of be our app. So let's create it now. For technical reasons, your index.html must have a head and a body tag, so let's add those before we do anything else. Finally, let's just add something in our body so we can know when we're looking at our index.html, I'll just say hello world. Now we have an index inside our app. And finally I mentioned before that the heart of our application is really the gulp file. Gulp file allows us to automate our tasks, and we're going to be using it constantly from everything to serving our website to creating our test coverage. Let's create a new file in the root and call it gulpfile.js We're going to need gulp so open up your terminal and install gulp. Let's type npm install with the save flag. And for now, we'll just install gulp. So type, gulp. We're also going to want globally gulp, so type npm install gulp with the global flag. This will give us access to the command line interface. With our gulpfile created we're going to need to require a few initial things, even though we haven't added any testing yet. First we need gulp, so say, var gulp And make that equal to require gulp. Since we just installed gulp with npm, that should be fine. Now we're also going to need browser sync. So go back to your terminal and let's install browser sync with npm install save browsersync. Browersync is quite a big package. It has everything we need to serve and live update our app in chrome multiple devices. It does quite a bit. So sit tight and npm will install it for you. Now let's go back to our gulp file. Let's require browser sync. We'll say var browser sync and make that equal to the requirement of that module. For the last part of this video. We'll create a simple task to serve our tests up. so we'll say gulp.task and we'll make a task called serve And in this function, for now all we'll do is we'll get browser sync going. So we'll call init on the browser sync object, and pass it a configuration. We'll pass a few flags to init. We'll say notify is false which will affect the output of browserSync. We'll select the port, and we're just going to make the port 8080. You could make this any number, but since we're going to be reusing this a few times, let's stick with 8080 for now. We'll pass in a server object, which is more configuration for our app. The server object has an important property quality called baseDir, which we're going to set to app. This is sort of a base directory that we're going to serve up. And remember this should be an array. Finally, we'll add a routes arguments, which is another object. And each object in the routes, both the key and the value matter. So we're just going to set up a route for our Bauer components to let the app know that we want to serve those as well that has Angular in it. All right, so our gulpfile is looking good. The last thing we want to do is just add a watch to this. So every time we update the files, browser sync will restart. We'll just say gulp.watch, and pass an array. And in that array we'll just pass app/*/*.html. We'll actually make that .* just to cover everything. And we'll say on('change' and we'll just call on browserSync.reload So we should be good to go. Now let's give gulp serve a shot. Open up our terminal. And now type gulp serve If you've done everything correctly your app should pop up and you should see the words hello world, or whatever you put in. This is the structure for our app. Be sure to save your work and commit this to your GitHub repository as this will be the structure for the rest of our app. In the next couple of videos, we're going to be adding configuration files for Karma, as well as a few other basic things for our testable app.

Back to the top