Menu icon Foundation
Trying to incorporate FFApps into Existing project "What do I need to Know "

Need help,

I'll open by saying I'm new to foundation for apps but I like what I see so far. However I'm having real problems integrating it into my current node project. Typically all I do to add a new framework to my projects is include the framework sass and .js files and work away but that's not the case with foundation for apps. Could somebody supply some guide lines or requirements as to what is required to successfully incorporate foundation for apps into a project easily.
Below is the error I'm having after including the sass file.
Any help would be greatly appreciated

Error

Need help,

I'll open by saying I'm new to foundation for apps but I like what I see so far. However I'm having real problems integrating it into my current node project. Typically all I do to add a new framework to my projects is include the framework sass and .js files and work away but that's not the case with foundation for apps. Could somebody supply some guide lines or requirements as to what is required to successfully incorporate foundation for apps into a project easily.
Below is the error I'm having after including the sass file.
Any help would be greatly appreciated

Error
Erik M over 4 years ago

It is certainly possible to incorporate into a project like the one you described. There are just a few items to make sure it works.

  1. Modify the gulpfile to match your file structure. You will need a set of files for editing that is different than the files you distribute. They are specified as 'client' and 'build' in a regular foundation for apps gulpfile.
  2. Add foundation-apps to both the package.json and the bower.json
  3. Run npm install && bower install
  4. Include all the js files

The best way to get it working in your circumstances is to spend time looking at the gulpfile, and ensuring each dependency gets properly placed in the destination directory. They do not have to be concatenated together into a single file the way they are by default, but they do all need to be included in the index.html. Specifically, each angular dependency is pulled from bower_components and placed in the app.js file. You could instead pipe each of these into the distribution directory and individually include them. It's not as clean of an approach because you have to make a new http request for each js file individually, but it can be a little easier to understand.

Long story short, you can add it to a project by adding the foundation-apps dependency to bower.json, and package.json. Step two is customizing the gulpfile to fit the directory structure of your project, and ensuring each dependency gets placed in the appropriate location.

  • You don't technically need a client and build folder (source and distribution). It's just a cleaner way to develop an app.

stephen freir over 4 years ago

Thanks for the detailed run through Eric, much appreciated.

From your answer I am getting the sense that foundation is not meant to plug into a project but rather a project has to be adapted to work within the foundation skeleton. Is this correct?

I'm working with a large project which we hoped to incorporate foundation into it .
It's unrealistic for us to start from scratch so we tried loading the following items into the header manually.

I haven't managed to get this working yet. Is this or a similar method possible or do you feel we are fighting a losing battle?

Erik M over 4 years ago

Hey Stephen,

So the trick to adding Foundation for Apps to a project is usually to create it AS a foundation for apps project. The easiest way to do that right now is the CLI, although the steps to do it manually can be located here: https://github.com/zurb/foundation-apps . To paraphrase:

bower install foundation-apps --save
npm install foundation-apps --save

I would also recommend using the gulpfile.js located here: https://github.com/zurb/foundation-apps/blob/master/gulpfile.js

If you use that gulpfile, you must ensure you have the same css and javascript includes in the head as are shown here: https://github.com/zurb/foundation-apps/blob/master/index.html. Basically all of the angular, and other dependencies are combined by the gulp task into the files included below.

<link href="./assets/css/app.css" rel="stylesheet" type="text/css">
<script src="./assets/js/foundation.js"></script>
<script src="./assets/js/templates.js"></script>
<script src="./assets/js/routes.js"></script>
<script src="./assets/js/app.js"></script>

The final step, is to ensure your folder structure is identical to what is displayed in the gulpfile. Which means that all of your files should look like this:

project/client/index.html
project/client/assets/js
project/client/assets/scss
project/client/templates/home.html

The easiest way to get all of this set up comes down to cloning the https://github.com/zurb/foundation-apps repo, installing the dependencies, and then customizing the html and css accordingly. You can download the repo, and install the dependencies manually with git clone, npm install, bower install, and then run the project with gulp. Or you can just use the CLI to do all of that for you.

I hope that helps a bit. If I was you I would clone the repo, run the bower and npm installs, and then start manually putting the code I wanted into that newly created project. (You would have to remove the .git folder and go through the process of git init if you wanted to start pushing this new project to git).