Not exactly easy!

I made the announcement last week that I was going to be creating a new app called PrayerSurfer. As with all new announcements, that was the easy part. I've been thinking about this app for the last 10 years, so I did have some thought on what it was going to do. Not surprisingly though, there was still some unanswered questions.

Question #1: Database

I am a MS SQL developer by trade. I've been trained in relational databases, so they come very natural to me. However, with this app I wanted to look into mongoDb. I've heard a lot about it but every time I've looked into it, my eyes glazed over and went back to my relational databases. What I needed was a good tutorial.

I happened to get lucky as the very first video tutorial I found was the one I wound up using (3 part series). It wound up being VERY simple. The tutorial gave me everything I needed. From the mLab setup to the code to interface with the database.

I decided for the demo, that I am going to use MongoDb for my database.

Question #2: UI

This really isn't a question, as I always figured I would do it in vue.js. Vue is dead simple and I like that about the framework. However, I did briefly think about doing this in Angular. I do Angular at work, & my understanding of that framework is growing. But for now the UI is in Vue.js

As I was going through the tutorial, it occurred to me that the project that he was building would be a great base for prayerSurfer. However, I would quickly run into some issues that wound up taking me a large part of my weekend.

Issue: How do I deploy my Node/Express app with the UI code?

I followed the tutorial exactly. Locally the app was working just as the tutorial was. I was stoked, and I thought I would have the demo up by Friday night. However, when I tried to deploy it to Heroku I got some 503 errors. Since this was my 1st attempt at doing anything with Heroku, I was stumped.

Attempt #1

After the initial deploy to Heroku, I looked at my previous vue.js project that was using a Node/Express server (on a different port) and what I found was that I had not figured out how to get that to work either! It appears that my code was still using localhost:5000 instead of running on a separate instance on my server. I thought I was a lot further with that project than I actually was. I was gutted by this, as I started to realize that I don't know how to actually do this.

Attempt #2,3,4,5...

I tried to organize my code in different ways. Retrying the deployment to Heroku as well as to my windows hosting account. I created different repositories (I now have 5 different repositories that all have the same code in it!). Nothing was working. I asked around on twitter and got some suggestions on alternatives. I tried webpack, I looked into Docker, I looked into different Heroku tutorials. I was stuck & ultimately I went to bed frustrated.

This morning

I'm sure this was one of those problems that my brain was working on over night. As I woke up early on Sunday and tried the following:

• Create my node/express app and deploy that to a Heroku instance.
• Then create my UI only vue.js application separately and deploy that to Heroku.

The API application worked great! I was able to call it in Postman and it was returning data. However, the client application deployed but I was getting an "application error". This lead me to abandon Heroku for the client side application and I deployed my dist folder to my windows hosting account that I have and low and behold they are talking to each other!

You can see it here

Obviously, I'm very pleased that I was able to make progress. But I'm not satisfied with how Node/Express & vue.js work together. It feels very clunky, which is probably on me. I need to see if I can host the entire application on 1 server. I can't be the 1st person to have this issue. So, if you have an easy way or a good tutorial that you know of, please leave a comment below.

Next Steps

Everything is next! Styling, functionality, some sort of security, administration functionality, code clean-up, repository clean-up. I have a lot of work to do. But getting to POC/demo up and running feels like a big hurdle to over come.