When my FullStack TA’s advised me not to try to convert my quiz application (using Angular and Angular Local Storage) into a MEAN app (MongoDB, Express, AngularJS, Node), I wanted to know why. Why couldn’t I just generate an app using a MEAN app generator, then plunk my HTML’s, CSS’s, and JS’s in and wire it together?
I decided to try it and see how far I could get. I used daftmonk’s generator-angular-fullstack, which includes yeoman, grunt, and passportJS, and began adding my quiz app files. From this experience, I’ve derived some best practices to keep in mind when performing this conversion:
1. Don’t delete anything you can’t replace. MEAN apps from a generator are very tightly wired. Every file is there for a reason, and each one is linked to others through source hyperlinks, the gruntfile, angular routing, SASS routing, and possibly express routing. Don’t delete any file unless you have opened it and feel confident that you can re-wire the app.
2. Try not to move things. See #1. Because of #1, you can have problems if you move files. Your gruntfile and other routes expect each thing to be in a certain place. One of the most interesting errors I had from this was when my console said there was an error with my app.js, and when I clicked on the words ‘app.js’, it showed me my index.html file. The browser had been told that my app.js would be in a certain place, and when the app.js was not there, it grabbed another file and tried to read it as a script. For every file I moved, I probably spent an hour fixing routes, reworking functions, and debugging strange errors.
3. The ‘Find in Files’ function in Sublime is your new best friend. You are going to need to search for many, many terms to make sure that your app, route, and module names are all up to date. You’ll find Sublime’s cross-file search indispensable. Learn the shortcut: command-shift-F.
4. Look through your gruntfile. Grunt is doing a lot of things for you behind the scenes. For example, it will be combining all of your SCSS files and rendering them as one CSS file, which means that your views will all be modified by multiple SCSS files unless you make a change.
5. Learn your homonyms. Within your application, you’re going to have several files with the same name. You may have a few app.js files, a couple of index.js, a couple of route.js… take a look at your files with the same name and understand why some are intended for the front end (angular routes, for example) and some for the back end (express routing, passport). It may be useful to draw a map of your site routes and decide whether to route each transition through the front end or through the back end.
I learned a lot through this project, but if I were doing it again, I would probably find a way to create a MEAN app by hand instead of using a generator. On the positive side, I now have a better sense now of how the various files work together to create a fantastic app.
The Unlikely Coder 
One comment