Getting started with Firebase Hosting (and GitHub Actions!)

Aug 15, 2023

Getting started with Firebase Hosting (and GitHub Actions!)

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 → https://goo.gle/3NL0vv7
Java → https://goo.gle/3u8xDFd
Next.js → https://goo.gle/3DWwx2N
Firebase CLI → https://goo.gle/3ilEILs
Firebase.json → https://goo.gle/3NRFgb1
HTTP 301 → https://goo.gle/3ub4Gs5
HTTP 302 → https://goo.gle/3x6Odav
Cross Origin Resource Sharing (CORS) → https://goo.gle/3javFxE
Preview channels → https://goo.gle/3Jbi9Vc
GitHub Actions → https://goo.gle/37eZhY6
Setting up preview channels with GitHub Actions → https://goo.gle/3Ja1IIz

Catch more Firebase Fundamentals → https://goo.gle/Firebase-Fundamentals
Subscribe to Firebase → https://goo.gle/Firebase

#FirebaseFundamentals

product: Firebase - Hosting; fullname: David East;

Content

2.96 -> i'm going to show you how to get started

4.319 -> with firebase hosting and how to set it

6.72 -> up with github actions so you can

8.24 -> generate a preview channel for every

10.32 -> single pull request

11.84 -> firebase hosting allows you to deploy

13.759 -> static websites and server code to a

16.48 -> blazing fast global infrastructure all

19.439 -> you need is a computer with node.js and

22 -> java downloaded but if you don't have

23.68 -> those don't worry just check the links

25.519 -> in the description but for now let's

27.76 -> dive in here in my editor i have a very

30.4 -> simple folder structure for my simple

32.399 -> website which is made with next.js if

34.64 -> you're not familiar with nexjs it's a

36.399 -> tool for building sites with react now

38.719 -> i'm going to take this site and deploy

40.48 -> it to firebase hosting on the command

42.079 -> line i'm going to install the firebase

43.92 -> cli now you might see a lot of people

46.239 -> out there install it globally with the g

48.879 -> flag like this

50.399 -> and this is fine depending on your

51.76 -> situation and setup but i'm going to do

54.8 -> it locally which means npm will download

58.399 -> the cli within the no modules folder and

61.84 -> i can use it by tapping into node

64.08 -> modules dot bin

65.68 -> firebase this is more verbose but you

68.799 -> will avoid any pseudo permission issues

71.2 -> once it's downloaded the first thing you

73.04 -> need to do is log in with your firebase

75.2 -> account using firebase login this will

77.439 -> take you out to the browser to log in

79.2 -> and once you're done you'll come back to

80.88 -> the terminal quick tip though if you're

82.56 -> managing multiple accounts check out

84.4 -> firebase login colon add and provide an

87.52 -> email to add another account and also

90.4 -> firebase login colon use with that email

93.28 -> to switch between accounts now run

95.56 -> nodemodules.bin firebase init hosting

99.119 -> this is going to take us through a

100.72 -> wizard and ask us a few questions first

103.6 -> you need a project you can create one

105.36 -> here in the terminal or you can go out

107.28 -> to the firebase console i have one

109.04 -> already so i'm just going to type it in

110.96 -> now it's going to ask for your public

113.04 -> directory the files inside the public

114.96 -> directory is what firebase hosting

116.64 -> deploys as your site in this case

119.04 -> next.js will build my site and export it

121.36 -> to a folder named out now you get to

124 -> decide whether you're configuring it as

125.92 -> a single page app so if you're building

127.6 -> a spa with angular react or view or

129.759 -> something like that you want to say yes

131.52 -> but since this is a static generated

133.76 -> site i'm going to say no now for this

135.68 -> step for setting up automatic builds and

137.44 -> employees with github i'm going to say

138.72 -> no because we're going to set that up in

140.239 -> just a minute and just like that our

142.239 -> initial configuration is complete before

144.64 -> i deploy the site i want to be able to

146.319 -> set it up to serve locally and i can do

148.48 -> that with the firebase emulator suite

150.56 -> which allows you to run several

152.319 -> different firebase services locally or

154.16 -> in ci cd environments run node modules

157.599 -> dot bin firebase init emulators right

160.959 -> now we're just going to select hosting

163.12 -> and i'll use port 5033 because i like to

166.4 -> avoid common port numbers

168.48 -> and i'll use the defaults for the rest

170.959 -> now a lot of modern website tooling like

173.12 -> next js requires a build step to take

175.599 -> from something like jsx and turn that

177.519 -> into html and css if you go into

179.84 -> package.json you can see that there is

181.92 -> an npm script called build which will

184.319 -> run next js's build command and then its

186.959 -> export to generate it as a static site

189.44 -> i'm going to run this before i serve the

191.44 -> site locally and deploy now to run

194 -> locally run firebase emulator start and

197.2 -> open your browser up to the port and

199.04 -> just like that we have our site running

201.599 -> locally so i feel good about it it's

204 -> time to deploy

205.519 -> run no modules dot bin firebase deploy

208.4 -> and as a side note you can provide a

