3

So I followed the getting started guide for deploying a Firebase app with firebase-tools and I was able to successfully deploy part of my app. I got the index.html and all my .js scripts in the project_name/app/scripts/** directories. I can verify this in dev tools. What I don't see loaded is any .js script file located in the bower_components/ directory which is basically the framework of my app (AngularJS, jQuery, Bootstrap, Firebase, etc.)

Why is this happening?

Screenshot of devtools enter image description here

firebase.json

{
  "firebase": "angfirenews",
  "public": "app",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}
  • 1
    looks like bower is not deploying.. any further steps? – Pogrindis Sep 30 '14 at 22:45
  • What does your firebase.json file look like? Does it have any non-standard ignore rules? firebase-tools only deploys the specified directory - it doesn't perform any build steps, so you'd have to ensure that all the relevant files are in that directory – Chris Raynor Oct 01 '14 at 16:34
  • @Pogrindis there is no deploy/install in Firebase hosting; it stores static assets. s3z, when you answer Chris's questions, you'll have your answer. – Kato Oct 02 '14 at 16:08
  • @ChrisRaynor Oh dear. I had no idea that my `bower_components` dir had to be in my `app` dir. The tutorial did not explain that but I guess it makes sense. The problem is that now I have to move my `bower_components` dir to the `app` dir which will then break my local app. Isn't this just bad UX? Or should I just copy my app and make it a firebase deploy-able version by moving `bower_components` dir into `app` dir? –  Oct 03 '14 at 21:42
  • If your local app doesn't work then deploying it to Firebase Hosting is likely not to work either - it's generally bad practice to have relative links outside your public directory (think of hosting like running a simple http server from your app directory - you can't reference above the root). My suggestion is to have a build step in your development process that compiles all the files, minifies them as necessary, and produces a distribution folder that can be sent to hosting. – Chris Raynor Oct 03 '14 at 22:04
  • Ahh ok. Right so I will just use Grunt for this. Thanks :) –  Oct 04 '14 at 11:50

1 Answers1

5

Create a production version of your app that won't reference the /bower_components directory that is outside of the /app directory.

For complete reasons, see here, it's a better explanation then I can come up with.

So if you're using Yeoman, run grunt build to create a separate production ready version of your app in "/dist" that won't require you to upload the bower components directory.

Then use that /dist directory (firebase init) and upload it to your firebase hosting.

If you're not using Yeoman or any other generator, you can recreate your index.html and reference to cdn locations of those files manually. Just an option, not as simple though or complete (yeoman does other things like minify and uglify).

Community
  • 1
  • 1
naneer
  • 221
  • 1
  • 7
  • This isn't necessary and Firebase has no special treatment regarding the bower_components/ directory, unless the user has configured their `firebase.json` deploy file to ignore this. He simply needs to move it into the directory that is being deployed. – Kato Oct 02 '14 at 16:06
  • Worked great. First `grunt build`. Then I did `firebase init` in the root directory of my app and responded with `dist` when asked: "Enter the name of your app's public directory." – Christiaan Westerbeek May 02 '15 at 18:32