Firebase with React, v2 Firebase with React, v2

Deploying with the Firebase CLI

Check out a free preview of the full Firebase with React, v2 course:
The "Deploying with the Firebase CLI" Lesson is part of the full, Firebase with React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve walks through a deployment of the Firebase Application to the internet through the Firebase CLI, then talks through some of the hosting features that the Firebase console has.

Get Unlimited Access Now

Transcript from the "Deploying with the Firebase CLI" Lesson

>> Steve Kinney: All right, let's put this thing on the Internet. So there are also these things called firebase-tools, that's the fire base CLI, I talked it a lot a little bit. Which is the ability, there's the Firebase CLI, which allows you to manage a whole bunch of stuff that we've been doing in the dashboard locally, in your system.

[00:00:17] And then there's firebase-admin, which gives you some of the dashboard power, right? The dashboard didn't believe in any security rules, we do whatever we want in there, it's fine. So these tools allow you to do it programmatically, as well. So I have it installed, but otherwise, if you don't, you can do npm install -g firebase-tools, and then firebase-admin.

[00:00:42] And those will get you the, firebase-tools is the CLI binary, firebase-admin is just a library that you can use, but I have those installed already. If you have not done it before, you do a firebase login, which, I'm already logged in. It's actually pretty neat, it'll open up your browser, and then let you OAuth in, and then send you back to the command line.

[00:01:03] Which I didn't know was a thing you could do, so that's neat. And then if you're in a project, this is just our create-react-app project, I do firebase init. That used to be fire emoji, I don't know why they changed it, I think they should put it back, but it used to be fire emoji.

[00:01:24] And you can see, we've got this useful text-based interface of what things we're using. Now you're like, I'm already using Firestore! What this will do is, it will actually copy those rules from the console, into a firestoreRules.json. And so now, you can pull them down, and edit them on your machine, and push them back up.

[00:01:46] There's actually also a tool for running unit tests against them, right? So you can pull it down, there's an emulator that will emulate a Firebase database. And let you set the security rules, write unit tests, based on what you can and can't do in your firebase account, which is really cool.

[00:02:04] Functions, which are those cloud functions, we'll turn that on. Hosting and Storage, Storage is the same thing, it's just gonna put on the rules. It's not gonna store stuff on your computer, it's just gonna pull down those rules, so you can edit them, and you can push them back up.

[00:02:17] So you can check them into version control, and do whatever you want, in that case. So I'm gonna pull down all four, I'm not gonna pull down the real-time database, which project, I think I'm on this one now,
>> Steve Kinney: What should we use for the rules, cool, yeah, that seems fine, firestore.rules.

[00:02:37] The indexes, we didn't do really any super-advanced queries, but Firebase will, they index, by default, every property on an object. But there's also things called compound indexes, where if you're trying to do multiple, they're not joins. But if you think about joins, you can create compound indexes, that Firebase will make those fast, so this will let you change those.

[00:02:59] For your cloud functions, do you wanna do JavaScript or TypeScript? I like TypeScript, but we're gonna do JavaScript. Do you want ESLint to catch probable bugs? At the, whatever the Firebase summit thing is, they're all really into ESLint and TypeScript.
>> Steve Kinney: Cool, and so it wrote these two things, shall I install the dependencies now, go for it.

[00:03:22] That's gonna install all of the dependencies for us, it's gonna create a folder for our firebase functions. It's going to set it up, so we can do a Firebase deploy, and deploy to an HTTPS server, that we can just put it in the Internet really easily, whole bunch of some pretty cool stuff.

[00:03:40] Like that, you can see, it wrote the functions/package.json, that's what's installing right now, because these are server-side functions. They are separate from the package-json from our client-side code, so that'll be a separate folder. That will make the git tool in Visual Studio Code very angry with me, cuz those node modules are not currently in gitignore, which is really great.

[00:03:59] This is the one we have to pay attention to. It's trying to guess what the public directory is, what we're going to use the server page out of, you're like, yeah, public, no. If we remember create-react-app, when we do npm-build, makes a build directory. And the build directory is what we wanna push up to the Internet, so we'll say build.

[00:04:15] This one is also important, configure as a single-page app, which means, rewrite all URLs to /index.html. We want that, right, that's what lets react-router do its work. Everything goes into /index.html, react-router does its thing, and figures out the rest for us. So we want a yes, don't just blindly hit Enter to that one, yeah, don't override it.

[00:04:38] We're gonna build anyway, Storage Rules can go there. And just before, we'll just do, the code gets angry with me, we'll say,
>> Steve Kinney: Cool, so let's see, we got some new stuff in here, we got this new functions directory. We've got firebase.json which is just some basic settings, so if you messed up and did public, you can just change it here, it's fine.

[00:05:12] Indexes, we're not really doing anything with. The rules, remember those, they're down on my file system now, same with the storage.rules, they are also down here as well. Maybe we didn't save them last time, but everything is down on my system now. Other stuff like that, which is what project it is, and so on and so forth.

[00:05:35] So what we'll do is, let's go to package.json, and we're gonna make one new script ,which is deploy, which will be a npm run build. And then if that is successful, then we'll do a firebase deploy. firebase deploy will deploy your app, your cloud functions, and your rules, right?

[00:06:02] You could actually do a dash-dash only, and do some subset of those, if you want. But in this case, we're gonna treat a deploy as, launch all the ships.
>> Steve Kinney: Do an npm run deploy, so that will first call create-react-app's build. Which will go ahead and webpack all the things, and do my production build.

[00:06:24] And when that is successful, then we will call firebase deploy. And it will push that up to the cloud, which is also just somebody else's computer. While that happens, I'm gonna go over to the dashboard here, we can take a look at Hosting.
>> Steve Kinney: It's telling us about all the stuff we just did, that's very cool.

[00:06:48] You can, if you don't like, whatever it, you can set up your own custom domain. What is gonna be really cool, when this shows up is, every deploy that you have done will be listed here. And you can go back, if you botch it, you can hit roll back, and you can switch back to a previous deploy, really easily.

[00:07:12] You could also get some amount of very base-level usage stats. But the ability, you could see, here's the current one, it's not deployed yet, but it will be. I can actually, as I deploy over, and over, and over again, go back to previous versions. So this works really great as a continuous deployment thing, as well, you can hook it up into like Travis CI, or something like that.

[00:07:33] So hey, I pushed the master, run it and build it, and if it doesn't work, we could just roll back to a previous version, which is super cool. So yeah, here is the current version, you can see who did it. So you can also figure out, where I work, we're very much into, who is to blame for a given thing, right?

[00:07:48] Cuz once you can figure out who to blame, you can move faster, right? Here, I am to blame for this deploy, all right, cool, so that is the long and short of Hosting. You basically install the firebase-tools, you do firebase deploy, here on the internet, don't believe me, here it is.

[00:08:13] And this one, theoretically, you could all just log into, and be hot messes with, and run on my API keys, [LAUGH]. But I think, without access to the code in this one, I'm a little safer. But this is it, in production, on the Internet, under HTTPS.