UNPKG

jig-framework

Version:

Start building JavaScript apps fast with Bootstrap, React, Mocha, Chai, and Gulp

104 lines (92 loc) 3.48 kB
# 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 ```