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:
- npm - a package manager (installed from nodejs.org), lets you fetch freedom.js and related modules/dependencies/tooling
- grunt - a task runner, facilitates linting, building, testing, and deploying projects
- … (TODO testing, maybe alternatives like gulp, etc.)
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!