Skip to content

Instantly share code, notes, and snippets.

@davidmason
Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidmason/17943e04f02dfb8a85f8 to your computer and use it in GitHub Desktop.
Save davidmason/17943e04f02dfb8a85f8 to your computer and use it in GitHub Desktop.
Preparation for campjs talk "Packaging CommonJS for the browser: Webpack and Browserify"

If you just want to watch the talk, you don't need anything. If you want to follow along or play around with webpack and/or browserify at the camp, I recommend preinstalling the following before setting out.

Preinstallation

Just in case the npm mirror is not available at the camp, you can preinstall the following if you want to play around with browserify and webpack:

install nodejs

nodejs is the runtime on which webpack and browserify run (just in case youmanaged not to hear about it somehow)

nodejs: http://nodejs.org/

The experience on linux can be a bit below-par (global module install requires elevated permissions). This is what I do to get it installed and working nicely on my RHEL6 box: gist: Simple node setup on RHEL6. It should work for Centos/Fedora, and may work for other distros.

install webpack and browserify

Webpack and Browserify should be installed globally so you can use them on the command line. They are nodejs modules, so they are installed using npm ("node package manager", or "nice people matter" - whichever you prefer). To install a module globally, use the -g flag:

npm install -g webpack
npm install -g webpack-dev-server
npm install -g browserify
npm install -g beefy

install git

Many systems will already have git installed. Check if it is already installed by running git --version.

If you don't have git, install it. I'll defer to github for install instructions (I presume they know a thing or two more about git than I do): https://help.github.com/articles/set-up-git

get the project for the talk

Repository: https://github.com/davidmason/work-life

This is the project in which I have been messing around with webpack and browserify, so it should have all the modules you would need to copy what I'm doing.

To clone on command line, run git clone https://github.com/davidmason/work-life.git. This will download all my code and configuration to a directory called 'work-life'. You can also download a zip from the github page.

Update the clone just before you head to camp (sync or run git pull from the 'work-life' directory), since I'll likely be tinkering with it continuously. You can grab the latest from me at the camp if I make any big changes after Thursday night.

get all the other required modules

The git repository does not include all the libraries needed to bundle and run the project. The libraries are specified in the package.json file in the 'work-life' directory.

Run npm install in the work-life directory to download all the modules used by the project. The modules will download into a node_modules directory.

Make sure it works

If you've done all the above steps, you should be able to bundle and run the project. To bundle, run webpack in the work-life directory. Once that is done, just open index.html in a browser (chrome or firefox are more likely to work properly) and you should see some shapes moving, and some numbers.

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