02 - Dev Environment Setup

Quick Start

Already comfortable with modern JavaScript development? Then you can easily get started by using Yeoman:

npm install -g yo  # if you don't have yo already
npm install -g generator-freedom
mkdir my-freedom-app
cd my-freedom-app
yo freedom

Or if you prefer pulling in boilerplate with git:

git clone https://github.com/freedomjs/freedom-starter.git
mv freedom-starter my-freedom-app  # optional, rename as you wish
cd my-freedom-app

If you selected webapp template as the source for freedom.js in Yeoman or if you used the git clone approach, then you can start the demo app with ./runserver (you may need to chmod +x runserver.sh first to make it executable). If you used Yeoman and selected npm as the source for freedom.js, then the command grunt demo will start the demo app. In either case, fire up a browser and head to http://localhost:8000/build/ to see it.

If you’re set, skip ahead to how freedom.js works. Need a bit more explanation on the above? Read on!

Details

Strictly speaking, all you need to develop with freedom.js is the library itself, a browser, and a web server (for example, SimpleHTTPServer for Python 2.x). You are welcome to take this minimalist approach, though you may want to at least clone the starter git repository for boilerplate.

An arguably more convenient setup is to embrace the modern JavaScript ecosystem. There are many tools and it can be overwhelming at first, but you really just need to familiarize yourself with a few of them to get started:

freedom.js is agnostic about the tools you use, but our provided generators and scripts generally assume use of npm, grunt, TODO (tests etc.). Getting started means installing node and npm, then running a variety of npm install commands. The common tools you’ll use across projects should be installed globally (-g), e.g.:

npm install -g grunt-cli

Projects themselves can have their own package.json file that specifies dependencies, which are installed locally by simply running npm install in that directory. Once you’ve set up your project this way (and have a Gruntfile - an initial one is provided by our generator) you can run grunt -h to see the available Grunt tasks. They are run with grunt taskname, or just grunt for the default task. You can also dive into Gruntfile.js and edit or add your own tasks.

Once you have your setup to your liking, continue on and learn more about freedom.js itself!

01 - Introduction --- 03 - How freedom.js works