Electron app isn't finding CSS/JS included in package

Question

I have an HTML5 web app that I'm packaging up via Electron. I'm packaging via gulp-electron.

The issue I'm having is that when the app is built and I run it, none of the CSS or JS files that are referenced in the index.html file are being loaded.

I can see that the assets were included in the build, and are part of the .app bundle in the : myapp.app/Contents/Resources/app/ folder.

Matter of fact, if I cd to that directory and run a node webserver (httpster), the app runs fine in that manner.

Here's how my CSS/JS is referenced:

<!-- CSS -->
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="./styles/style.css" />
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">

<!-- Vendors -->
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>

<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">


<!-- Non-angular libraries -->
<script type="text/javascript" src="./js/nonangular/lodash.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>

<!-- Angular external libraries for application -->
<script type="text/javascript" src="./node_modules/angular/angular.js"></script>
<script type="text/javascript" src="./node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="./node_modules/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="./node_modules/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-ui/build/angular-ui.min.js" type="text/javascript"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" type="text/javascript" charset="utf-8"></script>

<script src="./bower_components/angular-activity-monitor/activity-monitor.min.js" type="text/javascript"></script>

<!-- Angular components -->
<!-- build:appcomponents js/appcomponents.js -->
<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/config.js"></script>
<script type="text/javascript" src="./components/directives/main.nav.directive.js"></script>

<!-- Application sections -->
<!-- build:mainapp js/mainapp.js -->
<script type="text/javascript" src="./js/controller.js"></script>
<script src="./components/main/mainController.js" type="text/javascript" charset="utf-8"></script>

I've tried changing the path to not include the './' before the folders referenced to no effect.

My Gulpfile electron task looks like this:

gulp.task('electron', function() {

  gulp.src("")
    .pipe(electron({
      src: './app',
      packageJson: packageJson,
      release: './release',
      cache: './cache',
      version: 'v0.36.10',
      packaging: true,
      platforms: ['win32-ia32', 'darwin-x64'],
      platformResources: {
        darwin: {
          CFBundleDisplayName: packageJson.name,
          CFBundleIdentifier: packageJson.name,
          CFBundleName: packageJson.name,
          CFBundleVersion: packageJson.version,
          icon: './app/gulp-electron.icns'
        },
        win: {
          "version-string": packageJson.version,
          "file-version": packageJson.version,
          "product-version": packageJson.version,
          "icon": './app/gulp-electron.ico'
        }
      }
    }))
    .pipe(gulp.dest(""));
});

My app folder structure looks like this:

The frustrating this is I've used this exact setup on another project and the executable works fine, and is able to reach all the assets bundled in the .app bundle just fine.

Answer 1

I finaly understood what is wrong with including static files in Electron

<link rel="stylesheet" href="./app/css/app.css">
<link rel="stylesheet" href="./app/libs/mdl/material.min.css">

This is not working because they are included from my index.html which is NOT in the root folder.

It's in "app/html/index.html" so I had to tell Electron where is the root of my project !

Simply add <base href="../../"> at the top of your index.html file including the scripts

For me I had to go back 2 folders up to get to the root of the projet. In your case it might less (../ then) or more (../../../ then), etc

Answer 2

Electron approaches files through file:// protocol, so any base hrefs should start with '.'

To make it work, in index.html (in case '/' is your base href) change

<base href="/"> 

into

<base href="./">

..and the path errors will disappear.

So with electron apps we always need to compile the angular dist using a base href starting with '.', when / is your base, compile as

ng buid --prod --base-href ./

Answer 3

Turns out there were a few issues with paths.

First the CSS was using relative paths to reference images. Switching this to absolute paths did the trick. This was the same issue for the directives. Switching out relative paths with absolute paths did the trick there.

Finally, the actual CSS and JS files not being loaded looks to be because in the main index.html there was this:

    <base href="/">

Which was messing with things. Removing that allowed the CSS and JS to load correctly.