210.4 -> flag of dash dash only hosting to make

213.12 -> sure you deploy only for firebase

215.04 -> hosting because the firebase cli can

216.959 -> deploy a lot of other things as well

219.28 -> such as cloud functions and security

221.12 -> rules once the deployment is successful

223.12 -> you can access the site at your project

224.56 -> yourprojectid.web.app

227.44 -> and just like that we have our site

229.92 -> running in production with an ssl cert

232.56 -> so let's take a second and dive into the

235.12 -> details how does firebase hosting know

237.439 -> what project to deploy to and what if

239.76 -> you wanted to tailor your server

241.519 -> configuration to do custom things like

244 -> add headers or set up redirects

247.04 -> well all that is managed in two files

250.159 -> firebase rc and firebase.json

253.519 -> for the most part firebase rc is managed

256.079 -> with firebase cli so don't worry too

258.079 -> much about it just know that it contains

260.16 -> the projects that your site can deploy

262.16 -> to now firebase.json contains server

264.96 -> configuration capabilities that you

267.04 -> should know you can set custom redirects

269.6 -> so when a request comes in at one source

272.479 -> you redirect it to a new destination and

275.199 -> you can set the type which is an hgb301

278.32 -> or a302 so either temporary or permanent

281.759 -> and this is really helpful if you need

283.6 -> to redirect a user to content that's

286 -> located on a new path you can add custom

288.32 -> headers for one or multiple paths let's

290.8 -> say you were hosting api data from a

293.199 -> json endpoint if you want to set the

296.16 -> data to allow requests from any origin

299.36 -> you can set the access control allow

301.68 -> origin header to star

304 -> this is lovely known as cross origin

306.88 -> resource sharing or cores

309.36 -> now i'm going to move on to one of my

311.039 -> favorite features preview channels

313.759 -> it's great that we can deploy this site

315.68 -> but it's really important to have a

317.44 -> place where we can stage new changes

319.36 -> before going to production so firebase

321.6 -> hosting has a feature called preview

323.52 -> channels

324.4 -> where you can deploy a version of your

327.12 -> site to a generated short-lived url

330.72 -> and preview channels work really great

332.639 -> in a github workflow you can set up a

335.12 -> github action that will deploy a preview

337.36 -> channel for every single pull request

339.919 -> and the firebase cli will generate the

342.4 -> entire workflow for you before i get

345.52 -> into the github action workflow i want

347.52 -> to show you how you can manually deploy

349.6 -> to a preview channel run on the command

351.84 -> line nodemodules.bin firebase hosting

355.199 -> colon channel call and deploy and

357.52 -> provide an id

359.199 -> you can also provide a flag to customize

361.6 -> how long the preview channel will live

363.759 -> for with dash dash expires this is going

366.56 -> to deploy everything in my public folder

369.36 -> which is named out to a generated url

372.8 -> that will live for two days you can see

375.52 -> right here that we have what the id was

378.4 -> in my case stage and then a generated

381.199 -> set of characters and numbers and let's

384.08 -> open this in the browser so this is the

387.44 -> same site as we had before but it now

389.919 -> lives at its own generated short-lived

392.639 -> url if you want to delete the preview

395.039 -> channel before it expires you can list

397.759 -> all of your active preview channels with

399.52 -> hosting colon channel colon list and

401.84 -> this will tell you all the channel ids

403.919 -> latest release times their url and their

406.08 -> expire time you can see that a live

408.319 -> channel never expires to delete the

410.319 -> channel run hosting colon channel colon

413.12 -> delete with the channel id so in this

415.759 -> case i'll run it with stage and make

417.84 -> sure you confirm yes to delete alright

420.639 -> now that you know the basics of preview

422.96 -> channel commands let's set up preview

425.28 -> channels with github actions the first

427.199 -> thing you're going to need is a

428.56 -> repository in github right here i just

430.8 -> have a brand new repository i created

433.12 -> and i'm going to need to set it up with

435.039 -> my current project so i'm going to add

437.12 -> the remote and set my main branch so i

440.639 -> can push it to github so here in the

443.039 -> terminal i'm just going to paste in that

444.8 -> command from github and i'm also going

446.56 -> to set up my main branch

448.639 -> the goal is is that i want to be able to

450.639 -> push a pull request per branch so in

453.44 -> this case next will get pushed up to

455.68 -> github compared against main and every

458.319 -> time that happens it will generate a

460 -> preview channel per pull request so

462.24 -> first i need to check out maine and push

464.56 -> up my current changes to github

467.12 -> so here in github i have my main branch

469.759 -> pushed up with just my basic website

472 -> files but none of my firebase hosting

473.759 -> configuration i'm going to add that via

476.16 -> a pull request by pushing a new branch

479.28 -> up to github and that will kick off a

481.36 -> git of action that will generate a

483.199 -> preview channel so here in the terminal

485.599 -> i'm going to check out my next branch

488.24 -> which will be the basis of the pull

489.68 -> request and then i'm going to see the

491.44 -> modified files by running git status and

493.52 -> we can see that my firebase.json and my

