Introduction

Before continuing our web development journey, we must address one important task - showcasing our hard work to the world.

Whether it’s to share our creations with friends, create a portfolio for future employers, or launch an online business, we need to host our applications somewhere others can publicly access on the internet.

In this lesson, we will learn how to deploy our apps to a hosting provider, allowing us to run, build, and operate our web applications in the cloud.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

  • Understand what a hosting provider is.
  • Understand the difference between static and dynamic sites.
  • Understand what a PaaS is and how they work.
  • Know how to deploy to a PaaS provider.
  • Know how to troubleshoot common deployment issues.

What are hosting providers?

Hosting providers are like server landlords. They own servers and rent space on them to customers, who can then use the space to store their websites and make them accessible to anyone on the web.

You’ve already had some experience using a hosting provider when you deployed projects to Github pages earlier in the curriculum. GitHub pages is great for hosting static web pages for free, but we won’t be able to use it for hosting our dynamic NodeJS apps. We’re going to need something more powerful.

Static vs dynamic sites

Static websites consist of pre-written HTML pages. They are “static” because everyone who visits them will see the same content. To build static sites, you only need HTML, CSS and JavaScript.

Dynamic websites, on the other hand, are websites that can change content based on the user who is visiting them. X (formerly known as Twitter) is a good example; every user sees different content on their homepage feed based on who they follow. To build dynamic sites, you still need HTML, CSS and JS. But additionally, you need a server-side application and a database.

This additional tech prohibits us from using GitHub Pages for hosting our NodeJS apps. GitHub pages cannot run NodeJS applications and doesn’t have database services we can use.

Luckily, many hosting providers do offer everything we need. They range from the big and complex cloud providers like AWS, Google Cloud and Microsoft Azure to the more beginner-friendly platform as a service (PaaS) providers like Heroku, Railway, Render, and Fly.io. We will be focusing on and utilizing these latter providers in this lesson.

What is a PaaS?

Platform as a Service is a specific kind of hosting provider. The most important thing to know about them is they are much easier to use and more approachable for beginners than other hosting providers. They manage many of the low-level nitty-gritty details with the underlying server infrastructure, which allows us as developers to focus more of our time on building our applications instead of configuring and managing the servers they run on.

Taking the landlord metaphor we used earlier a little further, a PaaS platform is like having a landlord who takes care of all the utilities, building maintenance and security. Meanwhile, you, the developer, focus on furnishing, decorating and living in the space.

It’s an incredibly powerful model and perfect for us right now. Using a PaaS provider for deployment, we can focus on learning and mastering NodeJS without taking a significant diversion to learn the specialized knowledge needed to manage and maintain servers ourselves.

We will provide a list of our recommended PaaS providers later in the lesson. First, let us explore from a high level how PaaS providers work.

How do PaaS services work?

PaaS providers work by giving you easy access to a few resources that any NodeJS app can’t live without to function on the web.

Instances

The first and most crucial thing PaaS providers give you are virtual “computers” called instances which run your app. Basically, one instance means a single instance of your application running at one time. That’s like having a single computer run your app like you do on Localhost. Multiple instances are like having several copies of your app running simultaneously, which allows you to handle more traffic.

For most of your apps, one instance is plenty enough. You can support a lot of traffic using just a single instance. Many of the PaaS providers we will recommend later in this lesson give you your first one for free.

Databases

The second most important thing PaaS providers give you is databases. They make it easy to spin up a new database for each app by doing all the setup and configuration for you.

Many providers even manage the database for you by setting up automatic backups, ensuring the database is constantly updated with the latest critical security patches and ongoing maintenance that keeps your databases up and running smoothly.

The peace of mind this affords you can’t be overstated. You never want to be in a position where you’re waking at 4 am to multiple alerts. Your database is on the fritz because of some security patch you forgot to apply, and there are no backups to fall back on.

With NodeJS, we will be using MongoDB, a popular open-source database. Many PaaS services come with SQL databases included, but since we are going to be using MongoDB (a no-SQL database), we have a few choices on how to spin it up. We could:

  1. Use Railway, a PaaS with integrated MongoDB database services, or
  2. Use any of the recommended PaaS services, and connect it to a MongoDB Atlas instance. The instructions in their getting started guide make it easy!

Either choice isn’t too difficult to setup, but it’s always nice to have a fallback option! Later in this course, we will be following the MDN tutorial’s instructions on deploying both our app and database connection to Railway. For now, we encourage you to try and figure out how to deploy your mini-message board project with just what you learn in this lesson. However, If you’re having too much trouble, don’t fret. Just come back to it later once you’ve finished the MDN tutorial and have that bit of deployment experience under your belt.

