Windows - local coding environment

Posted on June 30th 2019 by Zarko

Local coding environment setup for Windows

Our coding environment for this course should have the following important pieces:

  1. Node.js
  2. MongoDB
  3. Command line terminal
  4. Code editor

1. Node.js setup 

VIDEO TUTORIAL NOW AVAILABLE! https://www.youtube.com/watch?v=P6VdG7ZP82w

Be sure to visit my new YouTube channel linked below! Also, if you found the tutorial useful please take a second to like the video and subscribe for more content in the future!

Node.js is the JavaScript engine that we use to run our backend applications.

Go to the Node.js official website to download the LTS version for Windows: https://nodejs.org/en/download/

Follow the simple instructions of the installer and after it’s finished you will have Node.js and npm installed on your computer, which we can then use in our backend web development.

To learn more about the installation procedure, and find an alternative way to install and manage different Node.js versions using NVM (Node Version Manager), see the following tutorial: https://zarkom.net/blogs/how-to-install-nodejs-via-nvm-on-windows-7934

2. MongoDB setup

VIDEO TUTORIAL NOW AVAILABLE! https://www.youtube.com/watch?v=MCpbfYvvoPY

Be sure to visit my new YouTube channel linked below! Also, if you found the tutorial useful please take a second to like the video and subscribe for more content in the future!

MongoDB is the database software that we use to store data from our Node.js applications.

Visit the MongoDB Download Center by clicking on the following link: https://www.mongodb.com/download-center

Select the ‘Community Server’ option, make sure Windows is selected as your operating system and click the download button, run the installer and follow the instructions here get MongoDB set up on your Windows computer: https://zarkom.net/blogs/how-to-install-mongodb-for-development-in-windows-3328

You can find the full documentation about installing MongoDB on Windows here: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/

3. Command line terminal

We use the terminal as a quick and efficient way to execute tasks and programs on our computer, navigate through the file system and use different web development tools.

The built-in command line software for Windows is Powershell and Command Prompt. However, Colt is using a Linux-based bash terminal on the Cloud9 online coding platform (which was unfortunately shut down since the lectures were created), and that command line software is different when compared to the Windows terminals.

But, there are options to install third-party terminals on Windows which can emulate the bash terminal and the same commands that Colt uses in the lecture videos (and allow us to follow him directly when working in the terminal). One of the more popular options is to install Git Bash on your Windows operating system.

We can install Git Bash on our computer by installing Git, which is quite convenient because we will learn and use Git later in the course, so it’s great to have it preinstalled.

To get both Git and consequently Git Bash installed, follow the instructions from this tutorial: https://zarkom.net/blogs/how-to-install-git-and-git-bash-on-windows-9140

4. Code editor

Fortunately, we already learned how to set up and use a code editor called Sublime Text in the frontend part of the course. In the backend sections you can continue using Sublime Text (or the code editor of your choice) to create project files, write your code and save everything to your specific project folder (you can arrange project folders and files exactly the same like Colt does using the Cloud9 online environment in the course).

Another very popular code editor option worth considering is Visual Studio Code, which Colt actively uses nowadays (he recorded a video on his YouTube channel about it, click here to watch it).

* Note: I also have a somewhat related video tutorial about VS Code for the frontend setup (it covers the installation setup and also Live Server which enables auto page reload when working with front-end web development (HTML/CSS/JS files): https://www.youtube.com/watch?v=fmQ_a1q3GOI

A great advantage of using Visual Studio Code is that it supports an integrated terminal inside of the editor out of the box. This allows us to actually integrate Git Bash terminal (which we installed in the previous step) directly inside the VS Code editor window. You can find setup and terminal integration instructions here: https://zarkom.net/blogs/how-to-set-up-visual-studio-code-with-git-bash-on-windows-7234

Alternatively, we can start Git Bash (or Powershell, Command Prompt) from our programs list, in an independent window and navigate to our project folders.

Connecting the dots (local vs Cloud9)

To make things clear, we will compare the tools that Colt uses in his Cloud9 online environment, and the tools that we are using in our Windows local coding environment.

When you start the backend lectures, you will notice that Colt has a command line (terminal) on the bottom of his Cloud9 browser interface. In our local coding environment, we will use Git Bash instead (or if you choose to use Powershell/Command Prompt).

The biggest portion of the screen is going to be taken up by Cloud9’s built-in code editor. In our local environment, we are going to use Sublime Text, VS Code (or a code editor that you prefer) to write our code, save our project files, etc.

On the left-hand sidebar, you will notice a file view in Cloud9. Our Windows equivalent of this graphical user interface is going to be the default Windows File Explorer, which we are all familiar with as users of this operating system.

Finally, when we install Node.js we will be able to use node and npm commands in our terminal, very similarly like Colt uses them in the video lectures.

Starting our MongoDB database server and shell is going to be slightly different, however. Therefore, as a Windows user make sure to reference step #2 to find instructions on how to utilize MongoDB on your operating system.

Running and previewing our apps locally

To run and preview your projects/applications, you need to use your system terminal (Git Bash, Powershell or any other terminal that you've set up), change directories to navigate to your project folder and then run node app.js to start the application (just like Colt does in Cloud9) - you can revisit step #1 above to find detailed instructions.

Also, make sure to first start your mongod.exe database server, if your node app is connecting to it (reference step #2).

One important change that we need to make in our app code to be able to run and preview apps locally is to manually define the port that the app is listening to (this is handled differently in Cloud9, hence the differences in the app.listen code blocks).

Instead of using Colt’s app.listen() code in your apps, make sure to set it up like this:

var port = process.env.PORT || 3000;
app.listen(port, function () {
  console.log("Server Has Started!");
});

Then, you will be able to preview your app by going into your browser and typing localhost:3000 in the address bar.

Sharing your project code on the Q&A Boards

When you need help with your application, you will need to follow Ian’s GitHub video tutorials in order to be able to share your project code with us, which allows us to directly view and test your application in order to help troubleshoot your issues.

You can find those Git and GitHub video tutorials here:

https://www.youtube.com/watch?v=wTHPBO28nYQ&list=PL86ehqHzxhy4XX_qZZE_5mrp38WGZRzTO

After you push your code to GitHub, you can copy your repository link and share it on the Q&A Boards (always make sure to remove sensitive/private data like passwords from your code, before publishing it publicly on GitHub).

Additional notes

Heroku

Heroku is a service which we use to publish our Node.js application on the internet, towards the end of the course. It’s installed by default on the Cloud9 online environment that Colt uses in the lecture videos, however we will need to install it manually in our Windows coding environments.

Make sure to select your Windows installer from the following link: https://devcenter.heroku.com/articles/heroku-cli#download-and-install

Leave the default settings in the installation wizard and follow through the steps to get it set up on your computer.

Postman

Postman is a useful development tool that Colt uses and explains later in the course. However, you can set it up right now (so it’s ready for later usage) using the Windows installer found here: https://www.getpostman.com/downloads/