I don't know how to deploy this - node.js

I'm relatively new to StackOverflow and deploying. So be patient if this isn't the place to ask about this, any kind of help will be truly appreciated.
The thing is, I have a web app with a Front End made with ReactJS, a Backend with Node and Express, and backed up by MongoDB.
The app is a bit simple, you can login/logout, post photos/gifs, have your own profile etc.
As of now, My React app communicates to the backend with a Proxy, the images are a static folder served by express (so that its easy to fetch the images on react), and so far the tests went good, I set up Mongo Atlas so that I don't have to worry about that in production.
The point is... I don't know exactly where or how should I deploy this, I'm considering using Heroku but since I don't know if it supports local storing, and I'm not sure if it'll work, same for Netlify. I've been thinking of composing up docker images, renting hosting on Linode and deploy the images there.
So far my project tree looks like this
Project -> .git
client->React Stuff
server->Node Stuff + Images folder
//each with their own package.json and configs/env
If you have a document or a video that would help me know about deployment, I'll really appreciate, and also if you think that I should use Heroku/Netlify/etc or just wanna leave a msg , please do so!, tyvm in advance

From what you mentioned it sounds like Heroku should do the trick. Heroku uses git to store files. Here's a guide that should help you set it up

Related

How to deploy node.js app onto a production server?

im new to node.js and have struggled to find information about deploying apps.
Say that I have written a small one file node.js app and would like to deploy it onto a prod server. If I deploy the app.js file alone I cant use "node app.js" to run as the app is missing package.json and the node modules. But deploying all these files/folders to the server seems like the wrong way to do it as it would take ages to transfer all the node_modules.
The only resources that I can find online use localhost node server which doesn't really show what I need. I'm using MobaX to deploy to a specific IP if this is useful.
Sorry if this is a stupid question, most of my experience is in front-end so haven't had the opportunity to play around with this and don't have anyone to ask for guidance.
Please don't mark down the question, I will happily edit the question if any feedback on doing so is provided.

Production Config between Intranet REST server and React Apps

Folks, forgive me if this is a repeat question: I couldn't think of how to phrase it in the search engine. I'm developing an Intranet-based set of applications with the front end (individual apps) in React and the back-end using node.js and Express. I had been using Electron JS but like the Express solution since all web browsers on the Intranet can use the apps.
I'm running into a bit of a circular dependency when it comes to production, though. Since my REST back-end handles all local calls (like node fs) I use REST calls to load and save preferences files from the front end. However, I'd like to be able to set the REST URI from a config file or setting. Since the only way I can access this setting is a call to the REST back-end, I'm stuck. It's possible the client may want to change the host URL and the port for the server. This will affect all axios calls to the REST back end in every React application I have. Instead of calling http://localhost:5000/api-call/ I'd like the localhost and port number to be read from config.
I am transpiling the React apps and storing them in a static folder underneath the REST server. I would like to avoid something complex or additional like REDIS or another local database. My projects don't require any heavy database setups.
Am I simply implementing poor architecture here? I even thought of env variables but then will get into setting them on each client's system which takes away from the flexibility of using a web server in the first place. Any thoughts to move me in the right direction would be greatly appreciated!!!
I knew if I posted this, I might find an answer.
I'm not sure how elegant a solution this is but I could test the env for development vs. production. If in production, I can then use window.href (host and port) to get the information I need. I think this will work but would still love to hear some other thoughts from those with far more experience than I have!

How do I properly upload a localhost website online?

I have a ReactJS project for my Front and a NodeJS project/server using Express for my back. My Front depends on my Back because for example in the Login part, I ask the server if the user is already in our database.
To execute my project, I just open 2 terminals and do npm start in each Front and Back.
I know that in order to upload a website with a personal domain name, I should:
Buy a domain name
Pay a subscription to a web-hosting website like GoDaddy, Bluehost, Hostgator etc.
If I pay a subscription to some web-hosting website, will I be able to put my Front AND Back? I have seen some tutorials online and people just make a simple HTML/CSS/JS website and upload it. I never see anyone uploading their own Server and making requests to it.
I'm not asking to merge both my Front and Back. I want to know how do people upload online their React front and Node Server online, for them to be always executed and talking to each other. I just can't see the relationship and explanation on how uploading both.
Your react frontend doesn't really need a server, you'd need to build a release bundle and that can be served from any static filehoster. For your backend though you need a node.js hoster like AWS or heroku, follow their tutorials to upload your project.
You could also then serve both from the same hoster and read into connecting frontend and backend like mentioned by #FedeSc
An easy solution for your use case could be digitalocean or any similar site that offers a whole virtual system to operate with. You can then ssh into the server as it was your computer and use the terminal there. It is cheaper than Heroku if you wish to make your site available without 30 seconds waiting time (that is what Heroku does in a serverless fashion if you are on a free plan). There are dozens of sites like this but I had good experience with digitalocean and a basic plan is $5/mo.

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.

Blank page when deploying MEAN.JS on Heroku

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

Resources