Joe Sak
Joe Sak

Reputation: 770

Attempt to use Aurelia plugin causing 404 error in browser

UPDATE:

My confusion is that I mistook Client Library for the term Plugin

Installing and using a library is documented here:

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6

ORIGINAL POST:

I am trying to use firebase with a new aurelia app.

I found this documentation:

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/7

npm install -g aurelia-cli
au new APPNAME
cd APPNAME
jspm install firebase

// main.js
//... included default code omitted

var firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  //... etc
};

// SECURITY CREDENTIALS IN YOUR SOURCE CODE??????????
// Yes, I KNOW not to put secure credentials in my source code.
// This is just a silly learning app on my own development machine
// trying to learn how to use both Aurelia and Firebase.

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources')
    .plugin('firebase', firebaseConfig);

  //... included default code omitted
}

au run --watch loads fine

Load http://localhost:9000 in my browser and in console this happens:

DEBUG [aurelia] Loading plugin aurelia-templating-binding.
vendor-bundle.js:13938 DEBUG [aurelia] Configured plugin aurelia-templating-binding.
vendor-bundle.js:13938 DEBUG [aurelia] Loading plugin aurelia-templating-resources.
vendor-bundle.js:13938 DEBUG [aurelia] Configured plugin aurelia-templating-resources.
vendor-bundle.js:13938 DEBUG [aurelia] Loading plugin aurelia-event-aggregator.
vendor-bundle.js:13938 DEBUG [aurelia] Configured plugin aurelia-event-aggregator.
vendor-bundle.js:13938 DEBUG [aurelia] Loading plugin aurelia-history-browser.
vendor-bundle.js:13938 DEBUG [aurelia] Configured plugin aurelia-history-browser.
vendor-bundle.js:13938 DEBUG [aurelia] Loading plugin aurelia-templating-router.
vendor-bundle.js:13938 DEBUG [aurelia] Configured plugin aurelia-templating-router.
vendor-bundle.js:13938 DEBUG [aurelia] Loading plugin resources/index.
vendor-bundle.js:13938 DEBUG [aurelia] Configured plugin resources/index.
vendor-bundle.js:13938 DEBUG [aurelia] Loading plugin firebase.
http://localhost:9000/src/firebase.js Failed to load resource: the server responded with a status of 404 (Not Found)
vendor-bundle.js:1399 Unhandled rejection Error: Script error for "firebase"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (http://localhost:9000/scripts/vendor-bundle.js:3924:17)
    at HTMLScriptElement.onScriptError (http://localhost:9000/scripts/vendor-bundle.js:5491:36)
From previous event:
    at DefaultLoader.loadModule (http://localhost:9000/scripts/vendor-bundle.js:13673:14)
    at _loadPlugin (http://localhost:9000/scripts/vendor-bundle.js:12719:21)
    at http://localhost:9000/scripts/vendor-bundle.js:12712:16
From previous event:
    at loadPlugin (http://localhost:9000/scripts/vendor-bundle.js:12711:75)
    at next (http://localhost:9000/scripts/vendor-bundle.js:12972:20)
From previous event:
    at next (http://localhost:9000/scripts/vendor-bundle.js:12972:56)
    at http://localhost:9000/scripts/vendor-bundle.js:12979:16
From previous event:
    at FrameworkConfiguration.apply (http://localhost:9000/scripts/vendor-bundle.js:12964:44)
    at Aurelia.start (http://localhost:9000/scripts/vendor-bundle.js:12581:23)
    at Object.configure (http://localhost:9000/scripts/app-bundle.js:93:13)
    at http://localhost:9000/scripts/vendor-bundle.js:11485:22
From previous event:
    at config (http://localhost:9000/scripts/vendor-bundle.js:11480:48)
    at handleApp (http://localhost:9000/scripts/vendor-bundle.js:11471:12)
    at http://localhost:9000/scripts/vendor-bundle.js:11504:13
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:11502:40
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:11501:29
From previous event:
    at run (http://localhost:9000/scripts/vendor-bundle.js:11497:26)
    at Object.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:11524:3)
    at Object.execCb (http://localhost:9000/scripts/vendor-bundle.js:5449:33)
    at Module.check (http://localhost:9000/scripts/vendor-bundle.js:4637:51)
    at Module.enable (http://localhost:9000/scripts/vendor-bundle.js:4929:22)
    at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:5310:39)
    at Module.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:4914:33)
    at http://localhost:9000/scripts/vendor-bundle.js:3890:23
    at each (http://localhost:9000/scripts/vendor-bundle.js:3815:31)
    at Module.enable (http://localhost:9000/scripts/vendor-bundle.js:4866:17)
    at Module.init (http://localhost:9000/scripts/vendor-bundle.js:4542:26)
    at http://localhost:9000/scripts/vendor-bundle.js:5213:36

Upvotes: 0

Views: 459

Answers (1)

user2345
user2345

Reputation: 3227

Because you used the Aurelia-CLI, and that there is no install command yet (ough), you have to add manually what you install through JSPM or NPM to aurelia_project/aurelia.json. In your case, add to the dependencies object the following:

{
    "name": "firebase",
    "path": "../jspm_modules/github/firebase/",
    "main": "firebase"
}

This did not work

My recommendations

These are totally personal from my experience with Aurelia and the CLI.

You want to use JSPM

Download and use the skeletons, and not the CLI.

You want to use the CLI

Download your 3rd party libraries preferably from NPM, and include them in your aurelia.json following the documentation. If you download from GitHub, place all your libraries in the same folder and update the aurelia.json file, just like you would do with an NPM package.

Upvotes: 1

Related Questions