This series of articles will walk you through the core concepts of creating an open web app. It aims to teach you the fundamentals of modern web app development and get you up to speed quickly, introducing a recommended tool chain and techniques for common app features as you go.
Most of the techniques we describe throughout this guide apply to open web apps generally, so are platform-agnostic. Along the way, we will also introduce you to some additional tooling and concepts for building Firefox OS apps. Firefox OS Apps are simply open web apps that run on Firefox OS, and are built using standard web technologies — for much more information on developing Firefox OS apps, see Installable apps for Firefox OS.
Note: If you are looking for a quickstart guide to creating Firefox OS apps, including what's needed and how they differ from regular open web apps (it used to live at this URL), please see our Firefox OS app essentials guide.
Mozilla recommended tool chain
- The Framework: Ember.js
- The Tooling: Ember CLI
- Because we are recommending Ember as the application framework, we can take advantage of the Ember CLI command line tool to handle some of the more repetitive and tedious development tasks. This command line tool will help you generate blueprints for your application, and concatenate, build and minify your files to make them production-ready.
- The Libraries
Is this tool chain for me?
The emphasis here should be on "recommended": we aren't trying to promote a specific set of tools for any other reason than pragmatism. We aren't trying to say that you shouldn't try other tools, or that our choices are the best for everyone. If you already have web app development experience you'll probably already have your favorites. If, however, you're just getting started with building complex modern web applications, have been frustrated by the sheer number of choices available, and just want a tool chain that works, these guides are for you.
Additionally, while you don’t need to know Ember, some previous knowledge would be useful. We will explain basic Ember concepts along with code examples later in this guide, but more comprehensive documentation can be found at http://emberjs.com/.
To get started with the Mozilla recommended tool chain, you need to use a terminal or command prompt on your given platform (Mac, Linux, or Windows) to install and use Ember and Ember CLI:
- Ember CLI requires Node.js. Go here to download and install Node before continuing on to the next steps.
- Open your Terminal or Command Prompt
Install Ember CLI using the node package manager (NPM):
npm install -g ember-cli
To confirm that your installation is successful, type:
- I don't know where my terminal/command line tool is!
- Every operating system has a command line tool by default. See this set of instructions.
- My NPM permissions are causing an error!
If you get an error about permissions and are on Linux, Mac OS X, or another flavor of Unix, you may have issues with the ownership of your .npm directory. We'll add some suggested solutions here soon. We strongly encourage people not to use the
sudocommand with npm, as packages can execute arbitrary scripts.
In the next section of the quickstart, we will use our newly-installed Ember CLI tool to generate a skeleton application structure that we can start to work with.