Setting up your new Mac for MEAN Stack development

Setting up your new Mac for MEAN Stack development

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.

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.

The Basics: System Update

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:

  1. Choose System Preferences from the Apple () menu, then click Software Update to check for updates.
  2. If any updates are available, click the Update Now button to install them. Or click ”More info” to see details about each update and select specific updates to install.
  3. When Software Update says that your Mac is up to date, macOS and all of its apps are also 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.

Time for Node

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:

  1. Open the Terminal
  2. Enter node -v
  3. If you have Node on your system, it will show the version
  4. Update to the latest version using npm i -g npm. If you get a bunch of checkPermissionswarnings, 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.

  1. Go to https://nodejs.org/
  2. On this page, under normal circumstances, you’ll be presented with links to the installer. You have two options here: the Current version, and the Long Term Support(LTS) version. While both are mostly same, the Current Version will have a few newer features although it may have bugs, in comparison to the LTS.
  3. Download the installer, locate it in your Finder and install Node on your system by following the on-screen instructions.
  4. Once done, verify the installation by running node -v once again. You should get a version number now.

The Homebrew way

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.

On to the Database

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

  • Open the Terminal app and type brew update.
  • After updating Homebrew brew install mongodb
  • After downloading Mongo, create the “db” directory. This is where the Mongo data files will live. You can create the directory in the default location by running mkdir -p /data/db
  • Make sure that the **<strong>/data/db</strong> directory has the right permissions** by runningsudo chown -R `id -un` /data/db
  • Run the Mongo daemon, in one of your terminal windows run mongod. This should start the Mongo server.
  • Run the Mongo shell, with the Mongo daemon running in one terminal, type mongo in another terminal window. This will run the Mongo shell which is an application to access data in MongoDB.
  • To exit the Mongo shell run quit()
  • To stop the Mongo daemon hit ctrl-c

Install and Run MongoDB by Downloading it Manually

  • Go to the MongoDB website’s **[download section](https://www.mongodb.org/downloads#production "download section**") and download the correct version of MongoDB.
  • After downloading Mongo move the gzipped tar file (the file with the extension .tgz that you downloaded) to the folder where you want Mongo installed. In this case, we’ll say that we want Mongo to live in our home folder, and so the commands might look something like this:

    <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
  • Create the directory where Mongo will store data, create the “db” directory. ou can create the directory in the default location by running mkdir -p /data/db
  • Make sure that the **<strong>/data/db</strong> directory has the right permissions** by runningsudo chown -R `id -un` /data/db
  • Run the Mongo daemon, in one terminal window run ~/mongodb/bin/mongod. This will start the Mongo server.
  • Run the Mongo shell, with the Mongo daemon running in one terminal, type ~/mongodb/bin/mongo in another terminal window. This will run the Mongo shell which is an application to access data in MongoDB.
  • To exit the Mongo shell run quit()
  • To stop the Mongo daemon hit ctrl-c

If you neatly did either iof the above, then your local MongoDb should be good to go.

And then there is Angular

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.

Don’t forget Express

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

A few more things

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 ?

  • It’s customizable
  • Easy Debugging
  • Extensions
  • Git Integration
  • Integrated terminal
  • Intellisense
  • Theming and more…

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.

Chrome DevTools

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:

  • Device Mode is a one-stop solution to evaluate how responsive your website or application works across devices
  • Elements Panel allows you to examine the page in terms of the elements and styles that make it up, letting you tinker around and try out stuff rather than updating the code for every small change and waiting for the page to render again
  • Console Panel, where you get the log of all the processes going on as well as the output of various console.log() statements
  • Network Panel where you can view all the requests and responses from and to your application
  • And much more…

So 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

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

How to Use Express.js, Node.js and MongoDB.js

In this post, I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database. It will also show all items that have been entered into the database.

Создание сайта на Mongo DB, Express JS, Node JS и Angular

Видео курс по изучению стека MEAN. В курсе вы научитесь создавать сайты при помощи Node JS, Express JS, Angular JS и баз данных MongoDB. Вы ознакомитесь со всеми моментами разработки и в конце курса выгрузите сайт на удаленный сервер.

Angular 8 Node & Express JS File Upload

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.

Build a REST API using Node.js, Express.js, Mongoose.js and MongoDB

Node.js, Express.js, Mongoose.js, and MongoDB is a great combination for building easy and fast REST API. You will see how fast that combination than other existing frameworks because of Node.js is a packaged compilation of Google’s V8 JavaScript engine and it works on non-blocking and event-driven I/O. Express.js is a Javascript web server that has a complete function of web development including REST API.

MongoDB, Express, Vue.js 2, Node.js (MEVN) and SocketIO Chat App

The comprehensive tutorial on MongoDB, Express, Vue.js 2, Node.js (MEVN) and SocketIO Chat Application