Heroku

I decide to post the Mongo Explorer API project to Heroku.

Here is what had to do:

  1. Create an account on Heroku
  2. Installed Heroku Command Line Interface (CLI) with homebrew:
     brew install Heroku
  3. Logger on to Heroku:
     heroku login
  4. Created an app:
    heroku create
  5. Deploy the code:
    git push heroku master
  6. Obviously, the app crashed and did not run, so I had to check the logs:
    heroku logs --tail

It took me couple hours to figure out how to prepare my project to run on Heroku:

  1. I had to add start script in package.json. Heroku uses Procfile, but if file is not found then it looks for start script:
    “scripts”: {
    “start”: “node app.js”
    }
  2. Heroku assigns port dynamically, so I had to change startup code from: app.listen(config.get(‘NODE_PORT’));
    to
    var port = process.env.PORT || config.get('NODE_PORT');
    app.listen(port);
  3. Now the app started, but Swagger UI was failing so I had do the last change: in swaggerDefinition variable I had to change
    host from localhost:4000 to dry-spire-23794.herokuapp.com
  4. The last thing was adding CORS support.

And now my app runs on:

https://dry-spire-23794.herokuapp.com/

 

Swagger

Time to add some UI.

Fortunately, I know pretty easy and cool way to visualize API – my old friend Swagger. I used Swagger in one of my projects in ASP.NET and decided to use it for my Node.JS project. I found pretty good article on adding Swagger support:

http://mherman.org/blog/2016/05/26/swagger-and-nodejs/#.WPJ-y1Pytn5

Just committed first basic Swagger description in my project: https://github.com/alishdev/mongo-explorer-api which will be accessible from http://localhost:4000/api-docs/

Passing connection information

Since the goal of the API to connect to any database and explore it the API project cannot store connection information in config file. Instead connection info must be passed with every request.

Initially I was thinking to pass info in the body of the request, but since I have to implement GET requests also (which according to REST is not supposed to have bodies) I had two options:

  1. put connection info into request parameters (not safe)
  2. put connection info into request header

The latter solution seems to be the correct and simplest one: I used middleware in Express.js to read header and populate request’s connectionString parameter.

Mongo Explorer API

There was some break since I have written anything, but I was not abandoning the project. Instead I took a class provided by MongoDB University:

https://university.mongodb.com/courses/M101N/about

I also read a book on Node.js:

 

When reading this book I felt at home first time I started learning web development – probably because I am really a back end developer.

After some consideration I came to conclusion that I need to start with API project first, so I added a new project on Github:

https://github.com/alishdev/mongo-explorer-api

Seed Project II

Oops, I did it again. Unfortunately, angular-fullstack generator only supports Angular 1.6 and I need Angular 2.

I searched web again, but was not able to find what I need. So instead I decided to use seed project I downloaded from the course I watched. It took me about an hour to fix all version conflicts, but I am finally able to run a simple MEAN app.

Seed project

Setting up a MEAN project from scratch is not easy. Fortunately, there are many generators which one can use. I did a little search and found this one:

http://angular-fullstack.github.io/generator-angular-fullstack/index.html

I generated my project several times and it was always failing to load – displayed LOADING message on start.

Finally, I figured that when I ran install command as recommended:

npm install -g yo gulp-cli generator-angular-fullstack

it installed generator-angular-fullstack v5 alpha 4. I checked their web site and the latest release was 4.1.0, so I had to uninstall generator and install version 4.1.0. Once I did it everything worked. Now I can build my app.

Initial App Design

Here is an initial draft of the application I am going to build:

mean-app

It will be an SPA. On the left I will place a tree control where one can select a data source. On the right I will place a grid control. Although Mongo collections can store documents of different types I guess most collections will contain documents of the same type so it makes sense to present them in grid format. When first displayed I will build grid based on fields found in the first document. Columns can be changed in Fields control (by clicking on hyperlink with the list of columns).

Cmd control is to display a MongoDB command used to get data.