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:
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)".
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.