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.
Top comments (2)
Hello,
I'm no professional, but I see what you mean. I've had that same problem, but with React (I've also used Vue). I believe the source of the problem is that the Vue framework (and in my case, React library) functions on it's own server, and the database (i.e.: server-side) runs on its own server too. The way I corrected the constant problem is by:
I'm just not sure yet if that's a production-allowed method that is practical in real-world scenarios.
I'd love to hear & see the results if it works out for you. Let me know! Thanks for sharing.