mxew / firetable-user

client side front end for firetable, a virtual music listening room powered by firebase.
https://thompsn.com/log/about/firetable
MIT License
18 stars 8 forks source link

Error setting up hosting on Firebase #138

Closed portalq closed 3 years ago

portalq commented 3 years ago

Hey, I'm brand new to this and have gotten to the point where I would like to 'deploy' my website and when I open my website locally through the new links I deployed it says 'Error loading the Firebase SDK, check the console' at the bottom of a 'welcome message'. However, if I do enter the link through Firebase it just comes up with the same 'welcome message' but it shows that the Firebase SDK is loaded. I would be extremely grateful if someone where to help me with this since I would love to be able to create my own firetable site. Thank you.

Also I've tried setting this up to host on github but got some errors there too.

mxew commented 3 years ago

Could you paste/screenshot the exact error you're seeing? Were you able to load the index.html locally in your web browser before you attempted to deploy to Firebase Hosting?

portalq commented 3 years ago

Could you paste/screenshot the exact error you're seeing? Were you able to load the index.html locally in your web browser before you attempted to deploy to Firebase Hosting?

Yes I was able to open the index.html locally before deploying it. The newly deployed one gives me the message with the error underneath. Accessing it through the Firebase console gives the same message just without the error at the bottom. When I click on 'open hosting documentation' it brings me to a site that shows a tutorial in order to setup hosting (which I have already done to get to this point).

Also I looked at the Firebase CLI and there was no error message I could see.

Untitled

mxew commented 3 years ago

I think the issue is probably in your firebase.json file you created during firebase init.

Should look something like this (here's how to answer the firebase init questions to get this output):

{
  "hosting": {
    "public": "/",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

By default, Firebase hosting will want to set your public directory as public, but in our case you'll want to set it to /. It will then ask you if you'd like to overwrite /index.html, choose no (this would overwrite our existing firetable index.html with their Firebase hosting welcome message index.html).

I would: 1) Check to make sure in your firebase.json file that public is set to "/" and not "public". 2) Make sure index.html in your root directory hasn't been overwritten with Firebase hosting's welcome message (check this by trying to open index.html locally again. If needed, replace it with the index.html file from this repo. 3) Deploy again.

portalq commented 3 years ago

I've followed your suggestion and my firebase.json looks like the one you've shown above. It seems to still show me the same message. (Maybe I need to start again following your advice?) Do I NEED the hostbot to be able to deploy the website correctly? (Since I've skipped this step due to the fact that I would have people moderating it during its operational hours). Also is there a way that I'm able to send the local files that I'm using to you? I don't know if that would help you to get a better idea of my issue or not.

mxew commented 3 years ago

When you open your index.html locally on your machine do you see the Firebase hosting welcome message or do you see the firetable user interface? If you see the Firebase hosting welcome message, replace that index.html file with this one and then run firebase deploy again.

portalq commented 3 years ago

That seems to have worked. The firetable web app link takes me to the website now! If I want to edit the website, would I have to redeploy it again for these changes to take place? Also it says "Loading firetable..." in the media player, assuming this is the case because no one is playing a song?

Do I need the bot to use the !addme command? It doesn't seem to be adding me to the queue when I enter it in chat.

Also, where would I be able to obtain a soundcloud api key? Thank you.

mxew commented 3 years ago

That seems to have worked. The firetable web app link takes me to the website now! If I want to edit the website, would I have to redeploy it again for these changes to take place?

Yes. Every time you make a change locally that you'd like to push to your website, you'll want to run firebase deploy.

Also it says "Loading firetable..." in the media player, assuming this is the case because no one is playing a song? Do I need the bot to use the !addme command? It doesn't seem to be adding me to the queue when I enter it in chat.

Yes. The hostbot's job is to manage what song should be playing and when. Without it, chat and playlist managment will still work, but the waitlist and dj table will not function (songs will not play). If you don't want to run the hostbot locally on your own machine, you can deploy it to Heroku for free.

Also, where would I be able to obtain a soundcloud api key?

Soundcloud isn't issuing new api keys at the moment, but you can use 587aa2d384f7333a886010d5f52f302a.

portalq commented 3 years ago

Everything seems to be fine except for two things:

  1. When searching for soundcloud songs on the site, it doesn't show any results.

  2. When I deploy the bot, it connects to the website then disconnects after 30 secs or so. I found this error report (using Heroku):

errorReport

mxew commented 3 years ago

Everything seems to be fine except for two things:

  1. When searching for soundcloud songs on the site, it doesn't show any results.

After you have added your soundcloud key to your config.js, double check that you:

1) firebase deploy after making changes 2) after deploying your changes, try hard refreshing the page in your web browser to clear your cache (Ctrl + shirt + r).

  1. When I deploy the bot, it connects to the website then disconnects after 30 secs or so. I found this error report (using Heroku):

errorReport

On the Heroku dashboard, turn off the default "web" dyno and turn on the "worker" dyno. Should look like this. likethis

portalq commented 3 years ago

Okay, thank you so much, it worked!

Just one more quick thing: Would I just need edit this variable in the app.js to change the play limit from 2 to 1? And then redeploy?

Untitled

mxew commented 3 years ago

Just one more quick thing: Would I just need edit this variable in the app.js to change the play limit from 2 to 1? And then redeploy?

Yes. Custom play limits other than the default of 2 have never been extensively tested, but this should work fine. The plan was to eventually make this a configurable setting, but until then changing that variable will do the trick!

Closing this issue as it seems like we've answered your original question regarding deploying to Firebase hosting, but feel free to open a new issue if anything else comes up!