Skip to content

Instantly share code, notes, and snippets.

@hallettj
Last active August 29, 2015 14:17
Show Gist options
  • Save hallettj/f9c8415a97263a977f2d to your computer and use it in GitHub Desktop.
Save hallettj/f9c8415a97263a977f2d to your computer and use it in GitHub Desktop.
JavaScript development quickstart

Quickstart

Get a development environment and project scaffold set up in a jiffy.

Development environment

First install node and npm. There are instructions here:

http://blog.nodeknockout.com/post/65463770933/how-to-install-node-js-and-npm

Install git too:

https://help.github.com/articles/set-up-git/

Then install Yeoman. Yeoman is a useful tool for generating project scaffolding:

http://yeoman.io/codelab/setup.html

Finally, make sure you have a text editor installed. If you don't have a preference, try Atom. It is cross-platform, and has good support for JavaScript:

https://atom.io/

Project scaffold

Find a yeoman generator appropriate for you project from:

http://yeoman.io/generators/

Here are some suggestions:

The README for each generator provides some instructions on how to use it.

Install your chosen generator. For example, if you picked 'generator-react-webpack':

$ npm install --global generator-react-webpack

(You might need to use sudo with that command.)

Create a project directory, cd into it, and run the generator:

$ mkdir my-project
$ cd my-project
$ yo react-webpack my-project

Running your project

To start a local web server for testing your project run:

$ grunt serve

While that command is running, it will watch your code for changes, and automatically rebuild.

You can view your project in a browser by navigating to:

http://localhost:8000/

Writing code

The source for your project will be in src/. When you open http://localhost:8000, what you see will be src/index.html.

If you used the 'react-webpack' generator, then the main code for your application will be in src/scripts/components/main.js and in src/scripts/components/MyProjectApp.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment