Not exactly easy!
Tags: webdev, programming, mongodb, node
Published: 2019-08-11 12:42:30

---
title: Not exactly easy!
published: true
description: My journey to a demo
tags: webdev, programming, mongodb, node
---

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.

<strong>Question #1:  Database</strong>

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](https://www.youtube.com/watch?v=j55fHUJqtyw&list=FLe9fE_DjQML5Ap-VHA7zX9Q&index=3&t=1345s) 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.  

<strong>Question #2: UI</strong>

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

<hr/>

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.

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

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](http://www.heroku.com) I got some 503 errors.  Since this was my 1st attempt at doing anything with Heroku, I was stumped.

<strong>Attempt #1</strong>

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.

<strong>Attempt #2,3,4,5...</strong>

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.

<strong>This morning</strong>

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](http://webdad3.com/prayersurfer/)

<hr/>

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.

<strong>Next Steps</strong>

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.