First Google Apps Script – Load Html Page
Google Apps Script is a powerful platform that allows you to automate tasks and build web apps within the Google ecosystem. One of the key features is the ability to serve HTML content, which you can use to create web pages or user interfaces.
Here’s how you can load an index.html file using Google Apps Script.
Step 1: Create a New Google Apps Script Project
- Go to Google Apps Script.
- Click on the + New Project button.
- Name your project, for example: My Web App.
Step 2: Create the index.html File
Google Apps Script allows you to add HTML files to your project.
- In the Apps Script project, click on the + icon in the top-left corner and select HTML.
- Name the file index.html.
- Add your HTML content inside the index.html file. For example:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>My Web App</title>
</head>
<body>
<h1>Welcome to My Web App</h1>
<p>This is served from an index.html file using Google Apps Script!</p>
</body>
></html>
Step 3: Write the Google Apps Script to Serve the HTML
You need to create a script that loads and serves the index.html file.
- In the Apps Script editor, select the Code.gs file.
- Add the following script to load the index.html:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('My Web App')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}Here’s what this code does:
doGet(): This is the default function that runs when someone accesses the web app URL.
HtmlService.createHtmlOutputFromFile(‘index’): This loads the index.html file.
setTitle(‘My Web App’): This sets the title of the web app.
setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL): This allows the web app to be embedded in an iframe (optional, based on your use case).
Step 4: Deploy Your Web App
Now, you need to deploy your project as a web app.
- Click on Deploy > Test deployments > Select type: Web app.
- Choose to execute as “Me” and allow anyone to access the web app (based on your needs).
- Click Deploy and copy the provided URL.
Step 5: Test the Web App
Once deployed, you can open the URL in any browser to see your index.html file being served!
