I decide to post the Mongo Explorer API project to Heroku.
Here is what had to do:
- Create an account on Heroku
- Installed Heroku Command Line Interface (CLI) with homebrew:
brew install Heroku
- Logger on to Heroku:
- Created an app:
- Deploy the code:
git push heroku master
- 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:
- I had to add start script in package.json. Heroku uses Procfile, but if file is not found then it looks for start script:
“start”: “node app.js”
- Heroku assigns port dynamically, so I had to change startup code from: app.listen(config.get(‘NODE_PORT’));
var port = process.env.PORT || config.get('NODE_PORT');
- 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
The last thing was adding CORS support.
And now my app runs on:
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:
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/
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:
- put connection info into request parameters (not safe)
- 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.
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:
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:
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.
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:
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.
Here is an initial draft of the application I am going to build:
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.