DAVID EAST: Hey, everyone.
Welcome to a new episode of #AskFirebase.
My name is David East.
And my favorite CSS color is cadet blue.
SUMIT CHANDEL: And I am Sumit Chandel, and--
wait a minute-- you said last episode it was papaya whip.
DAVID EAST: Well, I changed my mind.
SUMIT CHANDEL: Well today, we're doing things just a bit
differently.
DAVID EAST: Normally we answer questions that you ask.
SUMIT CHANDEL: But today, we're covering
some of our favorite Firebase productivity tips.
So if you like this episode, make sure to like and subscribe
on the video because we can always find more productivity
tips to talk about.
DAVID EAST: Let's get started.
[THEME MUSIC]
SUMIT CHANDEL: Our first productivity tip--
so David, what are your favorite tools for prototyping Firebase
web apps?
DAVID EAST: There are two amazing tools for quickly
prototyping Firebase web apps.
And the first one I'm going to cover is Glitch.
So if you head over to Glitch.com,
you can create a new project.
And in this case, I'm just going to create a basic Hello World
web page.
And Glitch is just an editor.
So I have an index.html, the script, and these styles.
And
And I can go and create a Firebase.json,
and that hooks me up to Firebase Hosting.
And so I'll create a hosting config,
where I just say the public folder is one called dist.
From here, I can select my project.
So I'll select web-quickstart.
And then now, I can set things up for hosting.
But what I want to do is I want to go in my package.json
and add Packages.
So I can add Firebase, webpack because we're
going to do some bundling, webpack-cli, and then
a copy plug-in just to move files from source to dist.
So now I'm going to rename these.
So from source index.html to source index.js
and the same with the source.style.css.
And now I can go and create my webpack
config to set up my bundling.
And this just uses copy-webpack config
to move my static assets over.
So now I'm going to use the Firebase SDK.
So I'm going to import Firebase from firebase/app,
initialize my Firebase app with a config.
And then afterwards, I can just go forth and do
all my Firebase stuff here.
And you can see right here in this secret.env,
that's my project ID.
It is stored there.
And now I want to change my file,
instead of saying script.js to main.js
because that's what webpack's going to rename it to.
So now I want to go into Tools, and what I can do
is go into this full page console.
And this is just like a local console on your machine.
I can call webpack from my new modules bin folder,
and webpack runs just like it would on your regular machine.
We can see it creates that dist folder
with all of my files in it.
So now if I go back to my Firebase.json,
I can click Deploy to Firebase.
A console pops open at the bottom,
and we see we deployed to hosting, and it was successful.
I click View Firebase app, and here is my web app.
The next tool is StackBlitz.
StackBlitz is tailored for JavaScript framework style
apps, like Angular and React.
So here in StackBlitz, I have all these templates,
Angular apps, React apps.
But I'm just going to choose a basic TypeScript app.
And then from here, you can see that I
have a Firebase project hooked up, and with one button,
I can deploy.
But first I'm going to add the Firebase package.
And so that's going to install Firebase.
And then now I can just say import star as Firebase
from firebase/app.
And then what's awesome is if I create a Firebase app,
we can get all that code complete.
So Firebase.initialize app shows all of the Firebase methods.
So I'm going to make a change just
to see that things are moving, and then I'm
going to click deploy.
And just like that, the site deploys,
and it's out on Firebase Hosting.
So if you're going to build a web app
and you want to get started fast, both of those tools
are a great way to move quickly.
[MUSIC PLAYING]
This next productivity tip is for you, Sumit.
Why is Firebase Hosting not updating a deployed file?
SUMIT CHANDEL: So this is actually a really common
question that developers ask.
It's even one of David's top voted answers
on Stack Overflow.
DAVID EAST: It's true.
SUMIT CHANDEL: Here's what's happening.
You've made a change to your website,
and deployed it to Firebase Hosting.
You go to the site and you see the change,
but then you make another change, and all
of a sudden, nothing changes.
What's happening here?
Well, to understand why this is happening we
need to talk about the cache control header.
The cache control header tells the browser how long
to locally cache a file.
It does other things too.
We're not focused on that for now.
This is done with the max age directive, which is set
to a certain amount of seconds.
By default, Firebase Hosting sets a max age directive
of 3,600 seconds, or an hour.
This means the browser will cache the file for this time
period, and not attempt to update it until it expires.
For the most part, this isn't a problem.
Most websites are not updated a few times within an hour.
But when you're developing and testing,
this can be frustrating.
You deployed a new version, and you
don't see any changes because it's
within the cache time period.
But fortunately, you have a few options here.
I'll be covering what you can do in Chrome,
but it's very similar for other browsers.
You can either do a hard refresh with Command-Shift-R,
or you can open up Chrome's DevTools,
click on the Network tab, and check a little box named
disable cache.
Keep in mind that cache is only disabled when
the Tools are open.
So the next time you're wondering
why the file isn't updating after a successful deploy,
make sure to check the cache.
[MUSIC PLAYING]
This next productivity tip actually
comes from a developer, Chris.
Chris asks, is there a way to copy documents across products
in Cloud Firestore?
For example, from dev to prod environments?
DAVID EAST: Uh, you bet, Chris.
The Firebase Admin SDK makes it easy to script
the copying of documents from one Firestore DB to another.
So here I'm going to make a project where I
require the Firebase Admin SDK.
And then I also am going to require two service accounts,
which you can generate in the Firebase console, a dev
and a prod service account.
I'm going to initialize one app with the credential of the dev
service account and the database URL.
This will return a dev app.
And then I can do the same, but return it as the prod app.
And so now, I'm creating a sync function called Promote data.
And then from here, I'm going to take the dev app,
grab the Firestore instance, and go to the collection of to-dos,
or really whatever you need.
I'm going to await the snapshots from that collection.
I'm going to grab the documents and loop through them.
And then for each one of these documents,
I can just go to the product and then
create a document with the ID and then set it with its data.
And then now I'll just call promote data and run
that script, and the documents will copy from one environment
to the other.
Keep in mind that this specific process is not atomic.
You can achieve an atomic update with batches,
but that is a tip for another time.
So that is all the productivity tips we have for you today.
SUMIT CHANDEL: Got some productivity tips for us?
Or are you curious about more specific products
that you want to learn more about?
Let us know.
DAVID EAST: So thank you for watching this video.
If you liked it, make sure to hit that Like button,
and also subscribe because we are going to be
doing lots of tips and tricks.
And we will see you in the next episode of #AskFirebase.
[THEME MUSIC]