495.52 -> rc have not been added so i'll run git

497.919 -> add and a commit message to set up

500.56 -> preview channels with github actions run

502.8 -> firebase init hosting colon github just

505.68 -> like before this is going to open up a

507.52 -> wizard it first will log you in with

510.16 -> github that will require you to go out

511.759 -> to a url and then come back and then you

513.839 -> provide the github repository that you

515.839 -> want to set up the workflow for this

517.519 -> follows a user slash repository name

520.24 -> format behind the scenes this is going

522.24 -> to go out download a service account and

524.64 -> upload it to github secret store and so

527.44 -> github actions can deploy on your behalf

530.16 -> now this is a very important bit it's

532.959 -> going to ask me if it wants to run a

535.36 -> build script on the workflow and for me

538.64 -> that answer is yes just like i showed

540.48 -> before in package.json i have a build

542.959 -> command that runs nexus build and nexus

545.92 -> export in order to generate my static

548.16 -> site so every single time i have a

550.48 -> github action that runs i want it to run

552.399 -> this build command before deploying so

554.88 -> i'm going to mark yes at this point

556.88 -> we're going to provide what is the build

558.959 -> script the default is to run npm ci and

562.24 -> then npm run build npmci is very similar

565.519 -> to running npm install but it is

567.76 -> optimized for continuous integration

570 -> environments such as github actions and

572.16 -> then after it runs npmci it's going to

574.56 -> run my build command and that will

576.56 -> generate out my site this works for my

578.64 -> workflow but make sure to check your own

580.72 -> so it works for yours the next question

583.36 -> asks if you want to set up a deployment

585.36 -> to the live channel when apr is merged

587.839 -> and this is saying i've accepted the pr

589.6 -> and i want to deploy to my live channel

591.6 -> which in most cases is the production

593.519 -> site i'm going to say yes and lastly

595.839 -> it's going to ask me what is the name of

597.6 -> the github branch associated with your

599.76 -> live channel for most cases this is

602.079 -> going to be the main branch because main

604.399 -> is the source of truth for most github

606.88 -> repositories and your production or live

609.6 -> channel will be associated with that

611.519 -> this is going to create a github folder

613.839 -> with two workflow yaml files in it one

617.2 -> for when a merge happens to the main

620.64 -> branch and one on a pull request you

623.2 -> don't have to edit any of these these

625.12 -> are all generated by us all you need to

627.04 -> do at this point is just check them in

629.12 -> over in the command line i'm going to

630.56 -> run git status to see our modified

632.16 -> folders and only.github so i'm going to

634.48 -> add that and run a commit message and

637.04 -> then i'm going to push this branch up to

639.92 -> github by supplying the dash u for

642.079 -> upstream the origin and then the name of

645.68 -> the branch over in github it's going to

647.6 -> let us know that we have a new branch in

649.2 -> which we can create a pull request off

651.2 -> of so i'm going to give that a name and

653.68 -> then click the create pull request

656.079 -> button

656.959 -> at this point it's going to start

658.8 -> running checks which sometimes take just

661.279 -> a second to show up

662.959 -> and it's going to start with this yellow

665.44 -> circle letting you know that the checks

666.959 -> haven't been completed yet but if you

668.72 -> want to see what's going on you can

670.079 -> click this details link and it will take

672 -> you over to the github action section

674 -> where you can watch the action run it's

676.64 -> going to run through all these steps and

678.72 -> once it's done it will deploy it to the

681.839 -> preview channel and we can see that by

683.92 -> going back to the poll request and we

685.839 -> have a comment from the github actions

687.6 -> bot with our generated url if you go to

690.56 -> that link you'll just see that it's the

692.32 -> same site we were running in production

694.32 -> in the same site we're running locally

695.68 -> but now it's just running on the

696.959 -> generated preview channel and by default

699.12 -> it will expire in seven days now back in

701.839 -> github i'm going to merge this pull

703.68 -> request and once that's done i can

706.48 -> delete the branch but go back to the

708.8 -> main page for the repo

710.8 -> and if we look up here we can see

712.72 -> there's this little yellow dot and that

714.639 -> means that the merge action is running

717.36 -> so we merge the pull request into main

719.6 -> and that's going to deploy out to our

722 -> live channel and just like before we can

723.68 -> check out all the steps as it runs once

726.16 -> it's done it's going to be available on

727.68 -> the live channel which again is your

730.16 -> project id.web.app

733.6 -> so that's how you get started with

734.72 -> firebase hosting and stay tuned because

737.36 -> i'm going to be covering a full beginner

739.6 -> to advanced course on firebase hosting

741.76 -> soon that covers advanced firebase.json

744.32 -> configurations setting up javascript

746.399 -> framework builds and also doing server

748.959 -> backends with cloud functions and

751.04 -> cloudrun

752.32 -> leave a comment if you have any

753.44 -> questions and let us know what tools or

755.279 -> frameworks that you're using with

756.24 -> firebase hosting so that's all for today

759.04 -> and i will see you next time

772.88 -> you

Source: https://www.youtube.com/watch?v=P0x0LmiknJc