Search code examples
angularfirebasefirebase-hostingstackblitz

Angular + Firebase hosting: how to use static js file in website root?

I'm making PWA with Angular and Firebase. Using StackBlitz for developing.

I want to make "Add to home screen" Chrome standard advice working when user opens my app in browser, but I can't correctly call "service worker" JS from my code...

I created sw.js in /src folder of my project. I've added it to 'scripts' and 'assets' sections in .angular-cli.json and .angular.json. And in StackBlitz everything works fine!

But when I deploy project to Firebase (using Stackblitz build-in functionality) nothing works... Seems like server doesn't see the file in expected dir (/src/sw.js)... Did anybody face same problem?

Solution

  • I don't think there's a way to fix it, I'm pretty sure the problem is the stackblitz server. but luckily firebase engineers made a simple node script to replace a single file. It worked for me. As the link describes just install git, and node, and then in command prompt run these commands: git

    1. git clone https://gist.github.com/e00c34dd82b35c56e91adbc3a9b1c412.git firebase-hosting-deploy-file
    2. cd firebase-hosting-deploy-file
    3. npm install
    4. then Add your javascript file in the same file tree it is in stackblitz, for me it was in src/assets/scripts/alert.js, so i made an assets folder with a scripts folder, with my js file inside. do this all within the firebase-hosting-deploy-file directory.
    5. the run this in prompt: "node deployFile.js [commit]", for me with my file structure it was "node deployFile.js otherproject-a5722 /assets/scripts/alert.js commit"

    additional info:

    I tried replicating your problem, let me know if the link works. https://stackblitz.com/edit/angular-epvm8w. Basically just in index.html. the js file just has alert("alert"); in it. it works like you said but when deployed i think the stackblitz server is replacing the content with html. I think this because in chrome developers panel under sources the js file had the same html as the index template from stackblitz's github. Makes me think it's just a bug. same thing happened to a css file.