--- name: installation url: /installation title: Installation ---
Just like with Foundation for Sites, we wrote an awesome command-line tool to make setting up new Foundation for Apps projects a breeze. The CLI downloads a template project that uses Foundation, Angular, Sass, and Gulp. If you'd rather install our components into your own stack, see our advanced instructions below.
Node allows you to run JavaScript outside of a web browser, and it powers several tools we use in the development process, like Bower and Gulp.
Git is a version control system used to collaboratively develop software. The package manager Bower uses Git to download software onto your computer.
If you already have Node installed, make sure you have the newest version of npm—use npm update -g update
to update. If you already have Ruby installed, make sure you're using at least version 1.8.7.
With the above software installed, open up your command line. Start by installing the Foundation CLI, Bower, and Gulp using Node:
You now have access to the foundation-apps
command on your system! You'll use this to set up and update new projects. To build a new project, use this command:
Change myApp
to the name you'd like the folder to be. This will download our template stack, and install Foundation for Apps, Angular, and Gulp. The whole process takes between 30 seconds and a minute, depending on your Internet connection.
Once the installer is done, navigate into the directory using cd
:
Now you can build the app and begin working on it.
This will assemble all of the pieces—the Sass, JavaScript, and view templates—into a new folder called build
, which is your final app. The build process will also setup a temporary server that points to the finished app. You can get to the server by going to this URL in your browser:
http://localhost:8080
Foundation for Apps can be installed manually through Bower or npm.
The package includes these folders:
The folks at jsDeliver are hosting the Foundation for Apps CSS and JavaScript on their CDN. Just add the files as <link>
or <script>
tags in the <head>
of your HTML file.