DEV Community

Cover image for How To Deploy a Full-Stack MERN App with Heroku/Netlify

How To Deploy a Full-Stack MERN App with Heroku/Netlify

Nick on August 29, 2020

This post is intended to be a guide for those that want to deploy a full-stack MERN app. It will be very specific on steps so it's a bit of a read,...
Collapse
eugene362624 profile image
Eugene362624 • Edited on

hey, guys. idk what's wrong, but i can't connect my server with client. can somebody help me with this? the only thing i know is that links which i used on localhost is not working and they looks like this 5f85f700cdda755ccf152d30--medvedev... . it doesn't look like it should be

my git github.com/Eugene362624/pdf-app

Collapse
stlnick profile image
Nick Author

Hey Eugene, can you briefly run me through what the process is for using your app and where it fails?

I see it’s something to create a pdf after entering some info but at what point does it not work?

Collapse
eugene362624 profile image
Eugene362624

in general, the idea is this: this is a project for an internship in a company. There is a database for 10,000 records, it should load in about 10 seconds. Then a list of entries from mongodb should have appeared. There they can be changed and deleted. The routing itself does not work, I cannot follow the links and there is no download from the database. everywhere it gives a 404 error, so, apparently, I did not correctly specify the URL of my server to heroku. but I don't understand where .-.

Thread Thread
stlnick profile image
Nick Author

I’m looking through the code now to maybe find some potential issues. One thing popped in my mind though.

Did you specify in your MongoDB cluster to allow Network Access from either all IP addresses or your Heroku IP address? (Step 7 in the post)

Thread Thread
stlnick profile image
Nick Author • Edited on

So far checking out your code I noticed a couple things. To be clear Heroku is where you would've deployed your server. So in your frontend is where any axios request you're making should go to your Heroku URL which I gather is https://medvedevs-pdf-app.herokuapp.com.

I'm just going to try and list out some of the potential issues / confusions could be.

  • In App.js you do not have a component specified for your root url. <Route path='/' /> should have a component property attached. Not sure if you wanted something for that Route, if not, you could remove that.

  • Looking at your Network request it's trying to request your Netlify URL for the /files/sync path and that is a path you have defined in your backend/server.js not your frontend. I'm not exactly sure why that is honestly looking at your code nut it's trying to request https://5f85f700cdda755ccf152d30--medvedev-pdf.netlify.app/files/sync instead of https://medvedevs-pdf-app.herokuapp.com/files/sync.

  • One big thing in server.js is you need to remove the base URL from all of your routes. https://medvedevs-pdf-app.herokuapp.com needs to be deleted. Your server code lives at that url so you don't have to specify that part. Only specify the rest of the path - so your paths should just be /, /files/:id, /files/sync, /files/:id/update, and so on. Otherwise your request is going to https://medvedevs-pdf-app.herokuapp.com/https://medvedevs-pdf-app.herokuapp.com/files/sync which your server will not pickup.

  • In your frontend inside of File.jsx in your methods CreateFile and deleteFile you history.push() to your server (Heroku) URL. With react-router's history you should be pushing to valid client-side routes or essentially different URLs you'd see in the browser address bar.

  • In File.jsx, the createAndDownloadPdf method, you history.push('/files') and also your Delete button at the bottom of the file Links to={'/files'}. You don't have a Route defined in App.js nor any conditional renders dependent on the URL path being /files.

I'm not sure if this was working prior to deployment to Heroku/Netlify but it seems there are a few places where you may have gotten mixed up on making axios requests to your server for a task to be performed and defining your client-side routes to display certain data.

First thing I would try if it was working prior is to absolutely change the base URLs in your server.js, that is definitely one part of the bigger issue.

Thread Thread
eugene362624 profile image
Eugene362624

I am really very grateful to you for the time spent on "consulting" me :) many thanks for the detailed description of the problems in my code, I will fix them. yes, on localhost this service turned out to be completely working, but I will definitely try to make it work on the hosting

Thread Thread
stlnick profile image
Nick Author

Absolutely, no problem. A second set of eyes can be a life-saver sometimes! Throw an update in here if it gets working or not and I can try to dig a little deeper. Good luck!

Collapse
salyadav profile image
Saloni Yadav

Did you not get a CORS error while making call from netlify to heroku?

Collapse
stlnick profile image
Nick Author

I did not. In my Express router I used the cors package so app.use(cors()) to prevent that.

I do, however, need to remove that and just specify to allow requests and responses between my Netlify and Heroku urls. I haven’t done it yet but I do know it can be done to allow those two urls to communicate.

Collapse
salyadav profile image
Saloni Yadav

Thanks for replying 😀

cors() package did not help with browser hosted on one domain making a backend call to a different domain server. I had to add "_redirects" file specified by Netlify documentation to redirect the browser-server call to server-server call between netlify and heroku.

Anyways, I followed this article to get my fullstack running. So a BIG BIG THANK YOU!! It was very helpful. 🤗

Thread Thread
stlnick profile image
Nick Author

I'm very glad it helped! And now you've helped me by giving me a better idea of what I'll need to do to set my cors up properly for Netlify instead of allowing all cors. So thank you!

Thread Thread
jealousgx profile image
JealousGx • Edited on

I am getting the same cors error from the browser. I tried surfing the internet for the solution but could not find one and could not understand the Netlify's documentation either.

Now, the thing is: I want to register/login using my backend to save all the data and to retrieve it. I have changed everything from the client side, it looks fine to me and the server is also up and running. This is the only issue. How did you resolve it. Could you elaborate it?

--
For some reasons, I can not upload the image here but I am pretty sure you got the same error as mine. It's like:

Access to XML....(BACKEND URL) from origin (FRONTEND URL) has been blocked by CORS policy....

@stlnick
@salyadav
There is more to the error but I am just pointing out the main one.
I hope you get the point and help me resolve it asap!

--
Cheers~

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
salyadav profile image
Saloni Yadav

github.com/salyadav/gundoosmean-cl...

This is the reference to the client side code hosted on netlify.

github.com/salyadav/gundoosmean-se...

This is the server side code on heroku.

The reason why this will not be an issue on local, let’s say if you have your frontend backend in different port is because both are localhost and you are not actually making a cross origin request.

There Are other ways to resolve this core error, which is including your cors header in the http request that you are making.

Adding __redirects is another way.
Things to look out for-
The base_url changed to herokus server, and the redirect for the api calls.

Let me know if the reference to the github also doesn’t help... we can debug your code further.

Collapse
kenkarma profile image
kenkarma

Hey Nick, I'm having trouble deploying my client and I get the following error.
Can you help me out?
Failing build: Failed to prepare repo
Failed during stage 'preparing repo': Error checking out submodules: fatal: No url found for submodule path 'server' in .gitmodules
: exit status 128

Collapse
stlnick profile image
Nick Author

Okay just to get some context.

Are you deploying client to Netlify?
And is your project structure the same as mine in the article? As in do you, in the root of your project, have a separate client and server folder?

Collapse
kenkarma profile image
kenkarma • Edited on

Yes exactly the same
I deployed the server successfully on heroku that's fine, but i'm getting errors when i try to deploy the client on Netlify

Thread Thread
stlnick profile image
Nick Author

Okay, great. Looking it up through google it looks like there’s some permission issue with the repo and Netlify being able to clone it. Check the link below out and go to “Build fails with exit status 128”. Also maybe check out the “Troubleshoot repository linking” section. There’s a few steps to follow to try and correct the issue.

docs.netlify.com/configure-builds/...

Do you own that repository? As in, is it yours alone and do you have admin privileges on it?

Hopefully those steps can remedy it but let me know if not and we can dig deeper.

Thread Thread
kenkarma profile image
kenkarma

Somehow I got it to work by deleting the repo and restarting everything. Thanks for the quick reply though!!

Thread Thread
stlnick profile image
Nick Author

Awesome! I’m glad it worked for you.

Collapse
nbhankes profile image
Nathan B Hankes

Great tutorial. Thanks so much!

If anyone is trying this with GatsbyJS, I needed to insert the following code for my build to complete successfully:

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-apollo',
      options: {
        uri: 'https://example.com/graphql'
      }
    }
  ]
};
Enter fullscreen mode Exit fullscreen mode
Collapse
brandonwie profile image
Brandon Wie • Edited on

Great post Nick, thanks.
One thing to mention that heroku git:remote -a my-project won't work unless you already created an app named my-project on Heroku. It will throw an error Error: Couldn't find that app..
You should run heroku create my-project before running the command.

Collapse
erikmetzinfo profile image
Erik Metz

Hello guys, I know in the article is mentioned that the communication between backend and frontend is not secure. But I want to know how to make it secure. What are the alternatives to IP restriction for the example heroku and netlify? I don't talk about user authentification, I want to know how to make the connection between the backend and frontend secure. Many thanks in advance!

Collapse
hanuz06 profile image
Andrey Li • Edited on

Hi Nick,

I followed your instruction. It looks like uploaded and I am able to login but it fails to fetch contacts. In console it shows it makes reques to itself(netlify url) instead of heroku. Is it normal? In network, it shows correct request url(heroku url). I am confused.

Collapse
riten9shah profile image
Riten Shah

Hi Nick, nice article, need help with the next step,

How to get the HTTPS certificate for all the links..
Bought a domain on NameCheap
need HTTPS for,
1 - customdomain.com to Netlify URL
2 - customdomain.com/api/ to Heroku URL

How to go about this ?

Collapse
jwalindev profile image
Jwalin

do you have a github link to the steps mentioned above?

Collapse
stlnick profile image
Nick Author

The project I did this on is:
github.com/stlnick/concentration-game
Just browse the commits and you’ll see the steps I had to take in the code. I tried to commit each step to make it clear what I was doing.

Collapse
kulbirsingh profile image
kulbir singh • Edited on

I was getting this error after I tried to redeploy the netlify website. I'm using firebase in the client folder, is there a way to solve this?

Collapse
rachelombok profile image
Rachel Ombok

Hi! What should I do if the .env files dont work when deploying the server? The variables arent loading in. Should I not add the .env to the gitignore? I'm not sure what to do

Collapse
cldelahan profile image
Conner Delahanty

Hey Nick - fellow '21 CS major here. Just wanna say - this was a great tutorial. Made quick work of a terribly frustrating task. Great stuff and hope all goes well.

Collapse
yuhanx0728 profile image
Yuhan Xiao

Hi Nick, great article! I wonder what is the reason for serving react and express apps on different servers, if they are on the same machine anyways? Thank you.

Collapse
arthursvpb profile image
Arthur Vasconcellos

Very nice tutorial, it was really helpful. Thanks!

Collapse
sonalprabhu profile image
sonalprabhu

Thank you so much for this article!
It was a great help!!

Collapse
rabitailleow profile image
rabitailleow

Hi, when running the "heroku git:remote -a my-app-name", it game me an error saying how it couldn't find that app with the error ID not_found. I don't really know whats going on...