Blank page when deploying MEAN.JS on Heroku - node.js

I'm trying out Node.JS for the first time using MEAN.JS as a starting point. When testing on localhost, everything looks OK. However, when deploying to https://raichu-com.herokuapp.com/, I get a blank page (the header menu flashes for a moment, then goes away).
I don't see any error in my logs, and the database seems to be connected properly (users and sessions collections are created). What could probably be the issue here?
I compared local and cloud Sources, seems like there's a little difference:
Also, while irrelevant to the question, it'd be incredibly helpful if you could name me some (other) examples of cloud providers for Node.JS that you think are (more) affordable and easy to use.

teamtreehouse also has a good tutorial on getting node to work on Heroku
it lists steps like
specify the version of node in your package.json,
include a Procfile,
etc...

In Heroku var config add
NODE_ENV
development

Related

How to deploy a React + Express app on a local network?

This is my first post here, let me know if I do it wrong. I would like to start by mentioning that I'm kind of a beginner developer. I've had a bunch of classes, but it's also my first time working on something of my own, from beginning to end (emphasis on "end").
I'm working on a relatively simple app, for user management (CRUD, with different levels of authorizations) and shop management. I was given the choice of the tools, framework, language, etc, to use, with the only constraints that 1/ the main device to use it will be a tablet most of the times 2/ nothing should be hosted online. I wanted to get more familiar with Javascript so I went with creating a React app (front) with Express Nodejs (back) and a MySQL database I access via Sequelize.
Development is going fine (for the most part thanks to many great posts here on SO), but I just got hit by the reality that I have never tried to build the app and see if it runs the way I intend. And I do not know how to do it. I should have researched that earlier.
So far, in development I always tested everything on PC and phone by running npm start (front end) and node server.js (back end), and the client runs in a browser (when using a phone I access the IP adress and port, like 192.168.x.x:3000). Backend listens to the 8080 port no prob, access to the MySQL database works as intended thanks to Sequelize. Frontend listens to port 3000 to display the user interface on the browser, and React makes it easy to develop features in front, and quickly troubleshoot them. Everything works fine, and as expected, anyone in the same network (and with a web browser) can access and use the app that way.
This is the behavior I want to replicate with a production build : having a computer host the build, and run the "server" so that the app is available to any device in the local network. So I guess I need to somehow make my build in a way to make it possible to turn on and off the "server" at will, maybe via a .exe ? Or turn it on at the same time as the computer ?
I know I should have researched that earlier and not doing so was a mistake. All I know is I'll have to use npm run build, to get the build folder, but I don't know what to do from there. Could you help me figure it out ? Among many things I'm not sure of, is whether or not the host computer (not mine) needs to have node.js installed ? Does it also have to have MySQL installed ? Do I make a single build that incorporates the backend and the frontend, or do I build both separately ? If so, how ?
Let me know if you need to see part of the code. Thanks in advance and have a great day.
EDIT : App was created using create react app
There are options to deploy on cloud like Cloud Servers. But I think you're looking for hosting the application on the local machine. You need to create a service, bundle the application and serve whenever you want.
Following link might be helpful
https://www.section.io/engineering-education/compile-your-nodejs-application-into-a-exe-file/

Node.Js app cannot be deployed to Heroku successfully

