scott-ad-riley/file.md

## file.md

      
    Raw
  

              file.md
            
          
    #Javascript Project Setup/Docs
##Stuff Covered Here

Webpack
Express
Mocha
Chai
Lodash

##Webpack
###Overview

Short Description/Name: Module Bundler
Install command: npm install webpack --save-dev
Purpose: Used to let you write require('./my_code.js') for your client side js
Installed from NPM inside a directory that you would typically have a src/ and build/ folder in
Needs to be installed globally to access use the command webpack from the terminal

###Setup

When you need to bundle some files, create a single file inside of src/ (typically called index.js or main.js)
At the same level as your package.json, create a webpack.config.js (it must have that name)
Inside of the webpack.config.js, create and export out an object with the following basic content:

  config = {
    entry: "./src/index.js",
    output: {
      filename: "bundle.js",
      path: "./build"
    },
    devtool: 'source-map'
  };
  module.exports = config;

As you add more complexity and levels to your webpack setup, the more you add to this file
Inside your target source (src/index.js or src/main.js) file, you can require other npm packages (like lodash) and also your other javascript files inside of src/

###Usage

To run/execute your webpack config file, run webpack

for the setup above, this means look at our entry file, go through all the requires in that file (and all the requires in those files, and so on)
it will then combine these all together for us, and create a file called bundle.js in our build/ folder


As a more usable command, run webpack -w

This will watch all files inside your project (note: confirm this) and whenever one changes, it will essentially "re-execute" the webpack command


###Common Problems

If this errors, with something like "webpack command not found", try running npm install -g webpack to add the webpack command to your terminal
If you run webpack and it prints out all of the different options/flags for the webpack command, this is webpack's way of telling you it didnt know what to do. It likely means you have run webpack from a place where you have not created a webpack.config.js. So run a quick ls to see if you have misspelled it, or you may be in a different directory from your file.

##Express
###Overview

Short Description/Name: Web Server/Framework
Install command: npm install express --save
Purpose: Runs a webserver on your laptop (Very similar to Sinatra in Ruby)
Installed from NPM inside a directory that you would typically have a public/ or client/ folder in, and also possibly server.js file

###Setup

Create a server.js file in the same level as your package.json
Inside that file, paste and save the following content, updating where commented :

  var express = require('express');
  var app = express();
  var path = require('path')

  app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/client/build/index.html')); // change this to the path to the index file you want to serve
  });

  app.use(express.static('client/build')); // replace the folder here with your public or 'asset' folder

  var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);
  });
###Usage

Run node server.js from the same directory as your server.js
(will update when we cover it more in class)

##Mocha
###Overview

Short Description/Name: Test Runner/Framework
Install command: npm install mocha --save-dev
Purpose: Runs your tests and displays the output for you
Installed from NPM inside a directory that you would want to write some tests (so typically a specs/ folder in there too)
Typically installed with chai, an assertion library

###Setup

After running the npm install command above, you would typically create a spec folder and create some spec files inside of it with the following content:

  var myModelToTest = require('../my_model_to_test.js');

  describe('My Model', function(){
    it('should do something', function(){
      // test goes in here
    });

  });

Another common thing to do is to add the command to run your tests into your package.json, with a snippet with looks something similar to this:

  ...
  "scripts": {
    "test": "mocha path/to/spec/folder/"
  },
  ...
###Usage

To run your tests, you can just write mocha path/to/spec/folder or mocha path/to/spec/file.js
Alternatively, if you added the package.json snippet above, you can run npm test to execute the command you added in there

###Commond Problems

If, when you run your tests you get back describe is not defined, make sure that you are running tests using the command mocha and not node

##Chai
###Overview

Short Description/Name: Testing Assertion Library
Install command: npm install chai --save-dev
Purpose: Gives you more flexibility with different assertions (see: http://chaijs.com/api/assert/)
Installed from NPM inside a directory that you would want to write some tests (so typically a specs/ folder in there too)
Typically installed with mocha, a test runner

###Setup

Assuming you already have mocha (or another test runner) installed. Add a var assert = require('chai').assert; at the top of your spec files

###Usage

You can now write assertions using the chai library inside of your test functions:

  var myModelToTest = require('../my_model_to_test.js');

  describe('My Model', function(){
    it('should do something', function(){
      assert.equal(3, 3);
    });

  });

Check out the chai docs for any other assertions you can use (http://chaijs.com/api/assert/)

###Common Problems

If you are comparing to objects in javascript, your assertions will return that they are inequal, even if the properties inside of them are equal. To fix this use the assertion method deepEqual (assert.deepEqual(testObj, resultObj)), which will go through and compare each of the key value pairs inside the object instead (taking a performance hit - so use only when comparing objects).

##Lodash
###Overview

Short Description/Name: Utility Function Library
Install command: npm install lodash --save
Purpose: Gives you a lot of extra functions (particularly for arrays and objects) you can use (see https://lodash.com/docs)
Installed from NPM inside a directory that contains the code you need to run (can be either server-side or client-side js)

###Setup

After running the npm install command above add the line var _ = require('lodash'); to the top of your file

###Usage

Use any of the functions as methods on an object in the variable "_"