Getting started with Firebase Hosting (and GitHub Actions!)
ฝัง
- เผยแพร่เมื่อ 3 ก.ค. 2024
- In this episode of Firebase Fundamentals, David East will show you how to get started with Firebase Hosting and how to get it started with GitHub Actions so you can generate a preview channel for every single pull request.
Chapters:
0:00 - Intro
0:29 - Firebase CLI setup
2:24 - Serving locally with the Emulator Suite
3:22 - Deploying to Firebase Hosting
3:52 - Configuration files
4:13 - .firebaserc
4:23 - Server redirects in firebase.json
4:47 - Headers in firebase.json (Cross Origin Resource Sharing)
5:09 - Preview channels
5:44 - Manually deploying preview channels
6:33 - Manually deleting preview channels
7:00 - Setting up a GitHub repository
8:22 - Creating GitHub Actions workflows
8:50 - Setting up a build command in GitHub Actions
9:42 - Setting up production deploys on merge
10:11 - Triggering a preview channel on a pull request
11:40 - Deploying to production on merge to main
12:12 - More resources
Resources:
Node.js → goo.gle/3NL0vv7
Java → goo.gle/3u8xDFd
Next.js → goo.gle/3DWwx2N
Firebase CLI → goo.gle/3ilEILs
Firebase.json → goo.gle/3NRFgb1
HTTP 301 → goo.gle/3ub4Gs5
HTTP 302 → goo.gle/3x6Odav
Cross Origin Resource Sharing (CORS) → goo.gle/3javFxE
Preview channels → goo.gle/3Jbi9Vc
GitHub Actions → goo.gle/37eZhY6
Setting up preview channels with GitHub Actions → goo.gle/3Ja1IIz
Catch more Firebase Fundamentals → goo.gle/Firebase-Fundamentals
Subscribe to Firebase → goo.gle/Firebase
#FirebaseFundamentals
product: Firebase - Hosting; fullname: David East; - วิทยาศาสตร์และเทคโนโลยี
This video was beyond amazing! A rock solid Firebase setup in 12 mins 🙌
Thanks so much David!!!
Truly looking forward to more of your videos!!
Thank you for your kind words!
We look forward to making more videos for you to enjoy.
great resource. both simple and detailed explanation at the same time. thank you!
This guy makes the best videos on this channel, here's another banger
David is great! If you like his videos you should check out his podcast series.
Awesome work David ! 🔥
I'm excited for this series
Been looking for a good guide to properly set up hosting with github, much appreciated
We're happy to hear our guide was able to assist in properly setting up hosting with GitHub! Thanks for watching 😎
I like you, David. Your work is excellent.
Nice. The GitHub Actions CI automation tests are great for me.
Amazing job on these videos.
Firebase is the best! Love it! Thanks!
Amazing video, but i really recommend to add part about adding secrets and how to edit the workflow to work, because it is also better option not to publish firebase API key and other firebase stuff to repository on github, and without it the workflow will deploy a blank site.
okay life is going to be a little easy now after this series
04/ 8ğ
Great video, thanks!
We're glad you liked the video, Chris! Be sure to check out the link below for more tips and tutorials for getting started with Firebase Hosting:
goo.gle/3PCAWwA
Happy learning 🙂
Thanks alot..This is really great
We're happy to hear this, Aldaine! Thanks for the wonderful feedback 😁
Great video!
I'm waiting for your Firebase Hosting series.
thank you
the firebase login:add command... wow. I need this since 6 months and did not know about it :) thank you for the hint saves time when using work account vs personal projects account.
Glad to hear that the guide was helpful, Alexandre 🙌
Amazing! Would be interesting to know how to avoid storing firebase secrets inside the repository yet be able to access those secrets inside the build actions.
Nice content
We're glad that you've enjoyed this video! Don't forget to check out the video description for more helpful resources 😎
thanks
Thank you the staging deploy is so helpful, but I don't know why are you using Next as an example project, while Next is identic as an SSR frontend framework?
I am trying to follow along, but I get an error: Error: [nitro] Rollup error: Could not resolve '../../service-account.json' from server/utils/firebase.js . Do you have a video yet on using cloud functions and firebase deployment with live preview channel? I have service account ignored in gitignore file. Thanks for your help
Where can I find the advanced video?
How do I deploy the getting started video by david with fb hosting. The getting started has webpack with dist folder. Should i give dist as the folder location instead of out folder.
can I merge from the terminal as well?
Thanks to this video ... I got it running quickly (just stored Angular files as that is my Firebase client). What I am getting is that my browser (chrome) calls it a dangerous site and warns about putting in passwords. Is there something I can do to fix that?
How to use cloud build to deploy an app to one of firebase's preview channel ? I tried but failed to do so. For now I'm using live channel but I want reserve that for stable branch.
Hi Kiran, Check out this documentation to help you get started: firebase.google.com/docs/hosting/manage-hosting-resources
what to input here if the repo is inside an organization ?
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
great guidance, but I have a problem... my hositng is suceccful but I am seeing the firebase hosting complete page when I click the URL of my app.... but not my application. can anyone help me out of this....
can you pls do a video for angular universal Firebase Hosting (and GitHub Actions!)
I don’t know if I did anything wrong but after I deploy my website it doesn’t let me test the customer login page it just downloads the information and everything we did on that page please do you have a solution or am I doing something wrong here?
3:23 i followed the same procedure but a instead of my project it host an page which says " Welcome
Firebase Hosting Setup Complete
You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!"
Is there something similar for GitLab Actions?!
hey how can I delete a web app that i deployed to the web
That's a great tutorial, but I was wondering how could I set up a preview channel that isn't short-lived (also not tied to a GitHub Action)
Basically, suppose I want to generate such a URL, put it hardcoded in my project, build a zip, and send it to test users, therefore I wouldn't want the URL to be invalid after some time
Ingin belajar tp belum paham, tanks
Iam planning to create an App download campaign, I need help to upload the conversion tracking code in order to track my DOWNLOADS , how can I reach the Firebase team support !!
It worked !
no sir...tell us how to host flutter app without CIi
I need an SSR deployment for a nextjs project on firebase. Suggest a full deployment source.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? y
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
Error: An unexpected error has occurred.
Can anyone help me , I check the Y is really in the fold
Why Java needed, you said? Thx
i need to add paiement but hi wan't work with me sir
I can't get this to work.
It seems that my public folder is not taken into account when running locally. I see that you did not change anything and it magically works.
looking forward to cloud run with fb hosting with dynamic web app caching using express js
can we download files deployed on firebase?
i accidentally lost from my PC.
please help.
There's no specific API for this, but you can crawl the web site as shown here: stackoverflow.com/questions/26286339/pull-lost-code-from-firebase-hosting-deployment
please create for nextjs 14 with github repo workplace demo
Give me am example for hosting django/flask applications in firebase
Got one right here!
th-cam.com/video/t5EfITuFD9w/w-d-xo.html
medium.com/firebase-developers/hosting-flask-servers-on-firebase-from-scratch-c97cfb204579
There's something you need to fix in the Firebase Hosting GitHub Action. Whenever I make a tiny, little change, like updating dependencies, the GitHub Action gets triggered and creates a preview channel or deploys to the live channel. I have to cancel the check to not let this happen. Is there a change I should make in the YAML file or will you guys fix that issue yourselves.
When the problem is frontend, call David.
😂
Can you add jetbrains space support for generating flows?
If you and the other Fundamentals creators can put the example of what was use in the video. Please and thank you.
It make it easier to see what viewers might have missed or can't see in the files on the video.
i am gettin 404, unknown service account 😢
it's not working i try it hundred times after uploding all of data when i get the link it sat Firebase Hosting Setup Complete
You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!
and it not opne the web