Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Set Up the Foundation for Apps Project

Hello everyone. This is Reggie Dawson. Welcome to the Use Firebase as your Back-End course for Tuts+. In this video, we're going to get started building an app with foundation for apps. The reason I chose this framework is that it is built on top of angular. As a result, we can use the angular file library from Firebase to build this app. I will build this app directly on my PC because since the new release of the Foundation command-line interface, it crashes Cloud9. Now, in order to get started, we first need to set up our project. We just need to have no JS installed before we begin. After we have node, we will install Foundation for Apps. This installs Foundation globally, as well as installing Bower and Gulp. Then we use Foundation New to create a new project. Foundation New is how we create a Foundation project with the release of the new command-line interface. We are presented with a menu where we can choose what type of Foundation project to build. We will choose Foundation for Apps. Then it will ask you what the name of your project is. After entering a name, the template project and its dependencies will be downloaded and installed. Then we will use Bower to install Angular File. First, we have to make sure that we are inside of our project folder. I am using the Save option to add Angular File to the Bower dependency list. This will install Firebase and Angular, although we don't need Angular since it's built-in Foundation for Apps. Next, we have to configure our Gulp file for our project. Gulp will compile our project on changes, as well as copying our files to a bill directory, but we need to set it up properly. Go to Gulp file about JS. First, we will remove the JS folder from the assets. This will allow our custom JavaScript files to be copied. Then we add an array for the Firebase and Angular Fire files. This array is pointing at our Firebase and Angular Fire that we added through Bower. Next, we add our custom JavaScript files we are going to create to our appJS array. We have added references to services.js and controllers.js to the app's array. Then we create a Gulp task for Firebase. This will copy the Firebase files we specified to the Build folder. Then we are going to remove the concat from the Uglify app. The concat will attempt to merge our JavaScript files into one when we build the app, and we don't need that. Then lastly, we need to add the copy Firebase task to the Gulp build task. This will copy the Firebase files when we run the build task. We don't need to add it to the watch task, as the Firebase files will not be changed. Then we need to add the services and controllers.js files to the JS folder inside of the Assets folder inside of the Client folder. When we build the app or we run the watch command, the actual app will be copied to the Build folder. We will not make any changes directly to the files in the Build folder. Finally, let's open up app.js in the JS folder. First, we will change the name of the app to social app. Then we will add Firebase to the dependencies of this app. That's all we need to access the Firebase methods offered by Angular Fire. We could also set a routing in this file, but we will be using Foundation for Apps template-based routing. This is another reason I chose Foundation for Apps. Finally, we will go to Firebase and create a new project. Name it whatever you like, but be sure to save the name of the app for your Firebase reference. Also, make sure that you enable email and password authentication for the app. After that, we are now finished setting up our project. In the next video, we will set up authentication and our first controller.

Back to the top