How to deploy live Node.js server using Heroku - node.js

Sorry for confusing title, new to Node.js and Heroku, but trying to quickly pick it up.
I currently own a domain, and my first goal is to have it set up so I go to the domain, it uses Heroku to wake up and run Node.js, run my web.js, and display "Hello world".
I've already gone through this heroku/node.js tutorial, and so I understand how to set up stuff locally, push to the heroku remote, and run my Node.js server with it (am I understanding that correctly?). However, I couldn't find anything for how you actually put your Node.js files onto your external server (so, in this case, my domain), and connect the service of Heroku to those files, allowing my local machine to interact with the node on my server.
If there's any tutorials or pages you'd recommend, I'd appreciate it. Kinda stuff and most likely confused on quite a few things here. Thanks!

Heroku apps have their own git repository. So, you push from your local git directory to heroku's git remote.
Setup:
git remote add heroku <git://yourherokurepourl.git>
and then every time to deploy:
git push heroku
That's all needed to get your node.js files on heroku's server. Heroku follows foreman as process launcher. foreman needs a special file in project root called procfile. procfile has simple unix commands to launch processes in each line :
web : npm install && node app.js
So, when you push your project to heroku's git. It will look for procfile and launch processes defined there. You can place more commands here. Better install foreman on your local/development machine and test using that.
In heroku app settings you can "bind" your www.domain.com address to node app running on heroku's server. You have to do the same in settings of domain provider. The DNS will now route requests to www.domain.com to your app's server IP.
On heroku, configuration lives in environment. A lot many process.env.* are available on heroku. You can locally simulate this by providing .env files to foreman.
finally, in your node.js code make sure you listen on value provided by process.env.PORT.
Connecting servers:
Use Request module to directly call other server urls.
Or, Let server's subscribe and publish to a centralized service bus.

You are describing operating two servers. One on Heroku, one "on your domain". I suspect you haven't made the connection that you can merely get your domain to point to your Heroku server. Contact your domain name provider with the heroku url you are using and they can do this for you.
In effect they will "point" your domain to your Heroku node.js server and from there it will act as you expect.

Related

Unable to deploy an application on Heroku due to some port problems

I've been trying to deploy a repository https://github.com/evelynhathaway/triton-poll to heroku, but since I am fairly new to NodeJs, I am unable to detect the problem. But I guess it's due to the port because heroku doesn't use static ports.
Any help would be appreciated.
Thank You in advance.
I looked at the fork and you did a couple of mistakes. I don't have the time to fix, test and get it to run but I can show you how I solved it before.
All the relevant code changes can be found in this commit (different project):
https://github.com/vegeta897/d-zone/commit/63730fd7f44d2716a31fcae55990d83c84d5ffea
The project is divided into a client and server part.
You can see here, https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/script/websock.js#L16, how I combined server and client into one. This only works because the static client files are served via http/https and the server uses websocket, no http ws/wss
When you publish a server on Heroku you need to bind to their dynamic port. However when you want to access the web server you do not specify a port. The hostname is automatically translated into an ip-address + port combo. I did this here: https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/web/main.js#L44 When deployed on Heroku the socketURL does not contain a port number.
Finally you bind to the server. I did it here https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/script/websock.js#L55 and here https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/socket-config.js#L30
You also have to make sure that your clients files are built properly and served.

How do I setup nginx on a nuxt.js website preferably on Heroku

I am having a problem setting up nginx on a webserver.
I am deploying my application on Heroku and I need to have nginx infront of nuxt.js.
The docs say a little on how to use nginx on nuxt but only a little. They describe a
conf file but they do not state where to put the conf file. And then they go all the way to Laravel.
I am using node.js and vue.js and I turned to nuxt.js thinking it was easier to set up nginx on it.
Any help will be appreciated.
OK.
Finally, after giving up 5 times I have set up nuxt.js with nginx heroku buildpack.
For those who are interested in how I did it checkout this repository.
https://github.com/rsgilbert/hellonuxt.
In there you will find a file called hellonuxt-steps that covers all the steps I took. From creating the nuxt app to deploying and then to setting up nginx and redeploying. You can benefit even though you are not using nuxt.
These are some of the important webpages I visited that really helped me understand what's happening and how to set up nginx:
Have you managed to make your node nginx proxy setup on Heroku work?
Heroku + Node (Parse server) + nginx not working
https://elements.heroku.com/buildpacks/beanieboi/nginx-buildpack
https://github.com/heroku/heroku-buildpack-nginx
The last one was really annoying. For instance, they say "You touch /tmp/app-initialized when you are ready for traffic" ?? What's touch?

running frontend and backend on different ports

