How to Deploy MERN stack application on heroku - node.js

I have made one MERN (i.e-Mongo,Express,React,Node.js) application and wants to deploy on Heroku. I created the react App using create-react-app and folder structure is given below.
React-frontend
---->Node_modules
----->Public
------->src
------->package.json
---------> readme.md
React-backend:
----->Node_modules
------>config
-------->Controller
---------->route
------------>server.js
----------->package.json
Here I have other project for NOde.js and MongoDB operation and its instance (e.g.http://localhost:8888) is called from React-frontend to deal with the database. I need steps to deploy the total application into Heroku.

You'll want to deploy the app using the Heroku Node.js buildpack:
https://github.com/heroku/heroku-buildpack-nodejs
It sounds like you're pretty new to Heroku, so read the README for that repo thoroughly, including the documentation for Getting Started on Heroku with Node.js.
Using Mongo with Heroku will require using one of the several MongoDB add-ons.

Related

Hosting Nodejs Mongodb website with frontend but not React

I'm very new in MERN stack development, I made a blog website with backend used HTML CSS JS NODEJS & MONGODB. and I want to host in netlify and heroku.
Tried So many times but got error.
My Github repo link :
here
Can any one completely explain how to host ?
If you're just getting started with hosting your apps, try a newer generation app hosting platform where you just connect your GitHub repo and it does everything else for you.
Node.js and Mongo is perfect for Adaptable.io. The free tier includes a Mongo database. Here's the guide to deploying a Node.js App with MongoDB. You could also try Render but they don't have MongoDB.

trouble deploying full stack application on heroku

I have made a full-stack app with react js and node js with express and MongoDB but I am having a little bit of difficulty deploying I first tried to deploy the front end but I was getting the invalid host header coming up when I tried to deploy in Heroku its been tested and works fine in the dev environment.
But also my application has two separate git repos one for the back and one for the front end and every tutorial I have seen to deploy they always have the client in the same folder as the server.
Can someone either tell me how to deploy or point me in the right direction on how to deploy.
What you have to do for React/Express/Node/MongoDB is,
build your frontend app first by using "npm run build". This will create a build folder under your app folder.
move your "build" folder to backend app folder.
update your backend app to use "app.use(express.static('build'))".
Then you can push your code to git and Heroku and try to deploy it.
There should be some tutorials available on Heroku website.

How to deploy ReactJS frontend and NodeJS/Express backend from the same project folder?

GitHub repo: https://github.com/byeung2019/MIQSTechnologies
Hey guys,
This is my first time deploying a website online, so I'm confused and anxious of where to even begin.
My frontend is built using ReactJS, and my backend uses NodeJS/Express/GraphQL to fetch data from an external API (CryptoCompare).
My website works locally.
My frontend and backend each has its own unique package.json and .env file with its respective dependencies and dev dependencies.
Through my research it's been recommended to host the frontend using Netlify, and the backend with Heroku.
However, since this is my first time deploying, I'm confused about the following:
How to deploy the frontend and backend separately from the same project folder, with them having their own respective package.json file.
Would I need to rewrite code in index.js within the backend folder in order to connect my frontend GraphQL requests to my backend.
Thank you so much!
First of all this is a complicated question to provide an exact answer, you will have to google and learn few things. But here is a high level idea.
After developing any app using react or angularjs you can follow the build instructions and build the app. It is ng build --prod in angular for example. Then you just need the build to deploy and it does not depend on package.json
You have to deploy your backend app as it is and there is few options then you can follow most common is,
Using a proxy like nginx
Host your build inside the node backend
Here is a guide how to host your apps using nginx for nodejs and angular
https://www.journaldev.com/27234/nginx-reverse-proxy-node-angular
Hope you will get the idea.

How to deploy nodejs, express, socket.io application

I have worked on a project and its in my local.
I have used express framework with socket and other packages.
I'm new to this and not sure what deployment options we have.
I see some options like AWS, Heroku and etc.
Heroku looks simple.. but at one of the step they are asking to publish to git and clone from there..
I was wondering why do we need to publish to git to deploy it to production.
Currently I have my app in my machine and I run usually by node app.js.
I'm not using any data bases. Can any one guide me how do I go about it?

Deploying a Sails.js app to Heroku?

I have limited experience deploying Node.js apps -- how can I deploy a Sails.js app to Heroku?
I've heroku logined and heroku created my app already.
You should check out this github repo : heroku-sails
It should get you started with sailsjs on heroku
There is a discussion around this particular github repo here on the sails.js google group
These are also resources that can help you get your app running :
Sails Deployment Guide
An answer of sails.js author to the same question
I want to prevent any confusion for those who are familiar to node deployment on heroku. There are a lot of guides to deploying node apps to heroku and a sails app is really no different. If you start a sails app by typing "node app.js" in terminal it will work. Here is the guide put out by Heroku for node apps. The only thing different is that you have a sails rather than a plain vanilla express app.
https://devcenter.heroku.com/articles/getting-started-with-nodejs
I've used this to deploy my sails apps no problem.
First of all create sails js Website or project
then change setting in sails js project as below:
in project config->env->production
//remove from comments
onlyAllowOrigins: [
'https://example.com',
'https://staging.example.com',
],
//remove from comments
trustProxy: true,
then deploy on heroku

Resources