jig-framework
Version:
Start building JavaScript apps fast with Bootstrap, React, Mocha, Chai, and Gulp
104 lines (92 loc) • 3.48 kB
Markdown
# 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`](https://nodejs.org/).
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](https://github.com/lcreid/jig/wiki)
after you run the instructions below:
```bash
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:
```bash
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
```bash
./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:
```bash
./node_modules/.bin/gulp watch
```
# Web Server
To run a test web server,
installed locally:
```bash
./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:
```bash
http-server
```
# React Developer Tools
Facebook has Chrome and Firefox extensions for React development.
You probably want to download the [Chrome React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi),
or the [Firefox React Developer Tools](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/).
# 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:
```bash
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:
```bash
sudo ln -s /usr/bin/nodejs /usr/bin/node
```