Deploying A Live Site With Netlify and/or Heroku (Part 1)
The end goal of most development projects is deployment. Meaning that once your project is finally at that perfect place where you feel like it’s time to share it with the world, you deploy the app so that it’s live and lives on the internet instead of just on your own local machine. These days in almost all cases this involves hosting your project using one of the many services our there that host live apps. There are lots of different options that you may want to research depending on what your needs are. If you’re looking for true production level capabilities you probably want to go with AWS or something in that category. But if you’re just starting out and want some fun projects to go live so you can show your friends, and start working your way up to bigger more robust production level projects then something like Netlify and/or Heroku is a great place to start.
Why Netlify and/or Heroku?
There are two things that I want to clarify here. First is that Netlify and Heroku are two completely different services that I’m going to be talking about separately, but also about how they can be used together depending on the type of project you’ve built. The second thing is that these are just two of the many services out there that are good for hosting simple projects. I’ve found that they are relatively easy to use, and easy to get your project up and running with. That’s also not to say that these are only good for simple projects, they do have more robust capabilities as well although you’re going to want to weigh your options and do your research if you’re moving beyond the more “simple showcase” level.
Netlify
The first thing to know about Netlify is that it’s really best for hosting frontends. This is not what you want to use to host your database. So if you’ve built something that only has a frontend then it’s perfect. Also if you have a project that also has a backend, but you’ve built the frontend and backend in separate repositories, then this is also perfect for hosting just the frontend. Later on I’ll get to what you do with the backend in that case.
So the first thing to do is just set up an account on Netlify, and once you have that you’ll get a nice dashboard that looks like this:
You can see that there’s a green button in the middle of the page that says “New site from Git”. You click on that to get started deploying a new project.
When you click you should get to a page that looks like this:
Once you’re here you just need to select your Git provider, and this is going to connect your GitHub (for instance) with Netlify, because what Netlify does is basically just grab and copy your repo, and then put it onto their server.
When you click on GitHub let’s say, you’ll be prompted to complete an authorization, enter your password, just to get everything connected. Once that’s done you’ll get to this page:
At this point you are choosing the repository from your GitHub that you want Netlify to host. If you have a bunch of repos you probably want to use the search function.
Once you’ve found the correct repo you just select it, and you’ll get to the next page that has two sections that are simple but important. The first looks like this:
So the import thing here is selecting the branch to deploy. If you’ve only worked in one branch while building your project then you can just leave it as main and move on. But if you’ve created multiple branches of your project be sure that you select the correct one you want to deploy.
Ok next section looks like this:
So what’s currently filled in are the default settings. If you built your frontend with React let’s say then you can just move ahead and hit deploy site. But if you used vanilla JS let’s say or some other framework you want to make sure you have the correct build command and publish directory. This all depends on the file structure and framework you used to build your project, and may require a quick google search if you’re unsure. Just remember that what’s happening here is Netlify is asking you for, first, whatever command you would be entering into your terminal to bundle your project into a package to be deployed, and second, the folder where the correct files live.
Once you have the correct settings you just hit that Deploy site button and you’re all set!
Now it’s possible that the build will fail for whatever reason. Unfortunately I can’t go through every possible issue that may arise to cause a failed build. While the build is happening there’s a Deploy log that looks like this:
This is basically just Netlify’s terminal working. So errors will appear in here if there are issues. So read the errors carefully and make the necessary adjustments.
Last thing that’s awesome about Netlify is that once your project is up and running and live, let’s say you want to make some type of update. Any time the GitHub repo that you connect gets updated Netlify will automatically run a new build and your live app will be updated!
Stay Tuned For Heroku
I realized that this is getting a bit lengthy, so I’m going to break this up into two parts (like I said earlier they can stand alone anyway). Click the link below if you want to read about deploying specifically with Heroku, and how you can use Netlify and Heroku together for frontend and backend.