In this article, we look at how you can properly setup and configure your new Mac for MEAN Stack Development. Note that this is just one of the many ways, although this has been a tried and tested one, and has worked pretty well for me.
This part, although pretty obvious, is in fact one of the most important parts of setting up your system. Ensure that your OS and other system software are updated to the latest version. This bit of the setup process is fairly easy too. Assuming that you are running macOS Mojave, follow these steps to get everything up to date:
To automatically install macOS updates in the future, including apps downloaded from the App Store, select ”Automatically keep my Mac up to date”. Personally, I recommend this since it will help keep your ssytem up to date even if you forget to check for updates regularly.
Now that your system is up to date, it is time to get the tools for development up and ready and the most fundamental one you will need are Node and the Node Pachkage Manager(NPM). The ’N’ in MEAN(or MERN, for that matter), is the Javascript runtime over which all our Angular and React applications run. NPM meanwhile is a great tool that will help you to — you guessed it right, maange the multitude of packaged you’ll require and work with. There is more than one way to setup Node on your system. but the first thing to do is check if your system by any chance already ahs an installation of Node. This can be done as follows:
node -v
npm i -g npm
. If you get a bunch of checkPermissions
warnings, you should run the command as the superuser like this: sudo npm i -g npm
Assuming that you do not have Node already installed, proceed with one of the following methods:
The Installer
If you wish to go old school and keep it simple and neat, this is the way for you.
node -v
once again. You should get a version number now.If you prefer installing Node through the Terminal, then Homebrew is what you’ll need. As stated on their website(https://brew.sh/), Homebrew is ‘teh missing package manager for macOS’. Basically, they make the process of installing stuff as simple as running a line of command or two. What’s more, they also do away with requiring us to affix sudo
with the commands we run in installations etc.
First, you need to install Homebrew and this can be done by running the following command on Termnal:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Note that you may have to install Xcode to ensure that Homebrew works properly. SO if you are prompted to do so, go to the App Store and install Xcode. This might seem like a lot to go through while we can easily install Node through the Terminal. But as a developer, there will come a time sooner than later when you’ll realise that installing Homebrew was a good decision.
Once Homebrew installation completes, all you have to do is run the following command to install Node:
brew install node
And you’re done. Just to be sure, run node -v
to verify that the things are in order.
So far, so good? Cool, it gets better.
Now that Node is in place, let’s setup the ‘M’ of MEAN, MongoDB on your system. Here again, you have two ways to go.
Install and Run MongoDB with Homebrew
brew update
.brew install mongodb
mkdir -p /data/db
<strong>/data/db</strong>
directory has the right permissions by runningsudo chown -R `id -un` /data/db
mongod
. This should start the Mongo server.mongo
in another terminal window. This will run the Mongo shell which is an application to access data in MongoDB.quit()
ctrl-c
Install and Run MongoDB by Downloading it Manually
<em>mv mongodb-osx-x86_64-3.0.7.tgz ~/</em>
><em>cd Downloads</em>
><em>mv mongodb-osx-x86_64-3.0.7.tgz ~/</em>
*cd ~/
tar -zxvf mongodb-osx-x86_64-3.0.7.tgz > mv mongodb-osx-x86_64-3.0.7 mongodb
mkdir -p /data/db
<strong>/data/db</strong>
directory has the right permissions by runningsudo chown -R `id -un` /data/db
~/mongodb/bin/mongod
. This will start the Mongo server.~/mongodb/bin/mongo
in another terminal window. This will run the Mongo shell which is an application to access data in MongoDB.quit()
ctrl-c
If you neatly did either iof the above, then your local MongoDb should be good to go.
Right now, we have got an updated system, Node, NPm and MongoDB all setup and ready. Finally, it is time for Angular, the powerful javascript framework that completes the MEAN Stack and is making beautiful Single Page Applications a reality.
In comparison to what we have had till now, installing Angular is fairly easy. Open Terminal and run
sudo npm i -g @angular/cli
Enter your password, wait for the process to complete and voila! You are all set to get cracking or rather, developing.
What is MEAN without the ‘E’? Express is the Node.js framework that has made Node.js one of the most preferred server-side languages over the past few years. While Express.js in itself is wprth an entire blog, I will keep this down to setting up Express in your project and that is as simple as running the following code in your project’s Node directory:
npm i express --save
While you now have all the runtimes and frameworks ready, there’s more to setting up a system for development than that.
The Text Editor
This may sound silly but for any developer, the right text editor is what sets the right tone and mood to get the proverbial creative juices flowing. True, even something as measly as Notepad(or Notepad++) can do the trick. So can the ‘further along evolution-line’ alternatives like Sublime or Atom. But I strongly prefer Visual Studio Code. Why ?
In short, VS Code is as good as an editor gets, or has gotten till date. It’s absolutely free and you can get it from https://code.visualstudio.com/
I’ll talk in detail about VS Code in another article.
As someone who has been developing on Angular for some time now, I can tell you first hand that you are going to get a lot of what I call ‘white-screen errors’ — just like that, all you’ll get on the browser will be a blank white page, irrespective of how many lines of code or number of components you have in there. More often than not, this is a result of an unexpected closing tag in the HTML or even worse, a typo in the HTML. This is where the Console comes to rescue — kinda. It shows you a ‘Template Parse Error: Unexpected closing tag ’ or something similar, allowing us to fix the error with relative ease.
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. The main tools that come with this are:
console.log()
statementsSo you see, Safari is a great browser, no arguments there. But if you are a developer and are not using Googlr Chrome and Chrome DevTools, you are missing out on a lot.
nodemon
Node.js development can get really irksome when for every small change you make in the code, you ahve to stop the running server and start it over, again. This is where nodemon becomes a lifesaver.
nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
nodemon does not require any additional changes to your code or method of development. nodemon is a replacement wrapper for node
, to use nodemon
replace the word node
on the command line when executing your script. You can install nodemon on your system by running the following command:
npm i -g nodemon
Alright, those are the bare minimum things you need and/or should have to get up and running with MEAN Stack development on your new Mac. Remember — this is just the way I do it. Somebody else might do it differently and that could be a better approach too. So keep looking out for more things and stay ahead of the curve.
Thanks for reading ❤
#mongodb #express #node-js #angular