Screencast MEAN Stack: Firing a Tracer Bullet JavaScript

  • Carlos Souza
  • 5823 views

Comments

  1. nachofelpete said

    Just Amazing! Thanks guys...very easy to follow even for a Spanish novel coder like me! Miss more time to start typing!

  2. Rich Greenhill said

    How does import angular from "angular" know to go looking in node_modules?

  3. Faculty

    Carlos Souza said

    @Rich all import statements are transpiled to CommonJS style require statements, which are resolved by Browserify. You can check the file "gulpfile.babel.js" under the "client" folder for more details.

  4. Granville Schmidt said

    Absolutely fantastic! You guys rocked this screencast! Can't wait for Angular 2 to be out of beta and become the norm for the MEAN stack. Keep up the great work!

  5. joyjoyenjoy said

    I did not see the node_module folder after first npm install in your list, but my one has. Are there some settings for devDependencies to install those modules globally or some other reason?

  6. Faculty

    Carlos Souza said

    The node_modules folder was definitely there as part of our local environments (when we ran npm install), just not added to the GitHub repository.

  7. EnricoGi said

    very nice, but I'd have used mongoose as a driver rather than mongodb

  8. pastrop said

    great job guys! @EnricoGi, I second your comment on mongoose, there is a great tutorial on MEAN at EdX that goes into mongoose in details, I thing it is a better module, also I personally think that $scope is way, way, way better than this and controller as.....

  9. sai_1919 said

    Please help me out. I am unable to run server(app.js) getting the following error.

    let express = require("express"); ^^^ SyntaxError: Unexpected strict mode reserved word at exports.runInThisContext (vm.js:73:16) at Module._compile (module.js:443:25) at Object.Module._extensions..js (module.js:478:10) at Module.load (module.js:355:32) at Function.Module._load (module.js:310:12) at Function.Module.runMain (module.js:501:10) at startup (node.js:129:16) at node.js:814:3

    I have bundle.js in dist folder.

  10. Faculty

    Carlos Souza said

    @sai_1919 could you provide some more information about your environment (os, node version, etc.) ?

  11. sai_1919 said

    @Carlos Souza Here are my environment details OS: windows 8.1, node: v0.12.7

  12. Faculty

    Carlos Souza said

    @sai_1919 Sounds like you might need to update to a more recent version of Node.

  13. sai_1919 said

    @Carlos Souza Thanks for the help. Will try it out.

  14. Alyssa Nicoll said

    @pastrop I agree with you. I am a $scope girl at heart. However, I tried my best to make every Angular decision in this app with Angular 2 in mind. Angular 2 does not have $scope anymore, so I decided to go with controller as. Regardless of Angular 2, the Angular team has made their preferences clear — to move away from $scope. So unless I specifically need a method like $watch that only $scope can give me, I use controller as.

  15. pastrop said

    @Alyssa Nicoll, yeah this wonderous world of Angular 2 :). If you ask me it has so little in common with Angular 1 series that they might've as well called it whatever....This is my biggest problem with this entire framework: The latest release is a radical departure from the current platform. This is like learning a completely different MVC. And than there is Typescript... May be React is indeed the answer, although MEAN sounds better than MERN....

  16. Federico Sananes said

    Hi this is my log when I run npm run watch on my Olympics folder, I already npm installed gulp but that wont solve it.

    19 error node v4.3.1 20 error npm v3.8.0 21 error code ELIFECYCLE 22 error stb-mean@1.0.0 watch: gulp watch --gulpfile client/gulpfile.babel.js 22 error Exit status 1 23 error Failed at the stb-mean@1.0.0 watch script 'gulp watch --gulpfile client/gulpfile.babel.js'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the stb-mean package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error gulp watch --gulpfile client/gulpfile.babel.js 23 error You can get information on how to open an issue for this project with: 23 error npm bugs stb-mean 23 error Or if that isn't available, you can get their info via: 23 error npm owner ls stb-mean 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ]

  17. Federico Sananes said

    I am on winwdows 10, I had to install gulp by using the --global directive

  18. Faculty

    Carlos Souza said

    Yes! Good point, @Frederico. You do need to run npm install gulp -g. Just added that step to the project's README. Thanks for the heads up.

  19. Shashidhar Rao said

    During initial 20 minutes , I am seeing ["Weighlifting","Cycling"] as output when accessing end point /sports. Something to do with content-type setting, not sure how to do. Please help

  20. konstantine33 said

    What does the '=>' function do?

  21. Pablo Motta said

    Hi @Carlos Sousa or anyone that could help, for some reason my mongo db is returning an empty array like:

    Listening on PORT 8181 Connected to Mongo [] []

    when I run: curl -i localhost:8181/sports.

    I've checked everything for typos and can't find anything... any thoughts or hints on how to fix this?

  22. Pablo Motta said

    Never mind @Carlos Sousa! I found the problem. I was connected to the wrong database.. haha. You guys did a great job on this screencast! Love it! Thank you!

    Abraço mano!

  23. Christopher DEBOVE said

    Well you rocks, you three! Honestly, just finish the MEAN stack Curated content as well as some screencast on Angular and Node + Express. But i needed something more specific. Thank you!

  24. Pablo Motta said

    I was trying to deploy this app to heroku but for some reason it's not working. I've tweaked a few things like the enviroment port on the server/app.js, also added as the engine on package json and I set the Procfile file to web: server/app.js.

    Does anyone have any more hints on why the app is not working?

    Maybe because it's set up to work with MongoDB and I don't have it set up on Heroku?

    I'm kinda lost right now so anything would help.

  25. FaberRos said

    Good introduction to MEAN application, hope that is only the start of change in platform, where in add to the course there is a section dedicated for develop with tech that was explained in platform Thnks Alyssa, Carlos and Joel

  26. Nikhil Pereira said

    Superb! feeling so happy after making so much! Thank you guys!

  27. Raf Smits said

    Hi, I keep getting an error when running "npm run watch". The error I get is: /www/sites/MeanstackCodeschool/client/gulpfile.babel.js:1 (function (exports, require, module, __filename, __dirname) { import gulp from "gulp"; ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:513:28) at loader (/www/sites/MeanstackCodeschool/node_modules/babel-register/lib/node.js:158:5) at Object.require.extensions.(anonymous function) /www/sites/MeanstackCodeschool/node_modules/babel-register/lib/node.js:168:7 at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module._load (module.js:409:3) at Module.require (module.js:468:17) at require (internal/module.js:20:19) at Liftoff.handleArguments (/www/sites/MeanstackCodeschool/node_modules/gulp/bin/gulp.js:116:3)

    Can you help me please? I can't seem to find what the problem is.

  28. Raf Smits said

    I've found the solution to my problem. It appears that, by default, Babel 6.x does not perform any transformations. Which means that you need to add a file called ".babelrc" to the root of your project. This ".babelrc" file contains:

    { "presets": [ "es2015" ] }

    Correct me if I'm wrong, but this solution helped for me.

  29. Faculty

    Carlos Souza said

    That's it, Raf! Glad you found out.

  30. TerrenceR87 said

    I have a question about the .map(). We're supposed to assign docs.map() and pass in a function called sport that returns sport.name, but when was 'sport' defined as a function to be executed on each index of docs?

    Does this have something to do with the stubby arrow?

  31. Faculty

    Carlos Souza said

    Yep, this is the stubby arrow syntax. What's happening is that docs.map() takes an anonymous function as an argument, written as an arrow function. This anonymous function will be given one argument, which we decided to name sport. So sport is essentially a variable that will be assigned a a value, which we then call the name property on.

    So this docs.map((sport) => sport.name) is the same as this docs.map(function(sport) { return sport.name })

  32. TerrenceR87 said

    OHHHHH, I get it now. You just made that much more clear for me. :) Thanks a ton, and great series!

  33. Faculty

    Carlos Souza said

    Thank you!

  34. leoparis89 said

    Awsome course. I have a question regarding the use of Mongo's generated object Ids.

    Im creating my own application and I'm running in the following issue. I create obects in mongo with the following structure : {_id: ObejctId(string), name: string}. In my mongo collection, my documents have an _id of type ObjectId. These documents have to be converted to JSON to be read by my front end app. In this process the _id of my document gets converted from ObjectId to string.

    That's fine when it goes from my database to my front end app. I run into a pickle when I try to save an object in my front end app, to my mongo database. Since in my front end app the _id is a string, I have to convert it to an ObejctId in my node server... Therefore I have to do "new ObejctId()" in my Node application. This doesn't seem ideal. Is there a better way to do this ?

  35. Joel Taylor said

    @leoparis89 I remember thinking the exact same thing when I wanted to send the _id to the front-end. As far as the _id is concerned, there isn't really a way around converting the string back to an ObjectId on the server since the ObjectId is its own data type. To make things easier, you might want to consider a helper function to make it easy to do so.

    One other option would be to add an external id field to your object (with a unique index) and use that.

  36. James Williams said

    @Alyssa: Near the beginning of the work you run the command line instruction "open client/index.html'. Where does that command come from? Is it part of the Atom browser functionality?

  37. Faculty

    Carlos Souza said

    @James that is an OS X command that will open the default application for the file type passed as an argument. In this case, for Alyssa's computer, the Atom editor is the default application for html files.

  38. Zhen Xu said

    Hi, I just experienced something interesting. I downloaded all the source code from master on GitHub, then I created a new folder and copy paste everything to this new folder. I tried to develop new function of this framework, but when I ran "npm run watch" in terminal, it failed. The error message looks similar to @FedericoSananes 's

    "19 error node v4.3.1 20 error npm v3.8.0 21 error code ELIFECYCLE 22 error stb-mean@1.0.0 watch: gulp watch --gulpfile client/gulpfile.babel.js 22 error Exit status 1 23 error Failed at the stb-mean@1.0.0 watch script 'gulp watch --gulpfile client/gulpfile.babel.js'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the stb-mean package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error gulp watch --gulpfile client/gulpfile.babel.js 23 error You can get information on how to open an issue for this project with: 23 error npm bugs stb-mean 23 error Or if that isn't available, you can get their info via: 23 error npm owner ls stb-mean 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ]"

    So I follow the comments and run npm install npm install gulp -g, it does not work. I am wondering if changing the name of the folder will result in failure of gulp? I don't really know how it works.

  39. Marc Droz said

    I’m getting ahead of myself watching this, but I'm lost in the most obscure depths of the shadow realm right now

  40. Faculty

    Carlos Souza said

    @Zhen and @Marc, would you mind posting your questions to the forum ? https://www.codeschool.com/discuss/

  41. titus2017 said

    nice one guyz...

About This Screencast

Learn to install and integrate each of the MEAN stack technologies: MongoDB, Express.js, AngularJS, and Node.js. In this first episode of the MEAN stack series, we'll be setting up a demo web application to manage data for the Summer Olympics.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now