Thursday, March 2, 2017

Angular 2 + Material Angular + Firebase Contacts App

Angular 2 is great by itself, but when you combine it with Firebase it because absolutely amazing. Then add Material Angular and now you have a site which scales from desktop to mobile and has no backend. 

I will flush out the meat of this post later, but I want to share this out since there is a lot of interest in the community. 

The code is available on GitHub, https://github.com/Rockncoder/contacts-troy

A demo of the site is running at: https://contacts-troy.firebaseapp.com


There is one missing file, src/app/FirebaseConfig.ts.
It contains all of your firebase configuration information.

export const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxcxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxx.firebaseapp.com",
  databaseURL: "https://xxxxxxxxxxx.firebaseio.com",
  storageBucket: "xxxxxxxxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxxxxxxx"
};

Tuesday, February 21, 2017

React Mini Session Installation Notes

Our goal is to deploy our completed React mini app to Firebase by the end of the evening. So, this mini-session will move really fast and unlike our weekend workshops, I won't have time to stop and help, but if you install everything before Tuesday night you should be able to keep up.
It should only take about 30 minutes to install everything below. If you have questions, please contact me via email: rockncoder@gmail.com.

  1. Install a web development IDE
    1. For the workshop, I will be doing everything in WebStorm. If you are accustomed to a different IDE for web development, you may use it, but please know how to use it. I, unfortunately, won't be able to give you much advice on using any of IDEs there are available. WebStorm is a paid application but it has a 30-day free trial version available.
  2. Install Git
    1. We will be using Git Bundles for the workshop. They will allow us to advance through the course together and recover from hard to find coding bugs. The latest version is 2.11.0. If have it already, but your version is older than 2.6, please update it.
    2. Git is free.
  3. Install Node.js
    1. We need node.js installed on our development machines. If you have a version older than 6.9.4, please upgrade. I will be using node version 7.4.0.
  4. Upgrade npm
    1. NPM comes with node.js but the version installed is usually out of date with the current release. Please update it by entering the following command in the terminal:
    2. npm install npm -g
  5. Firebase
    1. Firebase is both a real-time database and a cloud hosting platform. They make it relatively easy to build "backend-less" websites. They have a FREE developer price tier called "Spark". It is a perfect place to stash your experiments. They are will be accessible publicly over HTTPS.
    2. Go to https://firebase.google.com then click "Pricing" from the top menu. Scroll down to the bottom of the page. On the first column, "SPARK" click the button, "START NOW". Complete the sign up for the free account.
    3. Install the firebase command line tools
    4. npm install -g firebase-tools

Please take care of everything on the list before the mini-session. We won't have time during it. If you have questions, please feel free to contact me by email: rockncoder@gmail.com.

Tuesday, January 24, 2017

Preparing for the MEAN Stack Workshop: Winter 2017


To maximize our time together for learning the MEAN stack, please take care of the following before the workshop. The total time to install the software should be less than an hour. If you have questions, please contact me via email: rockncoder@gmail.com.

  1. Install a web development IDE
    1. For the workshop, I will be doing everything in WebStorm. If you are accustomed to a different IDE for web development, you may use it, but please know how to use it. I, unfortunately, won't be able to give you much advice on using any of IDEs there are available. WebStorm is a paid application but has a 30-day free trial version available.
  2. Install Git
    1. We will be using Git Bundles for the workshop. They will allow us to advance through the course together and recover from hard to find coding bugs. The latest version is 2.11.0. If have it already, but your version is older than 2.6, please update it.
    2. Git is free.
  3. Install Node.js
    1. We need node.js installed on our development machines. If you have a version older than 6.9.4, please upgrade. I will be using node version 6.9.4.
  4. Upgrade npm
    1. NPM comes with node.js but the version installed is usually out of date with the current release. Please update it by entering the following command in the terminal:
    2. npm install npm -g
  5. The Angular CLI
    1. The angular core team created the Angular CLI to make it easier to build, test, and maintain angular projects. It is installed with npm.
    2. npm install -g  angular-cli
  6. Heroku
    1. We will deploy our finished app to Heroku, a cloud-based hosting platform. Developer accounts are free. Please sign up now. If you already have an account, please be sure to have at least one free application slot for the workshop.
  7. mLab
    1. mLab is a fully managed MongoDB-as-a-service provider and a partner of Heroku. Will host our MongoDB service on it instead of installing Mongo on our machines. mLab gives us a free developers account tied to our Heroku account. You may need to supply a credit card but you will not be charged so long as you choose the free sandbox account. This is a small 500 MB database on a shared instance but it is more than enough for the class and gives you real world experience.
  8. Robomongo
    1. MongoDB includes the Mongo Shell, its REPL. Some people don't like using the REPL, so there is an alternative: Robomongo. I won't use it in class but if you hate the REPL you do have another choice.

Please take care of everything on the list before the workshop. We won't have time to do it during the workshop. If you have questions, please feel free to contact me by email: rockncoder@gmail.com.