Domain names

PaaS providers will give you a random domain name when you first deploy. In Heroku’s case, it’s usually something zen-like “afternoon-falls-4209”. If you want to visit the app, you can go directly to http://afternoon-falls-4209.herokuapp.com to see your app live on the web in all its glory.

The domain name will always be yours on a PaaS provider. They give each app a unique domain name that’s yours as long as your app lives on their platform.

In the real world, you’ll want to link it to your own custom domain, for example, http://mycooldomain.com. It’s worth mentioning that you don’t need custom domain names for the portfolio projects you’ll be building in this course. The random domains your PaaS provider gives you will be good enough. However, if you have an itch for tricking out your app with a custom domain name, you’ll first need to purchase a domain from a registrar like Porkbun or NameSilo.

To find a new domain, try using Domainr.

Once you have your domain, you need to point it to your project. The provider you are using will have exhaustive documentation on using custom domain names on their platform.

Debugging and troubleshooting deployments

Errors are an inevitable part of the software development process. They especially have a habit of popping up when deploying to a new environment like a hosting provider. When this happens, the key is not to panic and to follow a calm, step-by-step debugging process.

In most cases, you’ll be running into errors that thousands of developers have encountered before. These errors are well documented and often have solutions you can find with a little bit of Google-fu.

There are two stages of the deployment process where you are most likely to encounter problems. These are during deployment and right after.

On deployment

If you run into an error while deploying, the first thing to do is to check the build logs. Finding the build logs should be easy; it’s the stream of output you’ll see after kicking off a new deployment.

Scroll through these logs and find the point where the deployment encountered the error. It should stand out from the rest of the output and will often look like the stack traces you’ve already seen with JavaScript/NodeJS. The error output will tell you exactly what went wrong.

If you don’t recognize the error or what might cause it, your next step will be to copy and paste it into your favorite online search engine. You’ll likely find a Stack Overflow post with a solution. You can get support in our Discord server if searching doesn’t lead to anything conclusive.

Most of the errors you’ll face during this stage will be related to properly setting up your app with what your hosting provider needs. Double-checking the deployment guide for your hosting provider is always a good place to start. It’s very easy to miss a step or mistype something.

After deployment

You’ve just deployed your app successfully; everything is going your way, and this will be a great day! However, when you visit your app… you are greeted with the dreaded 500 page.

Nothing induces panic in a developer quite like a 500 page. It could mean just about anything. Error pages in production are deliberately vague to let users know something went wrong without all the overwhelming technical jargon. Another important reason is to prevent attackers from using errors in your system to their advantage.

You have a few tools at your disposal to help you diagnose the problem. The first is the application logs.

The application logs are the output of your application as it’s running. It tells you what’s happening with your app as it’s happening. All the incoming requests and database queries are recorded, and you can see them being recorded in real-time.

So if you’re getting a 500 error, you can open up the logs and watch them closely as you refresh the page on your app in the browser to reproduce the error. This will either tell you exactly what the problem is or generate some leads you can use to dig further.

Going further with troubleshooting tools

As your application grows, you’ll want to get more sophisticated with your error-tracking tools. For example, you can use services like Sentry to track and monitor errors using a slick, easy-to-use interface and get notified when they happen.

These services will give you more information about the error and the request that caused it, saving you a ton of time. However, setting up and using these services are out of the scope of this lesson. You can get by just fine with the logs for your first few apps.

One final tip

If something has broken in your latest deployment after successful deployments in the past, backtrack to the last working version to determine what changes you made and slowly reintroduce those changes again if you need to.

This will be where the Git skills you’ve been learning will start to really pay off and save you an immense amount of time. You’ll be able to use git log to see the history of your latest changes and git checkout to revert to a previous working version quickly.

Assignment

  1. Deploy your Mini Message Board project to one of the hosting providers we’ve mentioned. If you need help deciding which one to use, we recommend Fly.io. The important thing to take away from this first deployment is getting experience deploying. Don’t worry if you don’t understand everything that’s happening. That will come with time.
    • Use one of the linked deploy guides for your PaaS provider to help you through the process.
    • If you’re having trouble deploying, check out the Debugging and Troubleshooting Deployments section for some tips.
    • If for some reason the deployment is still too difficult, and you just can’t seem to get it to work, move onto the next project and come back once you’ve deployed your MDN project. The steps in their tutorial hold your hand a bit more through the process and will give you the confidence you need to deploy this project.

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

  • It looks like this lesson doesn’t have any additional resources yet. Help us expand this section by contributing to our curriculum.

Support us!

The Odin Project is funded by the community. Join us in empowering learners around the globe by supporting The Odin Project!