Mean stack: Preparing workflow on Windows

Updated: 2016-11-14

I am preparing a development setup for the Mean-stack on Windows 10.

That is for developing along with the book “Getting Mean With Mongo, Express, Angular, and Node“.

With this blog I will customize tool settings, so they minimize the work needed, while developing.

In this blog I will write “$” instead of “>” when I am writing a command line (= shell) command – even though I am writing for Windows. That is my personal preference and it is easier to read, I think.

Comments will either be # for shell comments or // for js comments.

Installation

The tools I use are

Other stuff to install

  • Heroku Toolbelt //Heroku (cloud host) client – does also install Ruby 2.1.7
    • Install heroku-toolbelt.exe – into c:\heroku (under program files it will require admin in some cases)
    • Restart/Open your Git Bash
    • $ heroku –version
      heroku-cli: Installing CLI… 17.78MB/17.78MB
      heroku/toolbelt/3.43.2 (i386-mingw32) ruby/2.1.7
      heroku-cli/5.2.17-5db0bff (windows-386) go1.6.2
      heroku-cli: Updating… done.
    • Restart/Open your Git Bash
  •  MongoDB
  • (MongoChef) //MongoDB GUI. Can replace the Mongo CLI shell.
  • (Winginx) //Mean stack (and more) for windows with easy dashboard. Not included in this blog – just a suggestion.

The Ruby packages (gem) I use for this blog are

Before doing this ruby must be added to the path. See CZ9 below.

Use the Git Bash to install

  • $ gem list #show list of gems
  • Foreman //Heroku validation utility
    • $ gem install foreman # you might have to accept a new firewall opening while installing. Install twice if it stops.
    • $ foreman -h #check if it works

Note: If “foreman -h” comes out with error:

<module:RbReadline>': HOME environment variable (or HOMEDRIVE and HOMEPATH) must be set and point to a directory (RuntimeError)

then it could be because your homedrive includes an extended ASCII char like “ø”.
Then you would need to remane your account and your homedrive.

The node packages (npm) I use for this blog are

  • $ npm list #show list of modules
  • Express //WebApp framework
    • $ npm install -g express-generator #Install
  • NodeMon(itor) //Restarts webserver, when there are serverside .js changes
    • $ npm install -g nodemon #Install

Global node packages are located in “%HOMEDRIVE%%HOMEPATH%\AppData\Roaming\npm\node_modules

Think of global installed packages as COM dll’s that might end up giving you a DLL hell. So tools and servers migth be fine to install globally, but the SW libraries you use in your code you should install locallly (without -g)

If you want to update all your global installed npm packages to latest you can run

$ npm update -g

The Sublime Text packages I use for this blog are

  • Package Control //Like npm. See installation blog
  • SideBarEnhancements //Additions to the file tree explorer
    • ctrl-shift-p “pcip” – enter – SideBarEnhancements
  • AdvancedNewFile //create folder if it is missing including the new file
    • ctrl-shift-p “pcip” – enter – AdvancedNewFile
  • Nettuts+ Fetch //retrieve a zipped file from web and extract it
    • ctrl-shift-p “pcip” – enter – Nettuts
  • Jade syntax highlighting
    • ctrl-shift-p “pcip” – enter – Jade
  • Pretty JSON
    • ctrl-shift-p “pcip” – enter – prjs
    • Usage: Select JSON – ctrl-alt-j

Other Sublime Text packages I use

  • UrlEncode
    • Usage: Selection – Format – URL Decode
  • StringEncode
    • Usage: Edit – StringEncode – HTML Deentitize (and many more options)
  • PowerShell //syntax highlight and more

Sublime Text – More …

MEAN HowTo’s in this blog

