foundation-apps: command not found

[maddymail]

@kezzbracey

Going through the tutorials on https://webdesign.tutsplus.com/courses/up-and-running-with-foundation-for-apps/

did changes to the gulp file, to have the BrowserSync Functionality, I guess they updated the gup file in the new version.

So after googling how to have browserSync, I added/replaced these lines in my gup file

var browserSync = require(‘browser-sync’);
_var reload = browserSync.reload; _

// Starts a test server, which you can view at http://localhost:8080
// gulp.task(‘server:start’, function() {
// $.connect.server({
// root: ‘./build’,
// middleware: function() {
// return [
// modRewrite([’^[^\.]*$ /index.html [L]’])
// ];
// },
// });
// });

gulp.task(‘server:start’, function() {
_ browserSync({_
_ open: false,_
_ notify: false,_
_ server: {_
_ baseDir: ‘./build’,_
_ middleware: [_
_ modRewrite([’^[^\.]*$ /index.html [L]’])_
_ ]_
_ }_
_ });_
});

// Builds your entire app once, without starting a server
gulp.task(‘build’, function(cb) {
_ sequence(‘clean’, [‘copy’, ‘copy:foundation’, ‘sass’, ‘uglify’], ‘copy:templates’, cb);_
});

// Default task: builds your app, starts a server, and recompiles assets when they change
gulp.task(‘default’, [‘server’], function () {
_ // Watch Sass_
_ gulp.watch([’./client/assets/scss//*’, './scss//*’], [‘sass’,reload]);_

_ // Watch JavaScript_
_ gulp.watch([’./client/assets/js//*’, './js//*’], [‘uglify:app’,reload]);_

_ // Watch static files_
_ gulp.watch([’./client//.’, '!./client/templates//.’, ‘!./client/assets/{scss,js}/**/.’], [‘copy’,reloads]);_

_ // Watch app templates_
_ gulp.watch([’./client/templates/**/*.html’], [‘copy:templates’,reload]);_
});

on trying to start my instance i get this error :
MacBook-Pro-2:TaskManager shishirrawat$ foundation-apps watch
-bash: foundation-apps: command not found

[kezzbracey]

EDIT: It looks like they’ve updated their “Getting Started” page but not their docs.

http://foundation.zurb.com/apps/getting-started.html

It seems the command has indeed changed to foundation rather than foundation-apps, and it says to use npm start in place of foundation-apps watch.

So the rest of my post below the line may be irrelevent.

Can you please try these commands instead and let me know so I can organize a note to be added to the course?

---

Hi @maddymail,

Let’s run through a couple of things to isolate the issue.

First up, if you run the command without making modifications to the gulpfile does it work? If it still doesn’t work we can assume it’s something about the Foundation install.

If it was a problem with your gulpfile I’d expect an error other than the system not being able to find the foundation-apps command, but you never know.

Were you able to use the foundation-apps command succesfully to create a new project?

I did find this GitHub issue where people had to create an alias in order for the command to work: https://github.com/zurb/foundation-apps/issues/718

Later in that issue though, someone says the command changed to foundation. The docs still say to use foundation-apps but perhaps they aren’t updates, so trying foundation instead is something you could attempt.

The Github repo’s README on the other hand suggests using npm start.

[maddymail]

Thats right foundation new myApp did the trick to create a new project and foudnation watch runs the server, not need to do npm start

thanks Kezz

[kezzbracey]

Good to know, thanks!

[maddymail]

However the gulp.file update issue is still there. They have changed the file I added codes as suggested above and I am getting this error

[02:12:43] Using gulpfile ~/Misc/MyStartup/FoundationTutorial/NewPrj/TaskManager/gulpfile.js
[02:12:43] Task ‘server’ is not in your gulpfile
[02:12:43] Please check the documentation for proper gulpfile formatting
Error: foundation-apps-template@1.2.0 start: gulp
Exit status 1
at EventEmitter. (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/lifecycle.js:217:16)
at emitTwo (events.js:106:13)
at EventEmitter.emit (events.js:191:7)
at ChildProcess. (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/spawn.js:24:14)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:877:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

[kezzbracey]

Does everything work successfully with an unmodified Gulpfile?

You may not need to manually integrate BrowserSync anymore.

I’m trying to find out but haven’t locate any clear information on the topic as yet.

[kezzbracey]

Okay yeah I just confirmed, you don’t need to manually integrate BrowserSync anymore, live reload is built in.

So you can just skip the part on BrowserSync, use foundation watch and you should be all good to go.

I’ll ask about adding a note to the course for future reference.

Thanks for bringing this to my attention!

[maddymail]

Thanks for the help kezzy, one more thing, what would be the browserSync External URL, the URL is not provided when I execute the “foundation watch” however when I start the server from “npm start” I see the web server getting started at my localhost

[20:18:13] Webserver started at http://localhost:8079
[20:18:13] Finished ‘server’ after 260 ms

but no external server is provided to view the development in other devices. The localhost link is not accessible for my other devices.

[kezzbracey]

Hi maddymail,

I’m afraid I don’t have the answer for you on the IP address to use instead of localhost for network previewing, I did look into it for you but I don’t know unfortunately. That might be something you’d be able to get help from Foundation on.

I did however get the address http://localhost:8079 from running foundation watch myself.

You can always test your builds on other devices once finished by using Prepros.

[maddymail]

Hi Kezzy,

I am new to web design so I might seem a little nit-picky, however the content of most files have changed in the new version, so following your tutorial step by step sometime is hard and as content from pages have been modified.

Example : the old index.html contains
div class=“grid-container”>
div ng-class="[‘ui-animation’]" ui-view>

However the new file only has
div ui-view class=“grid-content”>

There are few more changes in the template files, As I am just starting out with the sessions its a bit easy to handle, however I am not sure if that would be possible going deeper in the lessons.

Could you please help in updating the video if possible, which I understand may not be immediately possible.

[maddymail]

I am right now at lesson 3.4 Motion UI. ON adding the the first motion UI to Fade, the Animations are moving from Navigation, and are slow. Kindly Help

@kezzbracey please respond.

[kezzbracey]

Hi maddy, I’m actually on a break at the moment, apologies for the delay.

I’ve let Ian, the manager of the web design courses, know the course needs updating but he’s also on a two week break at the moment.

Re slow animations, that sounds like something that would be happening on the Foundation side of things, or perhaps a browser issue handling things poorly. Can you try it on a few different browsers, and ideally devices, to see if it happens everywhere?

Perhaps also try some of the animations on the Foundation docs site and see if they’re slow for you http://foundation.zurb.com/sites/docs/motion-ui.html

In the course all we’re really doing is telling Foundation which animation we want to use, and it’s handling everything in the background. So the problem is there’s really not too much that can be tweaked.