Wednesday, December 28, 2016

MEAN Setup and Start with @ Mac OSX..!


Dear Viewer,

This post will help and take you with the following possible steps in regard of installing stack tools associated with the MEAN development platform into your Mac OSX machine. I have seen there are plenty of posts available online for setting up work environment on various cross-platforms. My focus is also quite similar over here; but this write-up is only targeted for Mac OSX  users. Due to large volume API up-gradation and changes in technology cycles frequently many things might not go right in one short of your MEAN development set-up at Mac machine. With having said that, thought to write a post should be meaningful and helpful for target audience. I have been done setup implementation successfully in my Mac OS (i.e., macOS Sierra version 10.12.2). Lets start with the step of set-up implementation after getting bit idea/purpose of MEAN: 

MEAN (Mongo, Express, Angular, Node) - A simple, scalable and easy starting point for full stack JavaScript web development. The MEAN stack represents a thoroughly modern approach to web development: one in which a single language (JavaScript) runs on every tier of your application, from client to server to persistence.

Here understand the short purpose and definition of all stacks:

MongoDB is the leading NoSQL database, empowering businesses to be more agile and scalable. 

Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.


Before you begin, you should make sure you have installed all these prerequisites on your development machine.

The first is to change the owner of “/usr/local” to the with the following command:
$ sudo chown -R $USER /usr/local

It is not recommended to use the npm command with sudo.

The second would be to install the Apple command line developer tools. I think, the best way to do it is by installing XCode. Yes you then have another big IDE, but it installs much more. But this way, you don’t need to have a developer account. I did it by Installing XCode; you can just install the command line tools. XCode can be installed from the Apple AppStore.

Step 1:
Install either Macports or HomeBrew in your Mac machine for easy installation of tools and their dependencies.

The third is to install homebrew. Homebrew is the package manager for MAC. The installation is pretty easy, type the following in you command line:
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Then run the homebrew doctor like this:

$ brew doctor

After this, you can install tools like this:

$ brew install wget


Step 2: Installing Node.js / Nodes.js Package Manager (NPM)

Download & Install Node.js and the npm package manager, if you encounter any problems, you can also use this Github Gist to install Node.js. Again, we'll let HomeBrew do the heavy lifting:

$ brew install node

The npm executable is already included in the Node.js package.
Before continuing, let's make sure Node.js modules can be found by others (Caution: it's best to copy and paste these commands, as you'd lose the original contents of your .bashrc file if you typed > in place of >>):

$ echo 'export NODE_PATH="./node_modules:/usr/local/lib/node_modules"' >> ~/.bashrc && source ~/.bashrc

To check if the configuration is in effect, execute:

$ echo $NODE_PATH

You should see ./node_modules:/usr/local/lib/node_modules printed out below your command. If you use a different shell than Bash, simply replace ~/.bashrc with your shell configuration file.

Step 3: Installing MongoDB


If you haven't used HomeBrew before, simply execute the following command in a Terminal window:


We will install MongoDB through howebrew. Make sure homebrew is up-to-date by executing this command:

$ brew update

Then lets install MongoDB with the following command:

$ brew install mongodb

To run MongoDB, we have to create de default data directory for our MongoDB by:

$ mkdir -p /data/db

The user monogd must have write access.

Run MongoDB on the default port (27017) with:

$ mongod

Also you can use below command:

$ brew update && brew install mongodb

Homebrew will automatically install all the dependencies for you.

Also install some other package managers:

Install Bower

You’re going to use the Bower Package Manager to manage your front-end packages, in order to install it make sure you’ve installed Node.js and npm, then install bower globally using npm:

$ npm install -g bower

Install Grunt

You’re going to use the Grunt Task Runner to automate your development process, in order to install it make sure you’ve installed Node.js and npm, then install grunt globally using npm:

$ npm install -g grunt-cli

Install Yeoman

MeanJS uses Yeoman, the web’s scaffolding tool for modern web apps.

Install Yeoman globally with:

$ npm install -g yo

Install MeanJS generator for Yeoman

$ npm install -g generator-meanjs

You are now ready to get started with the MEAN.JS generator. The generator will help you create a MEAN.JS application, a CRUD module, Angular Module, and other AngularJS/Express entities. We’ll begin with the application generator.


Step 4: Generating a Fullstack app

Make a directory for your Back End Project projects. Assuming your desktop is your de facto workspace:

$ mkdir ~/Desktop/Back End Projects && cd ~/Desktop/Back End Projects

Now that all the preparations are in place, it's time for the main event:

$ yo angular-fullstack

Step 5: Initializing local Git repository

Tell Git not to track your database:

$ echo "data" >> .gitignore

Turn the directory in which your application is located into a Git repository by running the following commands:

$ git init && git add . && git commit -am 'initial commit'

Step 6: Starting MongoDB

To start MongoDB for the first time in your app's directory, run the following commands in your terminal:

$ mkdir data && echo 'mongod --config /usr/local/etc/mongod.conf --dbpath=data --rest "$@" --httpinterface' > mongod.sh && chmod a+x mongod.sh && ./mongod.sh

From this point on you can simply start MongoDB by executing ./mongod.sh. A few things to note:
        The .conf file directs mongod to write messages to a log file instead of stdout. To view the log, run the following in a separate Terminal tab: less /usr/local/var/log/mongodb/mongo.log.
        Since we're not on Cloud9, we don't need the --nojournal option. Journaling lets you recover the database in case of a mongod crash.
        You have to make a clean database for each project. If you copied the data directory over from an earlier project, mongod will fail to start. If that's the case, just rm -rf data && mkdir data && ./mongod.sh.

Step 7: Application Generator

Installing full stack tools

$ npm install -g express yo grunt grunt-cli generator-angular-fullstack bower

The application generator will help you create a fresh copy of a MEAN.JS application in your working folder. To create your MEAN application, navigate to a new project folder, and then use yo to generate your application:

$ yo meanjs

The generator will ask you a few questions about your new application and will generate it for you. When the installation process is over, you will be able to use grunt to run your new MEAN application:

Open a new Terminal tab by pressing T, and run the following command:

$ grunt serve

Grunt should automatically open your new Angular site's index page as soon as it finishes starting up.
Now you should be able to follow the rest of the Challenge instructions to push to GitHub and Heroku. Just ignore the part about SSH key (#33-36) and replace ~/workspace with your app directory's path.

2 comments:

  1. BlueHost is ultimately one of the best website hosting provider with plans for all of your hosting needs.

    ReplyDelete
  2. QUANTUM BINARY SIGNALS

    Get professional trading signals delivered to your mobile phone daily.

    Start following our signals today & gain up to 270% a day.

    ReplyDelete