javascript – Google Scripts Error: "No HTML file named index.html was found. (line 2, file "Code", project "Version 1")"-ThrowExceptions

Exception or error:

When I deploy my Google Scripts script as a web app, everything runs as I expect it to. However, after inserting the script into my Google Sites page, I get the error “No HTML file named index.html was found. (line 2, file “Code”, project “Version 1″)”.

I don’t understand how this can be, as I have an index that appears to work with the script fine when I deploy it as a web app. Here are the codes that I have:

code.gs:

function doGet() {

  return HtmlService.createHtmlOutputFromFile('index');

  var data = Charts.newDataTable()
      .addColumn(Charts.ColumnType.STRING, "Stage")
      .addColumn(Charts.ColumnType.NUMBER, "Central - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "Northeast/Canada - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "NY/NJ/Financials - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "Southeast/SP - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "West - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "APAC - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "EMEA - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "Japan - Q1")
      .addColumn(Charts.ColumnType.NUMBER, "Central - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "Northeast/Canada - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "NY/NJ/Financials - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "Southeast/SP - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "West - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "APAC - Q2")
      .addColumn(Charts.ColumnType.NUMBER, "EMEA - Q2") 
      .addColumn(Charts.ColumnType.NUMBER, "Japan - Q2")
      .addRow(["Needs Arista's Help to Deploy", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Customer in Production", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Unlikely to Deploy", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Plans to Deploy Independently", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Wrong Territory", 1x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .addRow(["Blank", x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x])
      .build();

  var quarterFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Stage")
      .setAllowTyping(true)
      .setAllowMultiple(true)
      .build();

  var territoryFilter = Charts.newCategoryFilter()
      .setFilterColumnLabel("Central - Q1")
      .setAllowTyping(true)
      .setAllowMultiple(true)
      .build();

  var columnChart = Charts.newColumnChart()
      .setDataViewDefinition(Charts.newDataViewDefinition()
                            .setColumns([0, 1, 2, 3, 4,5,6,7,8,9,10,11,12,13,14,15,16]))
      .setDimensions(1000, 800)
      .build();

  var tableChart = Charts.newTableChart()
      .setDimensions(1200, 300)
      .build();

  var dashboard = Charts.newDashboardPanel()
      .setDataTable(data)
      .bind([quarterFilter, territoryFilter], [columnChart, tableChart])
      .build();

  var uiApp = UiApp.createApplication();

  dashboard.add(uiApp.createVerticalPanel()
                .add(uiApp.createHorizontalPanel()
                    .add(quarterFilter).add(territoryFilter)
                    .setSpacing(70))
                .add(uiApp.createVerticalPanel()
                    .add(columnChart).add(tableChart)
                    .setSpacing(50)));

  uiApp.add(dashboard);
  return uiApp;
}

index.html:

   <html>
      <head>
        <meta name="gwt:property" content="locale=en">
        <style type="text/css">
            html,body {margin: 0; padding: 0; height: 100%;}
                .loading-text{background: url(gwt/images/spin-wait.gif) no-repeat; font-size: 16px; font-weight: bold; margin: 16px 0 16px 40px; padding-left: 22px;}
                .loading-box {background-color: white; border: 1px solid #ACACAC; border-bottom-color: #999; box-shadow: 0 4px 16px rgba(0,0,0,0.2); margin-top: -25px; margin-left: -100px; padding: auto; position: absolute; top: 50%; left: 50%; width: 200px; height: 50px; z-index: 16777272;}
                .loading-glass-panel {-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30 );filter: alpha(opacity = 30); opacity: 0.3; background-color: #999; display: block; position: absolute; width: 100%; height: 100%; z-index: 16777271;}
        </style>
        <script type="text/javascript">
            var startTime = new Date().getTime();
            var tzPointsJson = "\x5b1109635200000,1128902400000,1130657000000,1143333000000,1143806400000,1145000000000,1146380000000,1152489600000,1159800000000,1159500000000,1162095000000,1162075000000,1162105500000\x5d";
            var libId = "Mo7m4kwokfCocmLBpFogl0-o1H6hGQoPE";
            var payload = "\x7b\x22types\x22:\x7b\x22u1647587496418\x22:\x22VerticalPanel\x22,\x22u1647587496419\x22:\x22HorizontalPanel\x22,\x22u1647587496420\x22:\x22VerticalPanel\x22,\x22u1647587496412\x22:\x22Control\x22,\x22u1647587496414\x22:\x22Chart\x22,\x22u1647587496413\x22:\x22Control\x22,\x22u1647587496416\x22:\x22DashboardPanel\x22,\x22u1647587496415\x22:\x22Chart\x22\x7d,\x22libId\x22:\x22Mo7m4kwokfCocmLBpFogl0-o1H6hGQoPE\x22,\x22id\x22:\x22u1647587496417\x22,\x22title\x22:\x22\x22,\x22commands\x22:\x5b\x7b\x22args\x22:\x5b\x5d,\x22cmd\x22:\x22VERTICALPANEL\x22,\x22id\x22:\x22u1647587496418\x22\x7d,\x7b\x22args\x22:\x5b\x5d,\x22cmd\x22:\x22HORIZONTALPANEL\x22,\x22id\x22:\x22u1647587496419\x22\x7d,\x7b\x22args\x22:\x5b\x22CategoryFilter\x22,null,\x7b\x22ui\x22:\x7b\x22allowMultiple\x22:true,\x22allowTyping\x22:true\x7d,\x22filterColumnLabel\x22:\x22Stage\x22\x7d\x5d,\x22cmd\x22:\x22GVIZCONTROL\x22,\x22id\x22:\x22u1647587496412\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496412\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496419\x22\x7d,\x7b\x22args\x22:\x5b\x22CategoryFilter\x22,null,\x7b\x22ui\x22:\x7b\x22allowMultiple\x22:true,\x22allowTyping\x22:true\x7d,\x22filterColumnLabel\x22:\x22Central - Q1\x22\x7d\x5d,\x22cmd\x22:\x22GVIZCONTROL\x22,\x22id\x22:\x22u1647587496413\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496413\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496419\x22\x7d,\x7b\x22args\x22:\x5b70\x5d,\x22cmd\x22:\x22SETSPACING\x22,\x22id\x22:\x22u1647587496419\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496419\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496418\x22\x7d,\x7b\x22args\x22:\x5b\x5d,\x22cmd\x22:\x22VERTICALPANEL\x22,\x22id\x22:\x22u1647587496420\x22\x7d,\x7b\x22args\x22:\x5b\x22ColumnChart\x22,null,null,\x7b\x22width\x22:1000,\x22height\x22:800\x7d,\x7b\x22columns\x22:\x5b0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16\x5d\x7d\x5d,\x22cmd\x22:\x22CHART\x22,\x22id\x22:\x22u1647587496414\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496414\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496420\x22\x7d,\x7b\x22args\x22:\x5b\x22Table\x22,null,null,\x7b\x22width\x22:1200,\x22height\x22:300\x7d,\x7b\x7d\x5d,\x22cmd\x22:\x22CHART\x22,\x22id\x22:\x22u1647587496415\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496415\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496420\x22\x7d,\x7b\x22args\x22:\x5b50\x5d,\x22cmd\x22:\x22SETSPACING\x22,\x22id\x22:\x22u1647587496420\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496420\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496418\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22rows\x22:\x5b\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Needs Arista\\u0027s Help to Deploy\x22\x7d,\x7b\x22v\x22:10\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:11\x7d,\x7b\x22v\x22:16\x7d,\x7b\x22v\x22:22\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:10\x7d,\x7b\x22v\x22:5\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:9\x7d,\x7b\x22v\x22:11\x7d,\x7b\x22v\x22:19\x7d,\x7b\x22v\x22:21\x7d,\x7b\x22v\x22:1\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Customer in Production\x22\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:6\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:8\x7d,\x7b\x22v\x22:6\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:15\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:15\x7d,\x7b\x22v\x22:1\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Unlikely to Deploy\x22\x7d,\x7b\x22v\x22:24\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:13\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:26\x7d,\x7b\x22v\x22:18\x7d,\x7b\x22v\x22:20\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:26\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:31\x7d,\x7b\x22v\x22:19\x7d,\x7b\x22v\x22:23\x7d,\x7b\x22v\x22:6\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Plans to Deploy Independently\x22\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:5\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:6\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:5\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:7\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:6\x7d,\x7b\x22v\x22:1\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Wrong Territory\x22\x7d,\x7b\x22v\x22:11\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:3\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:9\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:4\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:1\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d\x5d\x7d,\x7b\x22c\x22:\x5b\x7b\x22v\x22:\x22Blank\x22\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:2\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:50\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:70\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:14\x7d,\x7b\x22v\x22:0\x7d,\x7b\x22v\x22:8\x7d,\x7b\x22v\x22:10\x7d,\x7b\x22v\x22:54\x7d,\x7b\x22v\x22:12\x7d,\x7b\x22v\x22:84\x7d,\x7b\x22v\x22:0\x7d\x5d\x7d\x5d,\x22cols\x22:\x5b\x7b\x22id\x22:\x220\x22,\x22label\x22:\x22Stage\x22,\x22type\x22:\x22string\x22\x7d,\x7b\x22id\x22:\x221\x22,\x22label\x22:\x22Central - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x222\x22,\x22label\x22:\x22Northeast\/Canada - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x223\x22,\x22label\x22:\x22NY\/NJ\/Financials - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x224\x22,\x22label\x22:\x22Southeast\/SP - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x225\x22,\x22label\x22:\x22West - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x226\x22,\x22label\x22:\x22APAC - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x227\x22,\x22label\x22:\x22EMEA - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x228\x22,\x22label\x22:\x22Japan - Q1\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x229\x22,\x22label\x22:\x22Central - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2210\x22,\x22label\x22:\x22Northeast\/Canada - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2211\x22,\x22label\x22:\x22NY\/NJ\/Financials - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2212\x22,\x22label\x22:\x22Southeast\/SP - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2213\x22,\x22label\x22:\x22West - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2214\x22,\x22label\x22:\x22APAC - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2215\x22,\x22label\x22:\x22EMEA - Q2\x22,\x22type\x22:\x22number\x22\x7d,\x7b\x22id\x22:\x2216\x22,\x22label\x22:\x22Japan - Q2\x22,\x22type\x22:\x22number\x22\x7d\x5d\x7d,\x5b\x7b\x22charts\x22:\x5b\x22u1647587496414\x22,\x22u1647587496415\x22\x5d,\x22controls\x22:\x5b\x22u1647587496412\x22,\x22u1647587496413\x22\x5d\x7d\x5d\x5d,\x22cmd\x22:\x22GVIZD

ASHBOARDPANEL\x22,\x22id\x22:\x22u1647587496416\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496418\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496416\x22\x7d,\x7b\x22args\x22:\x5b\x7b\x22id\x22:\x22u1647587496416\x22\x7d\x5d,\x22cmd\x22:\x22ADD\x22,\x22id\x22:\x22u1647587496417\x22\x7d\x5d,\x22sMode\x22:false\x7d";
        var _tok = "AJuLMu1HSeeMwjZJTVoQWkK6ufvP_SgK-A:1501770451378";
        var serviceId = "AKfycbzmmtjlnXRuyfvRMQLi5Xc-Twn2J3HnvCW6jkOM6LBW";
        var _sd =  false ;
        var _aurg =  true ;
        var _ea =  false ;
        var _up = '\/a\/macros\/arista.com\/s\/AKfycbzmmtjlnXRuyfvRMQLi5Xc-Twn2J3HnvCW6jkOM6LBW';
        var standardsMode =  false ;
        var _MF = {"11":"https://drive.google.com/drive/search?q\u003dtype:script","13":"https://script.google.com/macros/srvStatic/rpc_relay.html","14":"https://docs.google.com/picker","15":"becca@arista.com","16":"https://script.google.com/a/macros/arista.com","18":"arista.com","19":"becca@arista.com","0":true,"1":false,"5":true,"8":30000,"9":0,"20":"AJuLMu1HSeeMwjZJTVoQWkK6ufvP_SgK-A:1501770451378","10":"https://console.cloud.google.com"};
    </script>
    <script type='text/javascript' src='gwt/googleappsscripts_userapp.nocache.js'>
    </script>
    <script type='text/javascript' src='//www.google.com/jsapi'>
    </script>
    <script type='text/javascript'>
        google.load('visualization', '1', {'callback': function() {}, 'packages':['corechart', 'controls', 'annotatedtimeline']});
    </script>
  </head>
  <body>
    <div class="loading-glass-panel" id="loading-glass-panel">
    </div>
      <div class="loading-box" id="loading-box">
      <div class="loading-text" id="loading-text">Loading...
    </div>
    </div>
  </body>
</html>
How to solve:

Did you update the project version after making changes to the app? In development if you are using the /dev endpoint it will always show the latest version of the app. When you link the the /exec endpoint it will point to the current project version.

In the Deploy as web app dialog create a new version of the project by select the project version drop down. Any time you make a change to your script you will need to do this.

enter image description here

###

The Index html file has to be inside of the Google Script Project.
It is not and Index.html file next to the .gscript file.

So you create it that inside of the “Google Apps Scripts” Application you choose menu item File and “New” => “HTML File”.

You specify the file name without extension: “Index” and pay attention to case sensitivity (so no “index” in your script if your file is “Index”).

Leave a Reply

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