Hi Im running my frontend (create-react-app) and backend server (express.js) on different ports but on the same host.
For example: frontend is on 127.0.0.1:3000 and backend on 127.0.0.1:3003.
in my package.json:
{...
"proxy": "http://localhost:3003",
...}
Everything worked fine till I didn't migrate my app to remote server.
My app started to refresh unexpectedly when I'm trying to send http request (axios) to server (probably due to bad proxy settings).
So I have frontend app running on 35.125.320:10:3000 and server is running on 35.125.320:10:3003. My http requests was unexpectedly cancelled. (I checked the network ). So I changed my proxy settings to
{...
"proxy": "35.125.320:10:3003",
...}
but anyway my app is still refreshing when Im trying to make http req. on server. I think the problem is that I can't reach my express backend server. So proxy is forwarding my requests badly.
UPDATE
scenario:(Im doing two post requests)
1) first request still passed (app is not refreshed)
2) same request passed (but sometimes app is refreshed)
3) second is still cancelled by browser.
QUESTION
How can my frontend communicate with backend server via proxy when they are running on different ports but on the same server and domain ??
Thanks for the answer.
Solution:
The problem was that I used proxy in production that is only suitable for development.
I added this line in my express.js server :
app.use(express.static(`${process.cwd()}/build`));
app.use(express.static(`${process.cwd()}/public`));
I make a build and serve js,css files from my build folder. And also I needed serve static files (images, folders, etc...) from my public folder.
This problem can also cause cancelling http request by browser on production. Means, requests weren't able to reach server.
To make your app publicly available, you will want to make a production build. You mentioned in a comment that you "run npm build and then serve this build as static file in express.js". This is a great way to make your react app publicly available. As it says in the create-react-app documentation:
npm start or yarn start
Runs the app in development mode.
When running yarn start or npm start, you are also given a notification that says "Note that the development build is not optimized." The best option will be to run yarn build or npm build and find a way to serve those static files as you are doing.

Starting Node js app

So I created a node app that uploads pictures and the app works locally, I can upload stuff from all of my home devices and they end up in my designated upload folder. Next thing is to go global, so I moved the app to an FTP server and... I don't know how to start it. I can't go
node server.js
like I do on my PC in cmd, can I? I open my index page but when I upload something I get: Server responded with 0 code. Just like when I open my index.html without starting the node app trough cmd on my PC. I'm a front-end guy and I don't know almost anything about servers and I've searched quite a bit around the internet, but to little avail.
One fairly quick way to get this set up would be to sign up for a virtual server on Amazon using their EC2 server instances. Just choose the basic instance (whichever one is free for the first year) and then install Node and run npm install on your root directory once you have uploaded the files. Also if you are going to want this site accessible with your own domain you will have to set up an elastic IP address also available via Amazon (AWS). Furthermore if you want to have your url accessable via the standard port 80 (meanning that you don't have to type your url:[port number]/path then you might want to look into setting up a reverse proxy using something like nginx.
I know this sounds like a lot and i won't lie to you this is kind of complicated but there is a lot more to getting a node application up an running that you might expect.
Before a node app can run on a server you need to make sure that:
Node is installed
npm install has successfully run / or all dependencies must be transferred to the app directory in the right place
The port of the node server should be reachable, so the routing must be set up correctly.
Also, you can't start a program from an ftp prompt usually.

Using MongoLab in Heroku doesnt work unless I provide CC number?

I have developed a nodeJS application using Angular as the front-end (used MEAN stack and plan to use Bootstrap with it) and when I try to deploy it to Heroku, whenever I run this line: heroku addons:create mongolab I get the following output:
bruno#bruno-HP-epicsauce:~/herokuFinalApp$ heroku addons:create mongolab
! Please verify your account to install this add-on plan (please enter a credit card) For more information, see https://devcenter.heroku.com/categories/billing Verify now at https://heroku.com/verify
bruno#bruno-HP-epicsauce:~/herokuFinalApp$
And in both sites (mongolab and Heroku) it says it's free... I have already defined the heroku env variable called MONGOLAB_URI, like this:
bruno#bruno-HP-epicsauce:~/herokuFinalApp$ heroku config:set MONGOLAB_URI=mongodb://USER:PASS#ds041643.mongolab.com:41643/dbNAME
Setting config vars and restarting rocky-sea-9859... done, v4
MONGOLAB_URI: mongodb://USER:PASS#ds041643.mongolab.com:41643/dbNAME
bruno#bruno-HP-epicsauce:~/herokuFinalApp$ heroku config | grep MONGOLAB_URIMONGOLAB_URI: mongodb://USER:PASS#ds041643.mongolab.com:41643/dbNAME
bruno#bruno-HP-epicsauce:~/herokuFinalApp$
It still doesnt work...
In the git repository I have the following file structure:
The app is listening on the port: process.env.PORT instead of some local one and the package.json file contains the correct dependencies as it was automatically generated with npm init.
Inside the procfile I have the usual reference to the file that contains my server side code:
web: node server.js
The app.js contains the Angular client-side code.
Is there any 100% free way of deploying an app in Heroku with a DB hosted somewhere?
You have two options to use MongoLab services on Heroku:
Connect to existing MongoLab deployments from Heroku (no credit card required)
Add MongoLab as a Heroku add-on (credit card required)
Since you have set up MONGOLAB_URI, I assume you created a separate account with MongoLab and created a new MongoDB deployment. In this case you don't need an addon. If you have your MongoDB driver configured to use the connection URI, setting MONGOLAB_URI config on Heroku is usually enough.
More info on this here
Heroku asks for a credit card for verification purposes. It won't charge you unless you choose paid addons.
You must verify your account if you want to:
Add any add-on to your app, even if the add-on is free. The only exceptions to this are the free plans for the Heroku Postgres and Heroku Connect add-ons, which can be added without verification (source)
A message from their staff:
You won't be charged if you only use the free plan. Unfortunately some
people use free add-on plans for evil purposes so we need a way to
verify the account. Right now we do that by requesting a valid credit
card, and we may add more verification mechanisms in the future.
I'm in the same point than you, but as you can read, there is no problem to add that information (but to be honest I'd prefer another way as well).
I don't know it will actually charge you, it just wants CC to verify. But you could always just use http://progrium.viewdocs.io/dokku/ or Digital Ocean VPS (which is not actually harder than setting up your dev machine as long as you aren't expecting perfect security etc.).
You do not need mLab MongoDB add-on, just manually add Config Vars

Resources