Menu icon Foundation
Javascript in new Project

Using the "foundation new" command in the CLI for a basic site template explains nicely how I use my _custom.scss to write to the app.css.

What I haven't found though is the best way how to include Javascript in the project. I see there's a js/app.js, but what does that do exactly? And what's best practice to get the foundation.js and jquery (i see all these folders in my bower folder that comes with the new project) in my project?

javascriptnew project

Using the "foundation new" command in the CLI for a basic site template explains nicely how I use my _custom.scss to write to the app.css.

What I haven't found though is the best way how to include Javascript in the project. I see there's a js/app.js, but what does that do exactly? And what's best practice to get the foundation.js and jquery (i see all these folders in my bower folder that comes with the new project) in my project?

Rafi Benkual 10 months ago

You can add all you custom js into the app.js. It is a single file where js is concatenated from.

Example: 

Dustin 10 months ago

Rafi, what about adding a jQuery plugin like DataTables? Based on the documentation it seems like I should be able to just place that in the js folder and it will get compiled in the app.js.. but that is not happening. I've also tried adding "import './lib/datatables.min';" to the app.js file and that just throws this error when I run foundation watch...

 

Error in plugin 'webpack-stream'
Message:
    ./src/assets/js/lib/datatables.min.js
Module not found: Error: Can't resolve 'datatables.net' in '/Applications/MAMP/htdocs/ezdesign/src/assets/js/lib'
resolve 'datatables.net' in '/Applications/MAMP/htdocs/ezdesign/src/assets/js/lib'
  Parsed request is a module
  using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./src/assets/js/lib)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./src/assets/js/lib)
    resolve as module
      /Applications/MAMP/htdocs/ezdesign/src/assets/js/lib/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/ezdesign/src/assets/js/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/ezdesign/src/assets/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/ezdesign/src/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/node_modules doesn't exist or is not a directory
      /Applications/MAMP/node_modules doesn't exist or is not a directory
      /Applications/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Applications/MAMP/htdocs/ezdesign/node_modules
        using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./node_modules)
          using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./node_modules/datatables.net)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net.json doesn't exist
            as directory
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net doesn't exist
[/Applications/MAMP/htdocs/ezdesign/src/assets/js/lib/node_modules]
[/Applications/MAMP/htdocs/ezdesign/src/assets/js/node_modules]
[/Applications/MAMP/htdocs/ezdesign/src/assets/node_modules]
[/Applications/MAMP/htdocs/ezdesign/src/node_modules]
[/Applications/MAMP/htdocs/node_modules]
[/Applications/MAMP/node_modules]
[/Applications/node_modules]
[/node_modules]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net.js]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net.json]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net]
 @ ./src/assets/js/lib/datatables.min.js 1926:47-1928:4 1969:47-1971:4 2074:47-2076:4
 @ ./src/assets/js/app.js
 @ multi ./src/assets/js/app.js./src/assets/js/lib/datatables.min.js
Module not found: Error: Can't resolve 'datatables.net-zf' in '/Applications/MAMP/htdocs/ezdesign/src/assets/js/lib'
resolve 'datatables.net-zf' in '/Applications/MAMP/htdocs/ezdesign/src/assets/js/lib'
  Parsed request is a module
  using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./src/assets/js/lib)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./src/assets/js/lib)
    resolve as module
      /Applications/MAMP/htdocs/ezdesign/src/assets/js/lib/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/ezdesign/src/assets/js/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/ezdesign/src/assets/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/ezdesign/src/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/node_modules doesn't exist or is not a directory
      /Applications/MAMP/node_modules doesn't exist or is not a directory
      /Applications/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Applications/MAMP/htdocs/ezdesign/node_modules
        using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./node_modules)
          using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./node_modules/datatables.net-zf)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-zf doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-zf.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-zf.json doesn't exist
            as directory
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-zf doesn't exist
[/Applications/MAMP/htdocs/ezdesign/src/assets/js/lib/node_modules]
[/Applications/MAMP/htdocs/ezdesign/src/assets/js/node_modules]
[/Applications/MAMP/htdocs/ezdesign/src/assets/node_modules]
[/Applications/MAMP/htdocs/ezdesign/src/node_modules]
[/Applications/MAMP/htdocs/node_modules]
[/Applications/MAMP/node_modules]
[/Applications/node_modules]
[/node_modules]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-zf]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-zf.js]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-zf.json]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-zf]
 @ ./src/assets/js/lib/datatables.min.js 2365:47-2367:4
 @ ./src/assets/js/app.js
 @ multi ./src/assets/js/app.js./src/assets/js/lib/datatables.min.js
Module not found: Error: Can't resolve 'datatables.net-responsive' in '/Applications/MAMP/htdocs/ezdesign/src/assets/js/lib'
resolve 'datatables.net-responsive' in '/Applications/MAMP/htdocs/ezdesign/src/assets/js/lib'
  Parsed request is a module
  using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./src/assets/js/lib)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./src/assets/js/lib)
    resolve as module
      /Applications/MAMP/htdocs/ezdesign/src/assets/js/lib/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/ezdesign/src/assets/js/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/ezdesign/src/assets/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/ezdesign/src/node_modules doesn't exist or is not a directory
      /Applications/MAMP/htdocs/node_modules doesn't exist or is not a directory
      /Applications/MAMP/node_modules doesn't exist or is not a directory
      /Applications/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Applications/MAMP/htdocs/ezdesign/node_modules
        using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./node_modules)
          using description file: /Applications/MAMP/htdocs/ezdesign/package.json (relative path: ./node_modules/datatables.net-responsive)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-responsive doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-responsive.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-responsive.json doesn't exist
            as directory
              /Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-responsive doesn't exist
[/Applications/MAMP/htdocs/ezdesign/src/assets/js/lib/node_modules]
[/Applications/MAMP/htdocs/ezdesign/src/assets/js/node_modules]
[/Applications/MAMP/htdocs/ezdesign/src/assets/node_modules]
[/Applications/MAMP/htdocs/ezdesign/src/node_modules]
[/Applications/MAMP/htdocs/node_modules]
[/Applications/MAMP/node_modules]
[/Applications/node_modules]
[/node_modules]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-responsive]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-responsive.js]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-responsive.json]
[/Applications/MAMP/htdocs/ezdesign/node_modules/datatables.net-responsive]
 @ ./src/assets/js/lib/datatables.min.js 2365:47-2367:4
 @ ./src/assets/js/app.js
 @ multi ./src/assets/js/app.js
Details:
    domain: [object Object]
    domainThrown: true
[15:39:22] 'build' errored after 9.57 s
[15:39:22] 'default' errored after 9.57 s
Error: foundation-zurb-template@1.0.0 start: `gulp`
Exit status 1
    at EventEmitter.<anonymous> (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/lifecycle.js:217:16)
    at emitTwo (events.js:125:13)
    at EventEmitter.emit (events.js:213:7)
    at ChildProcess.<anonymous> (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/spawn.js:24:14)
    at emitTwo (events.js:125:13)
    at ChildProcess.emit (events.js:213:7)
    at maybeClose (internal/child_process.js:887:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:208:5)

 

Pieter Wensveen 9 months ago

Thanks for the reply's.

Like I said I installed a Foundation project through CLI.

This automaticly creates the Gulp file for writig and converting my SCSS to CSS app.css.

But this doenst seem to be the case for my app.js.

napishu 9 months ago

https://www.sitepoint.com/getting-started-with-foundation-6s-cli-tools/

 

foundation new --framework sites --template zurb

Niall Horan 8 months ago

Wish I had found this earlier. Great step-by-step guide. This should be included in the docs.  Private Limited Company Registration Services