The customizations (CZ#) I am doing are

  1. Setting a Node.Js shell to start in the project root
  2. Pin Node.Js shell TaskBar
  3. Put SublimeText in your SendTo folder
  4. Add SublimeText to global path
  5. Add MongoDB to global path and make a startup script
  6. SublimeText: Custom settings
  7. SublimeText: Add zip files or single files to NetTuts Fetch
  8. SublimeText: Add Snippets
  9. Add Ruby and Heroku to global path

The Workflows (WF#) the customizations can be used for are

  1. Verify node packages are installed
  2. Create and run an express project
  3. Browse to root url from ST3
  4. Express: HowTo Separate controllers
  5. Express: HowTo Add bootstrap
  6. Using Git and Heroku
  7. Deploying MongoDB content

CZ1. Setting a Node.Js shell to start in the project root

  • $ SystemPropertiesAdvanced.exe
  • Environment Variables – User vars – New
  • Name: “ProjRootMean”, Value: “E:\sor\projs-mean”
  • RunAsAmin: Notepad – Open C:\Program Files\nodejs\nodevars.bat
  • Change “%HOMEDRIVE%%HOMEPATH%” to “%ProjRootMean%”

CZ2. Pin Node.Js shell TaskBar

CZ3. Put SublimeText in your SendTo folder

CZ4. Add SublimeText to global path

  • $ SystemPropertiesAdvanced.exe
  • Environment Variables – System vars – New
  • Name: “SUBLIME”, Value: “C:\Program Files (x86)\Sublime Text 3” – OK
  • Path – Edit – New – “%SUBLIME%” – OK

Now it is easy to open workingdir from shell using $ subl .

CZ5. Add MongoDB to global path and make a startup script

  • Add Mongo to global path
    • $ SystemPropertiesAdvanced.exe
    • Environment Variables – System vars – New
    • Name: “MongoRoot”, Value: “C:\Program Files\MongoDB\Server\3.2\bin” – OK
    • Path – Edit – New – “%MongoRoot%” – OK
  • Create startup script using db on drive E (could be a cloud drive)
    • Start Node.Js shell
    • Create folder for the mongo database
      • $ e:
      • $ cd \sor\
      • $ md MongoData #folder for the mongo database
    • Create script for starting mongo server with new DB folder
      • cd %ProjRootMean%
      • echo mongod.exe –dbpath E:\sor\MongoData > MongoData.bat
      • $ echo pause >> MongoData.bat
    • Now you can start MongoDB with $ MongoData (use ctrl-c to stop the server)

More tips on https://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/

CZ6. SublimeText: Custom settings

Keyboard settings

For danish keyboard on Windows you might want to do some keyboard shortcut changes in ST3.

ST3 – Preferences – Keyboard bindings – User

{ "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },

CZ7. SublimeText: Add zip files or single files to NetTuts Fetch

To enable fast download of zipped files or single files you can use NetTuts Fetch. But from the bare install it only contains one single file and one zipped file. Here some other are added to SublimeText3.

  • Add Bootstrap and the theme Amelia
    • ctrl-shift-p “fetm” – enter //opens Fetch.sublime-settings
 "packages":
 {
 "html5_boilerplate": "https://github.com/h5bp/html5-boilerplate/zipball/master",
 "bootstrap": "https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip",
 "bootstrap_amelia": "https://github.com/simonholmes/amelia/archive/master.zip",
 }

CZ8. SublimeText: Add Snippets

CZ9. Add Ruby and Heroku to global path

  • Open a DOS shell As-Admin
  • $ setx HerokuPath “c:\Heroku” /M
    SUCCESS: Specified value was saved.
  • $ setx RubyPath “%HerokuPath%\ruby-2.1.7” /M
  • $ setx Path “%Path%;%HerokuPath%\bin” /M
  • $ setx Path “%Path%;%RubyPath%\bin” /M
  • Re-open DOS shell to refresh environment

WF1. Verify node packages and CLI’s are installed

  • Start Node.Js shell or Git Bash from TaskBar.
  • $ wmic os get caption #Microsoft Windows 10 Pro
  • wmic os get osarchitecture #64-bit
  • node –version #v4.2.4
  • npm –version #3.5.3
  • $ express –version #4.13.1
  • nodemon –version #1.8.1
  • $ mongo –version #3.2.0
  • $ mongod –version #3.2.0
  • $ git –version #2.8.3.windows.1
  • ruby –version #2.1.7
  • $ heroku –version #heroku/toolbelt/3.43.3,  ruby/2.1.7, heroku-cli/5.2.17-5db0bff

WF2. Create and run an express project

  • Start Node.Js shell from TaskBar. It should have working directory being your project root.
  • md loc8rA #Create a project folder. The name is from the Mean book.
  • $ cd loc8rA #important to goto the project folder, since a lot of files will be created into it
  • $ express #Setup basic webapp files in the project folder
  • Open WorkingDir in ST3:
    • $ subl . 
  • or
    • start .. #Open parent dir in explorer
    • In Exporer RightClick loc8rA – SendTo – SublimeText #Open the project in ST3
  • 01-23-2016_18-59-41
  • $ npm install #install dependencies from package.json locally into .\node_modules\
  • $ nodemon #start webserver (\bin\www) and listen for .js changes in whole \loc8r\ folder
    • ($ npm start #would also start webserver, but without monitoring for changes and auto restart)
  • Browse to http://localhost:3000 #Response: Welcome to Express
  • $ Ctrl-C #stop webserver

WF3. Browse to root url from ST3

  • Continue from WF2
  • $ nodemon #start webserver
  • In ST3: ctrl-alt-n – “.sublime/SideBarEnhancements.json” #create file in new folder
  • ctrl-p – “sbejson” #open new file
  • Paste into new file
{
 "":{
 "url_testing":"http://localhost:3000/",
 "url_production":"http://localhost:3000/"
 }
}
  • RightClick root – Open in Browser – Default

Thanks to titoBouzout

https://github.com/titoBouzout/SideBarEnhancements#f12-key

WF4. Express: HowTo Separate controllers

WF5. Express: HowTo Add bootstrap

WF6. Using Git and Heroku

WF7. Deploying MongoDB content

The End.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: