1

I'm making a web app (School side project) with the Yeoman Polymer generator, and everything's going fine.

Whenever I run "grunt serve", the website builds and gets displayed on a localhost server. Everything's good.

But, when I run it on a regular HTTP server (I've tried with Apache and the built in Python one), my SASS stylesheet and iframe isn't used, as you can see in the pictures linked to below.

I've used the element inspector in Chrome, and the iframe does get loaded, but not displayed.

Grunt:

HTTP:

My index.html source:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>TriMath</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <!-- endbuild -->

  <!-- build:vulcanized elements/elements.vulcanized.html -->
  <link rel="import" href="elements/elements.html">
  <!-- endbuild-->

  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>

<body unresolved fullbleed>

<template is="auto-binding" id="t">

  <!-- Route controller. -->
  <flatiron-director route="{{route}}" autoHash></flatiron-director>

  <core-scaffold id="scaffold">

    <!-- Drawer -->
    <nav>
      <core-toolbar horizontal center-justified layout>
        <span>TriMath</span>
        <paper-fab icon="launch" id="sourceButton" onclick="window.open('https://github.com/theSilentStorm/TriMath','_blank');"></paper-fab>
      </core-toolbar>
      <core-menu valueattr="hash" selected="{{route}}" selectedModel="{{selectedPage}}" on-core-select="{{menuItemSelected}}">
        <template repeat="{{page, i in pages}}">
          <paper-item hash="{{page.hash}}" noink>
            <core-icon icon="label{{route != page.hash ? '-outline' : ''}}" id="drawerIcon"></core-icon>
            <a href="#{{page.hash}}">{{page.name}}</a>
          </paper-item>
        </template>
      </core-menu>
    </nav>

    <!-- Toolbar -->
    <core-toolbar tool flex>
      <div flex>{{selectedPage.page.name}}</div>
        <paper-menu-button>
          <paper-icon-button icon="more-vert" raised></paper-icon-button>
          <paper-dropdown class="dropdown" halign="right">
            <core-menu class="menu">
              <paper-item><a href="about.html">About</a></paper-item>
            </core-menu>
          </paper-dropdown>
        </paper-menu-button>
    </core-toolbar>

    <!-- Content -->
    <div layout horizontal center-center fit>
      <core-animated-pages id="pages" selected="{{route}}" valueattr="hash" transitions="slide-from-right">
        <template repeat="{{page, i in pages}}">
          <section hash="{{page.hash}}" layout vertical center-center>
            <iframe src="{{page.url}}" frameborder="0"><div style:"width: 100%;">Loading...</div></iframe>
          </section>
        </template>
      </core-animated-pages>
    </div>

  </core-scaffold>
</template>


  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->
</body>

</html>
grg
  • 3,915
  • 3
  • 27
  • 38
Elias Jørgensen
  • 133
  • 1
  • 8

1 Answers1

0

You need to run grunt to build the release version. Everything will go into a dist folder. Then you need to tell your webserver to serve that dist folder.

robdodson
  • 6,264
  • 5
  • 25
  • 34
  • How do i achieve this with grunt? Also, some elaboration or maybe a link to a guide for how to make my webserver serve the dist folder, would be really appreciated! – Elias Jørgensen Jan 12 '15 at 22:38
  • You just run `grunt`. That will trigger the default task which is to create the `dist` folder for you. This SO question can tell you how to change your apache root: http://stackoverflow.com/questions/5891802/how-do-i-change-the-root-directory-of-an-apache-server – robdodson Jan 12 '15 at 22:40
  • 1
    Awesome, thanks! I will try it out first thing in the morning! Big fan, btw! – Elias Jørgensen Jan 12 '15 at 22:41
  • It worked for the stylesheet, but the iframe still won't show. It is loaded, according to chromes inspector, but something is stopping it from displaying. It works fine when i do "grunt serve". – Elias Jørgensen Jan 14 '15 at 22:40
  • What's the value for {{page.url}}? is it a relative or absolute link? – robdodson Jan 14 '15 at 22:51
  • It's "pages/trigonometry.html". But i don't think that's the problem, since i can go through the source of the file in the inspector. It's really weird. – Elias Jørgensen Jan 14 '15 at 22:53
  • I can link you to the github page, if you wanna take a look at the code? – Elias Jørgensen Jan 14 '15 at 22:59