Simplest solution for baseURL 404ing

[MeoMix]

[EDIT: This solution doesn't work. Sorry. Go with removing baseURL]

Hey all,

I spent a stupid amount of time trying to configure karma-jspm. I wasn't satisfied with a lot of the solutions being proposed. I didn't want to do any crazy path overriding and I certainly didn't want my app architecture to be modified just to support testing.

Eventually, I stumbled into something which, at a glance, appears to be painfully obvious. I'm not sure why I didn't see this solution proposed more immediately, but maybe I'm not understanding something.

I added the following to karma.conf.js:

proxies: {
    '/': '/base/'
},

urlRoot: '/_karma_/'

This resolves the issue entirely.

For reference, my app architecture is:

└ package.json
└ karma.conf.js
└ config.js
└ jspm_packages/
└ src/
    └ index.html
    └ example/
        └ example.js
        └ example.css
└ test/
    └ unit/
        └ example.spec.js

baseURL in config.js is set to /

and karma.conf.js looks like:

jspm: {
  loadFiles: ['test/**/*.spec.js'],
  serveFiles: ['src/**/*.js', 'src/**/*.css']
},

proxies: {
  '/': '/base/'
},

urlRoot: '/_karma_/'

Is there any reason to avoid leveraging proxies to correct baseURL within karma-jspm?

[sasxa]

I couldn't make this work. After few days messing with paths, urls and similar stuff i got pretty simple solution too. Basically it's just removing baseURL from jspm.conf.js which takes care of testing, and setting it in browser before loading rest of the configuration.

I tested it on two similar projects, fairly different from typical boilerplates I've seen around.

project-one/ (P!)
├── node_modules/ 
├── development/
├─┬ distribution/
│ ├─┬ static/
│ │ ├─┬ scripts/
│ │ │ ├─ jspm/
│ │ │ ├─ app/
│ │ │ ├─ jspm.conf.js
│ │ │ └─ ...
│ │ ├── styles/
│ │ └── ...
│ └── index.html
├── jspm/
├── package.json
├── karma.conf.js
├── jspm.conf.js
├── gulpfile.js
├── ... 
└── other stuff

project-two/ (P2)
├── ... 
├─┬ C:/dev/wamp/www/project-two/wp-content/themes/project-theme/
│ ├─┬ static/
│ │ ├─┬ scripts/
│ │ │ ├─ jspm/
│ │ │ ├─ app/
│ │ │ ├─ jspm.conf.js
│ │ │ └─ ...
│ │ ├── styles/
│ │ └── ...
│ └── index.php
├── ... same as (P1)

gulpfile.js

var gulp = require('gulp');
gulp.task('test', function (done) {
  var Server = require('karma').Server;
  var config = require('path').resolve('karma.conf.js');

  new Server({ configFile: config }, done).start();
});

karma.conf.js

module.exports = function (config) {
  config.set({ 
    basePath: 'distribution', // (P1)
    basePath: 'C:/dev/wamp/www/project-two/wp-content/themes/project-theme', // (P2)

    jspm: { 
      baseURL: "IT'S IGNORED HERE ??? ", 
      config: 'static/scripts/jspm.conf.js', 
      packages: 'static/scripts/jspm', 
      loadFiles: ['static/scripts/**/*.spec.js'], 
      serveFiles: ['**/!(*.spec).js'] 
    }, 
    /* rest of the configuration */ 
  })
};

jspm.conf.js

System.config({
  defaultJSExtensions: true,
  transpiler: "none",
  // baseURL: "wont/work/in/tests",
  // BEST TO SET IT OUTSIDE, BEFORE LOADING REST OF THE CONF...
  paths: {
    "github:*": "jspm/github/*",
    "npm:*": "jspm/npm/*"
  },
  map: { 
    "angular": "github:angular/bower-angular@1.4.7", 
    /* rest of the mappings */ 
  }
});

(P1) served from "project-one/distrubution/" with browser_sync at http://localhost:8000/ (P1) index.html

<script src="/static/scripts/jspm/system.js"></script>
<script>System.config({ baseURL: "static/scripts" });</script>
<script src="/static/scripts/jspm.conf.js"></script>
<script>System.import('app/bootstrap');</script>

(P2) served from "C:/dev/wamp/www/project-two/" with wamp/apache at http://localhost:8001/ (P2) index.php

<script src="/wp-content/themes/project-theme/static/scripts/jspm/system.js"></script>
<script>System.config({ baseURL: "wp-content/themes/project-theme/static/scripts" });</script>
<script src="/wp-content/themes/project-theme/static/scripts/jspm.conf.js"></script>
<script>System.import('app/bootstrap');</script>

[MeoMix]

https://github.com/MeoMix/StreamusSocial Repo is here with it working.. no need to remove baseURL, 100% confident in that, but I'm sure there's lots of other viable scenarios with removing it.

[sasxa]

When I was testing this stuff, main problem was doubling of paths, i'd get dist/static/scripts/static/scripts for some reason I couldn't figure out. Did you try different paths (other then baseURL: '/' and basePath: '') in your solution? Might be just luck that "/" + "" = "/" (;

[MeoMix]

I didn't try anything else. I did encounter a weird issue with pathing, but it resolved itself by doing a full delete/clean/reinit/reinstall of node_modules/jspm_packages. Messing with path stuff can certainly confuse JSPM sometimes.