hosting web site for free in google apps script

How to Host a Web Page on Google Apps Script

ByDana Hooshmand Updated on

One thing I always enjoy doing is finding free website hosting. And one of the coolest and most interesting types of free website hosting is Google’s Google Apps Script. Yes, you can host a web page on Google Apps Script – For Free!

It might not sound like it, because “Google Apps Script” sounds like apps, scripts, not “web host” or “web site”. But it really is.

The way it works is just like any other web server. A web server receives HTTP requests and decides what to serve. That’s what your script does. Except it always returns a web page.

You might also enjoy this: Build an API with Google Apps Script

How to Host a Web Page on Google Apps Script — In a Nutshell

In a nutshell, there are two components to hosting a web page in Google Apps Script.

  1. The Javascript file that receives the “get” requests
  2. The HTML file that contains all the info

To host a web page, you have to return HTML from a server. This code just hears GET calls and returns the HTML file. It doesn’t matter what the parameters are — it just returns the HTML file.

The HTML file is hosted within the web app itself. You can technically host the web page HTML file anywhere, but the point of this exercise is to host a web site within Google Apps Script, so it makes sense to store it within GAS itself.

I also like to use “Bootstrap” as an easy way to make a simple web page look clean and functional. So my HTML file has links out to Bootstrap CDN-hosted resources.

The Code to Host a Web Site

Here’s the code for the script to host a web page in GAS

function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('bootstrap-index.html');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

And here’s the call for the simple HTML file served.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Demo</title>
    <!-- Include Bootstrap CSS from a CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  </head>
  <body>
    <!-- Navigation menu -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Bootstrap Demo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- Main content -->
    <div class="container mt-4">
      <h1 class="mb-4">Demo of Bootstrap hosted on Google Apps Script</h1>
      <p>This is a demo of Bootstrap hosted on Google Apps Script.</p>
    </div>
    <!-- Include Bootstrap JavaScript from a CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>

How to Create the Web Server App in Google Apps Script

Here’s the step-by-step guide on hosting that web page in Google Apps Script.

  1. Go to script.google.com. Presumably you’re logged in, but if not, you have to log in to Google Services.
  2. Create a new project.
  3. There’s a default file in your GAS project. Replace the code in code.js with the Javascript code above.
  4. Under “Files” on the left, create a new HTML file. Add in the HTML code above. Note: You might have to update those links to various CDN resources. As time goes on, they may become out of date. You can Google them, I believe in you!
  5. Name the html file bootstrap-index.html.

Now, you can deploy it. Go to Deploy –> New Deployment, choose to deploy it as a Web App, give global permissions, and deploy it.

To see if you’ve correctly made the app to host a web page, use the link in a private browsing window to verify it works.

Host a web site on Google Apps Script screenshot
How to Host a Web Page on Google Apps Script — Bootstrap demo

Limitations of Hosting a Web Page in Google Apps Script

Of course, if you want to host a web page in Google Apps Script (or anywhere) for free, there are some limitations.

Firstly, GAS isn’t terribly fast. You won’t get the zippy response you’ll get from a high-end host like Bigscoots, which we use for most of our websites. It’s definitely fast enough for most purposes, but I wouldn’t plan on a website that you have grand plans for here.

Secondly, updating the web page is a bit annoying. You have to make direct changes to the code and then you have to make a new deployment each time. (You can get around this with test deployments for interim changes that you can see.)

Thirdly, of course, you have to update HTML directly. This isn’t great fun when it comes to editing large amounts of content.

However, despite those limitations, this is a great way to host a web page for free!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

2 Comments

  1. Ok, but in this case you only get one main page. For example, how to add “Contact” to the same Google script?

    Reply

    1. Hey Mike, in summary, you’d make another html page in the same project, and link to it from the home page. (This is much like the way you build any regular web page.)

      Reply