MEAN Stack – Customer CRUD Module with Yeoman – Day 9

The MEAN Challenge Continues!

This video is part of the 30 Day MEAN Stack Honolulu Challenge

In this video we’ll start to look at the Customers Pages, and create our very own Customer CRUD Module using the yeoman generator.

We look at:
– The Customers Pages, including the use case, storyboard and wireframes
– Backing up our work using Git
– The different types of generators available with the MEAN Stack
– Using the Yo scaffolding tool to generate a Customer CRUD (create, read, update, delete) module

How to add your files to git:

Firstly, make sure that you have Git installed
Open up your command line utility (e.g. Powershell, Command Promt, xcode) and navigate to the folder where your app is located
git init
git add --all
The –all, which is the same as -A, stages all of your files that have not been specifically ignored e.g. in the gitignore file.
git commit -m 'first commit'
The -m in the line above stands for ‘message’, this command will save your files with a commit message.

The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.

Next

MEAN Stack – Modelling with Mongoose – Day 10
Previous

MEAN Stack – Style the Sign-up Page – Day 8

17 Comments

Let me know what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • PJ
    Reply

    After I install crud-module with menu, I get a blank landing page and blank /customers page.

    I have searched and did not find a fix to this. So I deleted the /modules/customers folder (basically uninstalled the crud-module for customer); ran the yo generator again for the crud-module, but this time with NO menu. All the pages are working now.

    I am assuming/hoping working with menus is one of the videos. If menus is not covered, Shristi you may want to.

    thanks

  • Spuggiehawk
    Reply

    Just thought I’d mention that I have just (14th Sept 2016), go to the end of this tutorial and found that the meanjs:crud-module step has completely stuffed my system. Nothing works now, not even the home, sign-up and sign-in pages.
    It seems that there is still a problem with this module generator.
    The only example I could find online that was clearly similar to mine was from March this year:

    stackoverflow.com/questions/36276541/meanjsgenerator-error-injectorunpr-unknown-provider-menusprovider-menu

    The difference is that my error wasn’t with the wrong text for the provider. I had “menuService” and my code matched the first proposed solution exactly.

    On the face of it, this seems to be a problem with the immaturity of the MEAN stack and the hugely complex web of interdependencies that it has. This becomes even more obvious with the number of solutions and recommendations to try different versions of specific packages.

    I think this is very sad because it looks like it could be quite a nice stack to work with.

    Unfortunately, I’m going to have to stick with it because I’m shortly going to be extending or integrating with an application that has been created on the MEAN stack. I’m worried that this house might not just be built on sand, but might, in fact, be built on quicksand.

  • blietz71
    Reply

    I believe the latest generator-meanjs github build is now working so no need to do the crazy steps below.
    A simple sudo npm install -g generator-meanjs as per official instruction, should now do the trick.

  • blietz
    Reply

    For those who are following but are getting stuck here on Day 9 due to the current work in progress on the CRUD Module generators, here is a working solution – browse here: https://github.com/meanjs/generator-meanjs/pull/175 and follow instructions given by keithics. In short:
    1. Uninstall current version of generator with npm install -g generator-meanjs
    2. Browse to forked version of generator: https://github.com/webninjamobile/generator-meanjsplus
    3. Download and extract forked version (I extracted mine to /usr/lib/node_modules)
    4. Changed to extracted directory & run “npm install”
    5. Once completed, run “npm link” (to sym link local copy as global)
    6. Now change to your Mean project directory root and run “yo meanjs:crud-module customer”
    Should now work as designed.
    BTW – I don’t think we are far from having the above officially fixed with the generator module version 0.4.3 commited today & set to be released sometime soon.

  • fellyralph
    Reply

    Hi,
    So far this tutorial has been very educational and interesting but am somekind of stuck in this tutorial(day 9),each time i try to run the command yo meanjs:crud-module customer the terminal tellss me it is undefined and it continues to executes for some reason the command of the generator-meanjs as it propose to me generation of the new Mean App and not a modules ,one time I decided to let it finish the process but it ended up reating another mean base project. N.B am using Ubuntu

  • trungcr
    Reply

    i follow your tutorial to day 9: CRUD Modules with Yeoman. but i faced an issue.when I tried to use yo to create my own modules with the following command:

    yo meanjs:crud-module customer
    It runs the application setup again:

    You’re using the official MEAN.JS generator.
    ? What mean.js version would you like to generate? (Use arrow keys)
    master
    ❯ 0.4.0
    0.4.1
    i’m using meanjs 0.4.0. so i’m tried another way:
    yo meanjs:vertical-module customer
    but still appear again:
    You’re using the official MEAN.JS generator.
    ? What mean.js version would you like to generate? (Use arrow keys)
    master
    ❯ 0.4.0
    0.4.1
    How to fix?

  • Harsh
    Reply

    Hello Shristi,
    As you mentioned to commit the code in this video.
    But in my webstorm it does not show the change menu in footer.
    I tried to find in all menu in toolbar.
    Where can i find this change menu at the bottom toolbar?
    Or is there any other way to commit?

    Thanks

  • Harsh
    Reply

    Hey Shristi,
    Again i come with problems.
    I created CRUD module but i gave module name as a user (because it was a requirement for my app)
    But as we know user module is already exist in our app.
    I did this mistake and now my app is crashed.
    when i tries to start my app with grunt command then i got this error message,

    F:\KIEL\4th SEM PROJECT\Bossable\OPM\node_modules\express\lib\router\route.js:160
    throw new Error(msg);
    ^
    Error: Route.post() requires callback functions but got a [object Undefined]
    at Route. (F:\KIEL\4th SEM PROJECT\Bossable\OPM\node_modules\express\lib\router\route.js:160:15)
    at Array.forEach (native)
    at Route.(anonymous function) [as post] (F:\KIEL\4th SEM PROJECT\Bossable\OPM\node_modules\express\lib\router\route.js:156:15)
    at module.exports (F:\KIEL\4th SEM PROJECT\Bossable\OPM\app\routes\folks.server.routes.js:10:4)
    at F:\KIEL\4th SEM PROJECT\Bossable\OPM\config\express.js:118:35
    at Array.forEach (native)
    at module.exports (F:\KIEL\4th SEM PROJECT\Bossable\OPM\config\express.js:117:49)
    at Object. (F:\KIEL\4th SEM PROJECT\Bossable\OPM\server.js:24:38)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    [nodemon] app crashed – waiting for file changes before starting…

    And moreover i did not commit my code as far…:O
    I hope that you can help me with this and my previous question on Day 5 challenge.

    Thanks and Regards,
    Harsh Soni

    • bossable

      Hi Harsh, not sure if there is an easy fix for this one, you might need to spend a bit of time going through and changing the references for the new module you’ve created.

    • Harsh

      Hey,
      Thanks for your reply.
      I have spent lots of time to solve this issue. But did not managed.
      But after that i have created new app, i mean i start everything from the beginning again.
      and now its working good and i practiced twice…;)
      Btw many thanks.

      Harsh.

  • Tamas
    Reply

    Hi, when I create a new crud module everything is going fine, but when i try to view the page for it, just jumps back to the main page like it wouldnt exist. No error msg no nothing. I should be able to view that module. Any idea?

    • bossable

      Hmm…it might be redirecting you if you’re not logged in, are you logged in when you try and go to that page?