There's this tutorial which has a working chat app. You can find the chat app on GitHub.
I'm trying to deploy the git code to Heroku without success.
The GitHub is separated to client/server architecture so it requires to start node server and ng serve to client. Do I need 2 dynos for it? Do I need to edit the Procfile? The server is using process.env.PORT but the client one is hardcoded.
I'm very new to Heroku and Node.js so any help is meaningful to me.
The GitHub project that you ask about is pretty complex and it doesn't seem to have ane Heroku deployment instructions, without knowing the project it's hard to give you any concrete solution, but I'll try to answer in general how such applications are usually deployed and hopefully it will help you solve your problems.
For applications like this it is common to split the backend and the frontend part and have it deployed and hosted separately, either as two separate dynos if you want to host both on Heroku, or e.g. hosting the backend part on Heroku and the frontend part on Netlify or a similar service.
Another option could be to make the backend serve the frontend e.g. on the / path while having all of the backend endpoints available as /api/* or something similar (or on a different port but this is not possible on Heroku). Having it on the same host and port but with a prefix for the api has the advantage of simplifying the CORS related matters, as the origin is the same so no cross-origin issues arise.
If you're using WebSockets then it is slightly more complicated - make sure to read:
https://devcenter.heroku.com/articles/websockets
but either way you can still move your frontend to Netlify or something similar and keep the backend on Heroku if you want.
It's hard to give you any more specific answer to this question. I see that you are new here, so next time try to write a more specific question and narrow down the problem so that you can show a small code example that people could actually read and help you.

What are the most common workflows for full stack Node/Express development?

I'm a self taught developer and I recently started learning Node.
I've been using Ruby on Rails for a couple of years now, and I learned most of what I know from online courses. The most helpful course I took was one in which I learned the entire process of setting up a development and production server, setting up a database, etc. In this case I was using Cloud9 for development and Heroku for production. I already knew the coding aspect of building a web app, but this course really changed everything for me because I learned how "real" developers work, how to set up a good work flow with a development environment, how to run my code on a real scalable server, etc... Since then I've built a couple of RoR apps on Heroku.
Now I'm learning Node and Express, but I'm not sure what to do with my code. Can I just use Cloud9 and Heroku, the same way I did with RoR? Are there other common services I should know about, similar to how lots of RoR apps use Heroku?
I'm looking for a small push in the right direction - the same one I had when I was learning Rails - to get the ball rolling. Any information will be greatly appreciated! Thanks
You seem to be asking both for workflow and environment pointers, so I'll give you a tiny bit of both
Env
With node, it is perfectly fine to have your dev environment locally and only host your staging and prod environment
If you don't have specific requirements in terms of hosted environment, use what you are already comfortable with:
Heroku is perfectly fine
OpenShift is a great alternative
Pivotal seems to be alright
Google App Engine and Amazon Elastic Beanstalk are most likely overkill
 Workflow
This is a very broad subject. Everyone has their own ways of doing things. At a minimum I would get familiar with the following tools or concepts:
npm (default package manager)
alternative: yarn (faster, shinier)
eslint (linter for javascript, indispensable)
Gitflow (sane way to manage your git repo)
Semver (what is semantic versioning)
Unit Testing with Tape (it's 2017, you need tests)
alternative: Mocha (more functionalities, some you don't need)
Airbnb Style Guide (a decent baseline for style)
alternative: Google Style Guide (I use this one)
There is also this overwhelming but great list, which is a bit too much but should list anything else you might need
Finally, if you want to work more with Express, I would suggest going through this MDN series Express Web Framework. Once that is done, I would installing the Express App Generator, create a test app and looking at the structure of files and folders

Procfile on Node.js/Heroku

I am rereading this tutorial
https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction
to polish my understanding of Node.js/Heroku.
There is a section called Define a Procfile.
But when I go to see my own apps to check what is inside this file.
I see that a number of apps (not all) have no such a file and are working fine.
So, what is going on? When is Procfile necessary? What happens if there is none?
When is it better to have one?
To help you get started, Heroku will try to automatically detect the type of your app and start it appropriately, even when it doesn't have a Profile (see example here - http://blog.taylorrf.com/blog/2014/12/15/heroku-default-server/ ).
For example in Node, if you have an index.js file and a package.json file, it's probably a node app that could be started with node index.js.
While convenient, this is considered bad practice, because:
Heroku may change how they auto detect apps in the future, breaking your deployment.
You might be missing out on some configurations / optimizations by doing so (see article linked above).

Angular 2: NodeJS vs XAMPP

I'm starting to learn Angular 2 and I am quite lost in some subjects... like the server.
Following the instructions for a Quick Setup I installed Node and npm... when I run the project in Node everything goes perfect. The label <label> gets recognized and it gets the template for that label (in this case an html form).
But when I run the same project in MAMP, that label doesn't get recognized and comes out a 'Failed to load resource' error in the console for the template associated to that label.
So I guess Angular 2 is dependent on Node and that's a problem because I want to upload later the project and I think my hosting plan doesn't allow me to run Node...
I don't know if I'm prejudging, maybe anybody can help me clear this... Thanks.
Angular2 has niether any Relation nor any Dependency on node.js.
You can write Angular2 app just using Angular2 packages without using node or mamp or xampp and host that app.
If you have written any thing in Angular2 and node.js combination then you can host it on free services like Heroku for testing purpose.
Final solution:
Ok, wrong again. I'm the worst detective ever.
it works with TypeScript as with JavaScript, just need the "npm start" to compile TypeScript into JavaScript. Then it automatically runs on a "localhost", but once compiled, you can run the index.html like any html, without the need of a server, like you were all saying, it's not like .php which makes all sense.
so the problem that led me to all of this misunderstandings was that the Node "localhost" worked and the Apache "localhost" didn't, and the mistake was that I was calling into #Component: templateUrl: "../template/file.html", and the path is written in "/app/whatever.js", but it's working from "index.html", so it would be just templateUrl: "template/file.html" and everything works as expected.
what I don't know is why it works, with the wrong path, when I run it from Node! an error would have saved me a lot of time... and yours...
Well, at least I have clarified a lot of concepts in this investigation. Thank you all!
Thanks, Zeeshan, in the links you gave me the clue. As I told on my original message, I started following the Quick Start, but I forgot to mention I chose TypeScript over JavaScript... and that was the "mistake", because TypeScript needs Node to compile to JavaScript, as I'm guessing for the results I get:
the TypeScript project only runs after executing it in Node via console ("npm start") and not in Apache, that doesn't get all the Angular part (it gets the tag <whatever></whatever> but doesn't translate it into the content <whatever><h1>Hey</h1></whatever>)
with JavaScript it works "as always", without need of a server, as you were telling me
So I'll have to choose between using TypeScript (and all the official documentation!) and host it in some platform like Heroku or work with JavaScript without needing an specific server so I can still work with Apache.

Resources