Web App using Google App Script — Material design but no server/server Frameworks

Published in

Analytics Vidhya

4 min readSep 3, 2018

This article provides a very basic overview of how to build a webpage using AngularJS and Material Bootstrap using Google App Script. By using Google App Script we can do away with requirement of a server of NodeJS. Google will take care of that. All we need to do as a developer is to Publish our code.

Pre-requisites :

A Google account
Basic knowledge of HTML, CSS and Javascript

Steps -

Login to a gmail account and open Google Drive
Create a new script as shown below and name it

File → New → More → Google App Script

3. Name your script by clicking on ‘Untitled Project’

By default,Code.gs will be present. Copy the following code

function doGet() {
 return HtmlService.createTemplateFromFile(‘login’).evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

4. Create an HTML page named ‘login’ using File → New → Html file

An appscript.json will get automatically generated.

5. Include paths for AngularJS and Material Bootstrap

<!DOCTYPE html>
<html>
  <head>
    <!-- JS -->
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/js/mdb.min.js"></script>
    <!-- AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <!-- CSS -->
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/css/mdb.min.css" rel="stylesheet">
    
  </head>
  <body>
    
  </body>
</html>

6. Adding the page structure for Login using material bootstrap.

In this article, I am taking the login page structure as shown in Material Bootstrap website

Add following code in ‘body’ tag of login.html

<div class="card">
<!-- Default form login -->
<form class="text-center border border-light p-5"><p class="h4 mb-4">Sign in</p><!-- Email -->
    <input type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail"><!-- Password -->
    <input type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Password"><div class="d-flex justify-content-around">
        <div>
            <!-- Remember me -->
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="defaultLoginFormRemember">
                <label class="custom-control-label" for="defaultLoginFormRemember">Remember me</label>
            </div>
        </div>
        <div>
            <!-- Forgot password -->
            <a href="">Forgot password?</a>
        </div>
    </div><!-- Sign in button -->
    <button class="btn btn-info btn-block my-4" type="submit">Sign in</button><!-- Register -->
    <p>Not a member?
        <a href="">Register</a>
    </p><!-- Social login -->
    <p>or sign in with:</p><a type="button" class="light-blue-text mx-2">
        <i class="fa fa-facebook"></i>
    </a>
    <a type="button" class="light-blue-text mx-2">
        <i class="fa fa-twitter"></i>
    </a>
    <a type="button" class="light-blue-text mx-2">
        <i class="fa fa-linkedin"></i>
    </a>
    <a type="button" class="light-blue-text mx-2">
        <i class="fa fa-github"></i>
    </a></form>
<!-- Default form login -->
</div>

7. Publish the code as Web Application

Publish → Deploy as web app

Following are parameters that you need to specify before publishing the App -

I. Execute the app as -

Me -If choosing this option, the application will run as you
User Accessing your WebApp -If choosing this option, the application will run as the user who is accessing it.

For now, I am using ‘User Accessing your WebApp’ option. You may publish it with other options depending on your requirement.

II. Options for who can access your app -

Only myself
Anyone
Anyone (even Anonymous)

For now, I am using ‘Only myself’ option. You may publish it with other options depending on your requirement.

Click Deploy to publish the version. You may do multiple deployments and generate multiple versions.

You’ll see below screen on suscessful deployment as Web. Dev and Prod links are shown below.

Use the dev link, while development, and use the exec link for User tetsing and Production

Below is how my dev webApp looks right now. Wow we see a login page up !

Best part ! I did not use NodeJS, no server. I let Google take care of server part.

My application is available by a link https://script.google.com/*.

I can re-use this link to embed inside a Google site too if needed.

Hope this article helped. Any feedbacks are welcome.

Web App using Google App Script — Material design but no server/server Frameworks

Written by Akanksha Sinha