Introduction
MEAN is a software application stack made up of the following components:
- MongoDB, a NoSQL database with support for server-side JavaScript execution
- Express, a Node.js web application framework
- Angular, a web application framework suitable for developing dynamic, single-page applications
- Node.js, an asynchronous event-driven framework suitable for building scalable network applications
Valery Karpov invented the term "MEAN" and derived the term from the first letter of each element. Valeri defined MEAN in this blog post, giving some motivation to choose to develop JavaScript applications with the help of the MEAN stack.
Preparing Windows to run the MEAN Stack (MongoDB, Express, Angular, Node.js) applications is simple and only requires a couple of things to be installed – namely Angular-CLI, MongoDB and Node.js.
Express runs on top of Node.js so it isn't installed directly on Windows, it's added via NPM (Node Package Manager) when you run npm install for an application. The npm install command looks at the dependencies section of the package.json file for application on the MEAN stack and downloads all that is required, which should include Express.
Angular is an open-source JavaScript front-end web application framework mainly for developing single-page applications. There’s some confusion regarding the name and version of Angular, initially it was started as AngularJS framework (which is still v1), but later it was completely re-written and released as Angular 2 in September 2016. In March 2017, Angular 2 was renamed as Angular. Angular is similar in that it’s not installed directly on Windows and is added via NPM.
Angular-CLI (Command Line Interface), however, will need to be installed globally to create Angular projects and makes other development tasks easier. The Angular CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
1. Install NodeJS on Windows
Download the latest stable release of NodeJS and install using all the default options. Once the installation is complete, verify that the installation was successful by asking NPM and Node for their version numbers.
// Check npm version
npm -version
// This should provide an output similar to
// 6.41
// Check node version
node -v
// This should provide an output similar to
// v10.15.1
If you see the version number for both, then the installation was completed successfully.
The next part of the stack we need to install is MongoDB.
2. Install MongoDB on Windows
For this tutorial, we'll be installing the community edition, which is available for free download. There's also an enterprise edition, but that requires a license, so we won't be dealing with it here. At the time of publication, MongoDB 4.0.6 is the latest stable edition available for download and installation.
Download the current stable release of MongoDB and install using the Complete setup type and all the default options.
Create the MongoDB data directory
Create an empty folder at C:\data\db.
MongoDB requires a directory for storing all its data, the default directory is C:\data\db, you can use a different directory if you prefer by specifying the --dbpath parameter when starting the MongoDB server (below).
Start MongoDB Server on Windows
Start the MongoDB server by running mongod.exe from the command line, mongod.exe is located in C:\Program Files\MongoDB\Server\[MONGODB VERSION]\bin. For example for version 4.0.6 the following command will start MongoDB:
"C:\Program Files\MongoDB\Server\3.2\bin\mongod"
Alternatively, you can add it to your system environment PATH to call it from anywhere. The following command will append C:\Program Files\MongoDB\Server\[MONGODB VERSION]\bin\mongod to the current PATH.
set PATH=%PATH%;"C:\Program Files\MongoDB\Server\[MONGODB VERSION]\bin\mongod"
After you change the path, close and re-open the console window. You can verify it was added by running:
echo %PATH%
Once you run the mongod command, the output should look like the following if it's running:
2019-02-28T12:04:58.204-0500 I CONTROL [initandlisten] MongoDB starting : pid=6416 port=27017 dbpath=C:\data\db\ 64-bit host=YOUR_PC_NAME
2019-02-28T12:04:58.204-0500 I CONTROL [initandlisten] targetMinOS: Windows 7/Windows Server 2008 R2
2019-02-28T12:04:58.204-0500 I CONTROL [initandlisten] db version v4.0.5
…
2019-02-28T12:04:59.070-0500 I NETWORK [initandlisten] waiting for connections on port 27017
Now before moving forward in the tutorial, we need to install Git.
3. Install GIT on Windows
You can install it from Git for Windows. This will install the Git client, the Windows implementation of BASH tools and a few Git GUI tools. I generally prefer to install this over other options. I should mention that you should be okay with the default installation options. Go through the default installation process until you get to Choosing the default editor used by Git. The default Use Vim may be too hard to use for you if you don’t already know Vim. Select Nano or Notepad++ which are easier to use. You can add the add the tools to your path by using the SETX command in your command prompt. All you must do is add the following to your PATH (slightly modify it based on what where Git outputs).
SETX PATH "%PATH%;C:\Program Files\Git\usr\bin"
Next, let’s install Angular-CLI before moving onto the MEAN boilerplate.
4. Install Angular-CLI on Windows
Checkout the Angular-CLI documentation for a complete rundown of the commands available with Angular-CLI. For this tutorial, all you need to do is run the following command to install Angular-CLI globally:
npm install -g @angular/cli
Finally, we can move on to installing the MEAN boilerplate.
5. Install the MEAN Boilerplate on Windows
For the purpose of this tutorial, we use a MEAN starter kit called MEANcore which provides a solid starting point for MongoDB, Node.js, Express, and Angular based applications. The first thing to do is clone the official MEANcore GitHub repository.
git clone https://github.com/mrdav30/MEANcore.git meancore
That clones the MEAN boilerplate into a directory called meancore in your home directory. To install all the packages the project references, you need to be inside that directory, so move into it.
cd ./meancore
Then install the required packages as the admin user.
npm install
The installation will take several minutes. When it completes, create a .env file in the project folder (the one with this readme) and fill in the following values:
NODE_ENV='development'
PRODUCTION=false
DOMAIN=
DOMAIN_PATTERN=
HOST_SECURE=
PROXY=
APP_NAME='meancore'
APP_BASE_URL='/'
API_BASE_URL='api'
APP_DEFAULT_ROUTE='home'
IMAGE_UPLOAD_URL='/admin/upload'
TWITTER_HANDLE=
SESSION_SECRET='MEANCORE'
SESSION_KEY='meancore-key'
SESSION_COLLECTION='meancore-sessions'
GOOGLE_ANALYTICS_ID=''
GOOGLE_CLIENT_EMAIL=''
GOOGLE_PRIVATE_KEY=""
GOOGLE_VIEW_ID=
RECAPTCHA_SECRET_KEY=''
RECAPTCHA_SITE_KEY=''
MAILER_FROM='support@meancore.com'
MAILER_SERVICE_PROVIDER=
MAILER_HOST='smtp.ethereal.email'
MAILER_PORT=587 MAILER_USER="username"
MAILER_SECRET="pass" MAILER_TEST=true
Now you have everything you need to develop a MEAN application. In the last step, we'll test the stack to make sure it works.
6. Running Your Sample MEAN Application
Let's run the sample application to make sure that the system is functioning correctly. Use npm start:dev to allow you to test your application in development mode.
npm start:dev
You may now access your MEAN application by visiting http://localhost:4200 in your favorite browser. That should render a page with the MEANcore logo, including the text Congrats! You've configured and run the sample application. This means you have a fully functional MEAN stack on your server.
Conclusion
That's it! You're now set up to run MEAN stack applications on your Windows machine. Now that you have the necessary components and the MEAN boilerplate, you can begin building, testing and deploying your own apps. Check out the documentation on MEANcore website for specific help on working with MEANcore.
If you any questions or thoughts on the tutorial, feel free to reach out in the comments below.