Skip to content

Instantly share code, notes, and snippets.

@robpataki
Last active February 19, 2017 10:43
Show Gist options
  • Save robpataki/686383a96f3b30ded7ebd2489b87cb8e to your computer and use it in GitHub Desktop.
Save robpataki/686383a96f3b30ded7ebd2489b87cb8e to your computer and use it in GitHub Desktop.
README file for any project using Webpack and Yarn for asset precompilation and module bundling (OS X only for now)

README file for any project using Webpack 2 and Yarn for asset precompilation and module bundling

Please note, the installation instructions are for OS X only for now. I will update the document as soon as I can to help with Windows/Linux installations too.

Project setup

For the JS assets precompilation we use Webpack 2. To be able to run webpack you'll need a few things to install on your machine, but don't worry, it should be quick and I tried my best to help you with a step by step guide below. Let's start!




If you have Node and Yarn installed...

Install dev dependencies

Yay, you're sorted! To install all developer dependencies, just run

$ yarn

Which installs the NPM dependencies the project requires (as defined in the package.json file).

Precompiling assets for production

The following command will precompile the JavaScript modules ready for production - all modules are bundled into 1 JS file, minified and uglified.

$ yarn build

Precompiling assets for development

$ yarn dev



If you haven't Node and Yarn installed

Install NVM

First of all, let's install Node on your machine! We'll use NVM:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

More info about NVM: https://github.com/creationix/nvm

You can also install Node using a download-and-click installer, which you can find here. Based on my past experience when it comes to updating/upgrading Node or NPM versions it is more difficult this way - especially when you have differrent projects with different Node versions, so if you can avoid this solution and stick with NVM.

Install Homebrew

The easiest way to install Yarn is with Homebrew (an Mac OSX package manager).

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

More info about Homebrew: https://brew.sh/

Install Yarn

Node comes with NPM out of the box, but unfortunately it's been proven that when it comes to installing packages consistently across multiple machines, NPM isn't doing a great job. Long story short, Yarn will make sure that

Developer A's installed NPM packages (and their deps) = 
Developer B's installed NPM packages (and their deps) =
Developer N's installed NPM packages (and their deps).

And Yarn is crazy fast!

So to install Yarn on your machine:

$ brew update
$ brew install yarn

More about Yarn: https://yarnpkg.com

If you know how NPM works, here is a great Yarn vs. NPM cheat sheet: https://shift.infinite.red/npm-vs-yarn-cheat-sheet-8755b092e5cc


Document Info

Last Review

Rob Pataki - 19/02/2017

To do

  • Add installation instructions and links to Windows users
  • Add installation instructions and links to Linux users
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment