Over the past 7 months, I've been hard at work on the Google / Udacity Mobile Web Specialist scholarship program. It's been an intense, and rewarding, experience, and I learned a ton of interesting things!
All 3 of the projects we had were centered on creating a Restaurant Review app. We were given the starter code and a local server, and gradually made the project more accessible, more responsive, and allowed it to work offline. We dealt with service workers, local cache, and IndexedDB. A user needed to be able to mark a restaurant as a favorite and post new reviews of restaurants, either online or offline, and have those offline edits post to the server when re-connected.
Naturally, having done all of this and graduated from the program, I wanted to be able to share this hard work with others on my portfolio. I've got to be able to show that I got this to work with a working prototype, right? This site has a client facing section, and a server section (though we never connected to a database - simply had a db file that our server code could access and store information on).
Now I've never hosted an 'app' before - any site that's had a back-end server to deal with. I had no idea where to start.
After seeing a similar question in my classes' slack group, it seemed like using Heroku for the back-end and Netlify for the front-end was a pretty common solution. I currently use Netlify to host my portfolio site, so that seemed like a good solution. But I've never used Heroku before.
I was first given this site, on how to deploy a Sails app (which is what the server repository we were given is made with) to Heroku...
....but to be honest, it didn't seem to make a lot of sense to me. It's straight forward, but definitely geared more towards people who might already have some experience working with hosting or production sites.
So I did some Googling, and found these two posts:
Deploying JavaScript Apps Part 1
Deploying JavaScript Apps Part 2
These posts had a TON more information than what my project required, but it gave me what I needed to get running. All of the images I'm linking here are from those blog posts, so all image credit to them!
I figured that others might be in the same position as me - a newb to hosting an app on more than one site, and connecting them to each other. So here's my walk-through, in beginner's terms, for how to set up a simple connection between a Heroku back-end site and a Netlify front-end site!
1. Create a Heroku Account
First things first - go to Heroku's site and make an account, if you don't already have one.
2. Grab your Back-End Code from GitHub
I didn't have my server code hosted under my own name, so I made a fork of the final project server to have a repository under my name. This way, I know the repo won't suddenly disappear or change without my knowledge.
3. Hook Up your Repository with Heroku
Alright, this was a tricky part for me. These images should help!
a. Once you're logged into your account, you'll click New in the upper right corner and click Create new app.
b. You'll give your server a name, and click Create app at the bottom.
c. This will take you to a page with some options. Because we're hosting a simple site with one contributor, you don't have to worry about pipelines for now (that's how you'd work with a project that's regularly maintained by multiple people, so you can push things through a staging process and do testing and all that goodness).
What you'll want to do next is connect this to your GitHub account, so we can access the back-end code.
d. Once you're connected, you can search for the name of your server repository, and click connect so it, as you might guess, connects to that repo.
e. The last thing here is to set up deployment. You'll pick the branch you want it to use (for my case, the master branch is what I wanted), and you'll want to click on Enable Automatic Deploys. (You won't need the 'wait for CI' link checked that shows in this image, unless you have tests set up that you want to run before your code updates.)
f. Then, the part I missed at first: you'll want to run a manual deploy by clicking Deploy Branch, to get your site up and running! Once this completes, there will be a button at the bottom to view your site. Congrats - your server is now up and running!
4. Test your New Site!
Now, you'll probably want to test this and make sure it's connecting properly. So I'd go to one of the end points you have set up for getting information, and make sure that it shows you the data you expect. For my project, I grabbed the restaurants endpoint and made sure that I could see the list of restaurants. (This will look something like my-server-name.herokuapp.com/restaurants.)
5. Update Front-End Code with the New URL
Okay, halfway done! Now you'll go to the GitHub repository that hosts your front-end code. Anywhere that you linked to the localhost version of your server, you'll update with the Heroku link that now hosts your server. (Remember when we clicked view up above? The link that takes you to is your new endpoint.)
Do a search on any page that you think linked to your localhost - I missed a few spots the first time around!
6. Create Netlify Account
Okay, so now we'll set up an account on Netlify.
7. Launch your Netlify Site
Another multi-part step here - this one is easier, though!
a. Once your account is created, you'll click New Site from Git in the upper right corner.
b. From here, you'll again choose to deploy from GitHub and connect your account.
c. Then, you'll pick your front-end repository....
d. ...And choose your settings. I again used my master branch as the main branch for Netlify to read from.
You'll also set up two other things:
If you have a build step (I used gulp in my project, to compile my CSS and JS files), then you'll enter in the task that builds your project.
And you'll also set (or create) a folder that Netlify will use as your main / root folder. To my understanding, this is the only folder that Netlify will be able to see, so you'll need all of your files here - HTML, CSS, JS, images, service worker files, manifest.json....anything your front-end site uses to work, you'll want in this folder. I called mine dist like the image does, but you could name it whatever you want.
e. Then click Deploy Site at the bottom and let the process begin!
8. Rename Your Project
Netlify, by default, picks a random name for your site. You can click Site Settings on your dashboard page (pictured below) and change it if you'd like.
9. Congrats - the Main Steps are Done!!
Take a peek at your Netlify site, and see if your site shows up as you expect! Now the troubleshooting begins. :)
Final Notes
My biggest issue was realizing that I needed to adjust my build step to include all the files I needed. At first, I'd only had my compiled files in there - so when I visited the Netlify link, nothing was showing up. So I had to add both of my HTML files, and my images and random other files that had been in my root folder. So I modified my gulp build task to do a copy of those files whenever I made changes. This was the step that held me back the most - so make sure you add all of the files your front-end needs to your dist folder (or whatever you named it) so that everything displays correctly!
I also missed a few of the localhost calls I'd been making, so had to go back and replace my new Heroku URL a few times as well. So make sure you check all the functionality your site uses and confirm that they work. :)
The nice thing about hosting with Netlify is that any time you push changes to GitHub, it automatically runs a new build and updates your site, so it's super easy to see your new changes. :) The same goes for using Heroku - I barely had to do anything once I realized I had to do a manual deploy to get it started, and the few small changes I made (mostly minor changes to the database I'd made locally and forgot about) were automatically pushed and updated as well!
I made some minor tweaks to my layout as well - since I had it hosted online now, I tested it on my phone and realized that some things didn't quite display right. Gotta get those styles looking good!
I hope this all makes sense! Please feel free to ask me any questions you have, and I'll do my best to help. Also feel free to give me any pointers for improving my work flow the next time I have a project to host.
Happy building!
(And if you'd like to check out my project, it's hosted here!)
Top comments (19)
Deploy failed in Netlify. When I visit Netlify page, this is an error message. Page Not found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
[Update] It is up and running on Netlify!!! First, I moved the files to root directory and got rid of the dist folder since I don't need to compile code (no grunt). Thank you!
So glad you got it working, Heggy! :)
Hi,
I got this error. I already updated the port to not to listen to the local host but I am still getting this.
dev-to-uploads.s3.amazonaws.com/i/...
Hi Jeff - Did you check what your log said, the one mentioned in that error message? What's it telling you?
I tried to correct the error on the port and updated it and this is now what I got on the logs:
-----> Building on the Heroku-20 stack
-----> Node.js app detected
----------> Creating runtime environment
----------> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
----------> Installing dependencies
Installing node modules
added 53 packages in 1.052s
----------> Build
----------> Caching build
- node_modules
----------> Pruning devDependencies
audited 53 packages in 0.841s
----------> Build succeeded!
! This app may not specify any way to start a node process
devcenter.heroku.com/articles/node...
----------> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
----------> Compressing...
Done: 22.8M
----------> Launching...
Released v3
twitter0282.herokuapp.com/ deployed to Heroku
Hi, thanks for the reply. Here's what I got:
dev-to-uploads.s3.amazonaws.com/i/...
So your project might vary - my server project doesn't have a
startcommand that Heroku deals with. It just needs access to the GitHub repo.This error looks like it can't find a
startcommand. That'll be in your package.json file if it exists. If it's there, you might try runningnpm run start- theruncommand is necessary for most npm scripts, though sometimes start will work without it.Hope that helps! From your other comment, it looks like your build succeeded, so hopefully you're able to move forward!
Cool! I'll try that
Still not working. Hmmm.
Sorry I can't be of more help! Keep searching and troubleshooting, I'm sure you'll get it figured out!
Thank you so much!
Thanks for sharing your experience with Netlify and Heroku!
I'm in the process of tasting different cloud hosting platforms to learn how these work. From just recently finished the React for Beginners course, I have some small app ideas for improving my workflow, tools that don't currently exist and building portfolio assets.
Both of these solutions sound quite simple. Great post!
I always like connecting with other developers online, if you're interested please give me a follow if you think the content I post is valuable to you:
Twitter Instagram Website
I had never used Netflify or Heroku before today. Thanks to your tutorial, I was able to host my restaurant reviews app within 30 minutes! I had been putting off hosting this project for people to interact with...I didn't realize it could be this easy!
I'm so glad it helped, Shannon! That's awesome. :)
Hi Linda,
Thank you for the thorough blog.
However I am facing an issue. I am making an API call to an URL from my node.js, which is hosted on Heroku. I am expected to get a JSON response. However the logs show permission denied to the URL with 403 status.
I have even set Access-control allow Origin: * but in vain.
Can you help me !
Hi anishjana -
Do you have your code somewhere so I can look at it? That sounds like something is definitely stopping it from being able to connect, but without seeing anything it's hard to say what might be causing it. I'll be happy to help if I can!
This post really helped me, thanks Linda!
Hello! New coder here. I am not using gulp but I noticed that you said you "changed a few localhost calls" to your herokuapp url and I realized that I had quite a few in my client side code. I am not sure how to use the heroku url since the call says:
const url = 'localhost:4000/api/cities';
How do I route to /api/cities but also use "/api/cities"?
I really hope that made sense (I'm so new to all this). And thanks for posting!
Jack
backend server(deployed on Heroku) is not working in Netlify, but in local dev server it is working. Please help.