node package manager

jig-framework

Notes Setting Up a JavaScript Development Environment

The Jig framework sets up a decent front-end development environment quickly. It sets you up to use:

  • Bootstrap for the formatting and layout
  • React for the page code
  • Vanilla JavaScript and JSX for React
  • Gulp to manage the transpiling. You can leave Gulp running in one window. It watches for changes to files that you've told it to watch, and it automatically transforms them every time they change
  • A simple web server so you can see your work
  • Mocha as the test framework, and Chai as the assertion library for testing
  • Browserify to package everything for the browser

You need to have node.js and npm installed to manage the modules, and run the tests.

Quick Start

Install node.js.

If you're an experienced front-end web developer and just want to use Jig to get running fast, follow the instructions below. If you're not an experienced front-end web developer read the Jig wiki after you run the instructions below:

git clone https://github.com/lcreid/jig.git my-new-project
cd my-new-project
npm install

In the near future, you should be able to do:

mkdir my-new-project
cd my-new-project
npm install jig-framework

Both of the above are "local installs", meaning everything goes in your project directory and nothing is available globally. The advantage of this approach is that it's easier to work on multiple projects that need different versions of packages. The disadvantage is that you have to type long command names sometimes, and you have to wait for the packages to install for each new project.

Code Organization

  • Put the tests in a sub-directory called test. That's the Mocha default
  • Put the source in a sub-directory called src.
  • The output will be put in a sub-directory called public. That's where the test server looks for files by default

Running Tests

./node_modules/.bin/gulp test

If you're running gulp watch, it will also run the tests after any file changes.

Automatic Builds

The languages and frameworks supported by Jig require translation (transpiling) to work from a browser. To automatically transpile your files every time you change or add a file:

./node_modules/.bin/gulp watch

Web Server

To run a test web server, installed locally:

./node_modules/.bin/http-server

By default, the server listens on port 8080, so point your browser to http://localhost:8080. It gets files from ./public.

If you installed the Jig framework globally:

http-server

React Developer Tools

Facebook has Chrome and Firefox extensions for React development. You probably want to download the Chrome React Developer Tools, or the Firefox React Developer Tools.

Notes for Mint/Ubuntu

Using the LTS versions puts you a long ways behind in JavaScript time. With Mint 17/Ubuntu 14.04, I had to uninstall node.js from the regular repository, and install it from:

sudo apt-add-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

If you're setting up Node on a Debian-derived distribution, you need to create a link to make your system work like all the documents you'll see:

sudo ln -s /usr/bin/nodejs /usr/bin/node