Monday, December 4, 2017

React Workshop Installation Notes (9 + 10 December 2017)

Please try to install all of the tools below before the start of the workshop on Saturday.

Install Chrome

React is compatible with every modern browser, but Chrome is the best choice for development. In addition to its excellent developer tools, Chrome has two essential  extensions: React Developer Tools and Redux DevTools. Install Chrome at https://www.google.com/chrome/browser/desktop/index.html

Then install React Developer Tools and Redux DevTools via the Chrome Web Store.

Install Git

The latest version of Git is 2.16.1. If you have it already, but your version is older than 2.6, please update it. Git is free. http://git-scm.com/downloads

Installing Node.js

Node.js is a JavaScript runtime, that is a fancy phrase which merely means it lets us execute JavaScript code from the command line. I am installing the current LTS or long-term support version, which is version 8.9.4. I highly recommend that you do the same. Don't download the latest version; it sometimes has bugs and incompatibilities. Go to: https://nodejs.org/en/download/. Click the button to download the LTS version, when complete double-click the file to begin the installation.
Usually, the site detects your operating system and the webpage changes to reflect it. If you don't see your operating system, click the "Other Downloads," which is in small text below the download button.

Installing Node should only take a few minutes. To verify, open a new command prompt, or terminal instance. From the command line type:

node --version

Node.js should respond with its version number. In my case that is:

v8.9.4

If you see something like:

'node' is not recognized as an internal or external command, operable program or batch file.

Node.js install.ation may have failed. First, make sure you typed in a new command prompt or terminal window. If you have, then repeat the installation steps by going back to the Node.js website.

Install Atom/Nuclide

Atom is the free and hackable editor from the folks at GitHub. It is cross-platform and runs on Windows, Mac, and Linux. You are welcome to use whatever editor you like, but please know how to use it. I can give you help on using Atom. Download Atom from https://atom.io/

Once we have Atom installed and working, we can optionally install Nuclide. It is a package, which is an Atom add-on, from Facebook. It works well other Facebook open-source projects, like React, React-Native, and Flow. Again, it is optional, but I will use it. Unfortunately, the Windows version is not complete. So while Nuclide has been thoroughly checked out on Mac and Linux, on Windows, it has not.

To install Nuclide:

Help >> Welcome Guide >> Install a Package >> Open InstallerType "Nuclide" in the search bar."searching packages for nuclide"
After finding the package, verify that it is from Facebook, then click "Install."It will take a bit of time for the package to download and install. Be patient.

Installing Yarn

Yarn is a package manager from Facebook. It is similar to npm but is faster and more secure. I highly recommend using Yarn over npm primarily when working with React or React-Native. The easiest way to install Yarn is not safe, but it is via npm. It seems npm packages are not signed which is a security risk when installing apps globally.

##### via npm

```npm install -g yarn```

##### via Homebrew on macOS

```brew install yarn```

Node.js is a prerequisite for Yarn, and brew installs it with Yarn. If you are using a tool like nvm, this can break it. You can install Yarn without Node.js with the following command:

```brew install yarn --without-node```

##### via Chocolatey on Windows

Chocolatey is a Windows, package manager. You can get Chocolatey from https://chocolatey.org/.
You install Yarn with the following Chocolatey command:
```choco install yarn```
You can validate that Yarn was installed correctly by typing:
```yarn --version```
Yarn responds with its version information if installed correctly.
### create-react-app
Facebook has an excellent tool for React developers, **create-react-app**. It is a CLI which creates a complete React skeleton app. Install it with:
```yarn global add create-react-app```
_Please note: Yarn's global add is order sensitive, the global flag must be the first option._
Verify correct installation by entering:
```create-react-app --version```
The current version should display.
### Firebase
Firebase is a cloud service which is now part of Google. Its initial function was their Firebase Real-Time Database, but now they offer many more services including hosting which we'll need to deploy our React app. So, if you don't already have an account, go to https://firebase.google.com/ and sign up. Don't worry you won't need a credit card if you sign up for the Spark Plan.
### Firebase CLI
To make maximum use of Firebase, we will need to download its command line tools or CLI. To install type:
```yarn global add firebase-tools```
To verify that the tools have been installed correctly install type:
```firebase --version```
It should respond with the version number.
### Summary
Now we have all of our development tools installed and are ready to begin developing React applications.

Thursday, October 19, 2017



To maximize our time together for learning Node.js, please take care of the following before the workshop. The total time to install the software should be about 60 minutes. 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 using JetBrains' WebStorm. If you are accustomed to a different IDE please feel free to use it. Keep in mind, that I won't know how to use your IDE. WebStorm is a paid application but has a free 30-day trial.
  2. Install Git
    1. We will be using git for the workshop. The latest version is 2.14.2. 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 earlier than 8.0.0, please upgrade. I will be using node version v8.6.0. The easiest way to upgrade Node.js is to install the version that you'd like to use. For advanced students using nvm, brew, or chocolatey, I am aware of these tools, but they each introduce more complexity.
  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. 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.
  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. Heroku CLI
    1. We will also need to install Heroku's command line interface, or CLI. This will allow us make and manager Heroku apps from the command line.  
  8. MongoDB
    1. We will use MongoDB to hold our data, but we will not install the data locally. Instead we will access it remotely at mLab. We will still need to install the MongoDB CLI.
  9. 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.

Thursday, August 24, 2017

React Native Installation Notes

Our goal is to complete a small React Native app by the end of the day. We will use Facebook's react-native-cli speed up our development. In this workshop, we will only build Android apps, but all of our code is iOS compatible.

Install Chrome
Debugging React Native can be challenging. The built-in developer tools allow us to debug remotely via Chrome; this is a huge time saver. Install Chrome at:
https://www.google.com/chrome/browser/desktop/index.html

Install Git
The latest version of Git is 2.14.1. If have it already, but your version is older than 2.6, please update it. Git is free.
http://git-scm.com/downloads

Install React Native
Facebook has written complete installation notes. Be sure to select "Building Project with Native Code," Android and your development OS.

https://facebook.github.io/react-native/docs/getting-started.html

Be sure to follow all of the installation notes including building a virtual device aka simulator. We will need a simulator to run our apps in the workshop. 

Tuesday, April 11, 2017

Angular Application Testing Installation Notes

To maximize our time together learning to test Angular applications, please take care of the following before the workshop. The total time to install the software should be less than 30 minutes. 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 7.0.0, please upgrade. I will be using node version 7.7.0.
  4. Upgrade npm
    1. NPM comes with node.js but the version installed is usually out of date with the current release. I will be using version 4.1.2. 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. You must use at version 1.0.0. Please don't use any beta version they will not have the features I will be using.
    2. npm install -g  @angular/cli

The code and slides won't be finished until the morning of the class but I've listed their URLs below.The slides are at: https://www.slideshare.net/rockncoder/angular-application-testing

The code at: https://github.com/Rockncoder/gh-stars-testing
The repo is at: https://github.com/Rockncoder/gh-stars-testing.git

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.