title: Best way to relative link in Google Apps Script Web App
body: <p>I'm not a developer, so please be kind.  I have used Google Apps Script to create a Web App for the charity I work for.</p>
  <p>At the top of the page, there is a set of menu options.</p>
  <p>Rather than add these manually to each page, I have created a Header.html file and then used an <code>include()</code> function on each page to include the header.</p>
  <pre><code>function include(filename)
  {
    return HtmlService.createHtmlOutputFromFile(filename)
        .getContent();
  }
  </code></pre>
  <p>This is fine, except that the links in the Header.html are all relative links to load other html pages within the web app using the doGet() function to serve a new HTML page, e.g.</p>
  <p><code> &lt;a href=&quot;https://script.google.com/macros/s/{deployment ID}/exec?logout=1&quot;&gt;Logout &lt;/a&gt;</code></p>
  <p>As a result, every time I deploy the app, I have to then manually update the links in the Header.html file and redeploy.</p>
  <p>I tried using <code>ScriptApp.getService().getUrl()</code>, but this will not work via the <code>include()</code> function as it is just inserted as text.</p>
  <p>What is the best way to have a header that gives the same set of links on each page but where the link is generated programmatically to have the current deployment ID in the URL?</p>
  <p><strong>EDIT: Code requested by @Carlos M</strong></p>
  <p>Code.gs:</p>
  <pre><code>function doGet(e){
  var cache = CacheService.getUserCache()
   .
   .
   .
  //============================
  //           LOGOUT
  //============================
  if(e.parameter.logout)
  {
    cache.removeAll([&quot;email&quot;, &quot;name&quot;, &quot;code&quot;, &quot;loggedIn&quot;, &quot;month&quot;])
  }
  .
  .
  .
  }
  
  function include(filename)
  {
    return HtmlService.createHtmlOutputFromFile(filename)
        .getContent();
  }
  
  function getUrl()
  {
    var url = ScriptApp.getService().getUrl();
    return url;
  }
  </code></pre>
  <p>Index.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;base target=&quot;_top&quot;&gt;
      &lt;?!= include('Stylesheet'); ?&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;?var url = getUrl() ?&gt;
      &lt;?!= include('Header'); ?&gt;
      &lt;div&gt;
        &lt;h1&gt;Membership Duty Booking&lt;/h1&gt;
        &lt;span id=&quot;message&quot;&gt;&lt;?=message ?&gt;&lt;/span&gt;
        &lt;p class=&quot;bold&quot;&gt;Select a Month&lt;/p&gt;
  .
  .
  .
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Header.html</p>
  <pre><code>&lt;div&gt;
    [MULTIPLE SIMILAR ENTRIES FOR &quot;MENU&quot; OPTIONS]
    &lt;span class=&quot;uHeader&quot;&gt;
      &lt;a href=&quot;https://script.google.com/macros/s/{Deployment ID}/exec?logout=1&quot;&gt;Logout &lt;/a&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>It is the {Deployment ID} in the Header.html file that I need to update.  As you can see, I am already using the method suggested by @MetaMan below, but it will not work for an HTML file that is added using the <code>include()</code> function.  It works elsewhere, but not for this scenario.  This is what I am trying to resolve :)</p>