How to Build a Web App, Part 3: Pushing It Live

You’re only a few steps away from having a new site that is open for visitors. Let’s talk about where to host your source code and how to link that code to your new domain.

1. Hosting Your Site on a Server

The first step is deciding where you want to host your site. Your code needs to live on a server for others to be able to visit it, which is where your web host comes in. Some platforms only host websites, since web apps require the management of a database—an additional layer of complexity. Below are some solid options for hosting both websites and apps. Most of these providers are either open source or have a free tier for small projects, and they all have detailed documentation on getting set up.

Website Hosting

1. GitHub Pages
   GitHub Pages hosts directly from your GitHub account, so the setup process is easy and requires just a few additional files. Documentation »

2. Amazon Web Services S3
   AWS S3 is a popular and easy-to-use hosting platform that can stand on its own or be used with all of Amazon’s other well-documented services. Documentation »

3. Surge
   A trendy and completely free option, Surge boasts that you’re six key strokes away from your website being live. Documentation »

4. Aerobatic
   Aerobatic simplifies best practices and includes free CDN, SSL, and staging branches. Documentation »

Web App Hosting

1. Heroku
   Heroku is a great option for getting complex apps up and running quickly. Documentation »

2. Amazon Web Services (AWS)
   In addition to S3, Amazon offers a full-scale app hosting platform for small- and large-scale projects. Documentation »

3. Cloud Foundry
   Cloud Foundry is an open source platform as a service (PaaS) that focuses on scalability for enterprise projects. Documentation »

2. Pointing Your URL to Your Web Host

The beauty of using one of the services listed above is that pointing your domain name to your hosting platform is simplified.

CNAME Setup for WWW Subdomain

When you’re setting up your web host, the documentation should provide a URL, such as username.github.io. You’ll link this URL to a DNS server through the domain provider that you selected in Part 1. The record we’ll be setting up today is called the CNAME (short for canonical name) record.

This record connects your new shiny domain name to the URL provided by the hosting service.

For this tutorial, we’re going to use the www subdomain as the canonical domain for your site. In Step 3, we’ll redirect the root domain, example.com, to the subdomain, www.example.com. To link this subdomain to your web host, log in to your domain provider and select which registered domain you want to update. There should be an option or tab for DNS Records.

Here’s what you should see:

1. Record Type
   This is the type of record you’re setting up. Select CNAME from the options provided.

2. Name / Host / Alias
   The host (sometimes called a name or alias) is your domain name. Use your full URL, including the www subdomain.

3. Answer / Value / Destination
   Use the URL from your hosting provider that links your website to their service. For example, GitHub pages uses username.github.io. You may also need to create a repo with a specific name, or include a specific file in your project. Instructions for this should be provided by the web host.

4. TTL (Time to Live)
   Time to Live is the amount of type (measured in seconds) that it takes your changes to go live. The best practice for a CNAME record TTL is five minutes, or 300 seconds.

5. Prio / Priority
   You may see a column for Prio, or Priority. This is a setting for email management and will only come into play if you’re setting up MX records, which is beyond the scope of this tutorial. Here is some documentation from Google if you’d like to learn more.

Click Add Record (or Save or Done, depending on your domain host) to finish the process. Your site may take anywhere from a few minutes to a few hours to go live.

3. Redirecting to the WWW Subdomain

The easiest way to redirect your root domain to the www subdomain is to use the URL Forwarding option in your domain provider. This step isn’t required, but is an industry best practice, and sites that don’t use the www subdomain are the exception to the rule.

In the URL Forwarding interface, leave the Domain: option blank to redirect the root domain, and type in your full URL, www.example.com, into the Forwards to: option. Make sure the Type is Redirect, not a Masked. Click Add Forwarding.

Conclusion

Nice job! Your site is live and you owned the entire process. Next time, try a new framework or technology to push your skills and expand your toolkit.

How did this process go for you? Let us know on Twitter!