DAVID EAST: Hey, everyone.
David here.
Are you using JavaScript modules with either TypeScript
or Babel?
Are you using a module bundler like Rollup, Parcel or Webpack?
If so, you might be wondering if you're importing
Firebase the proper way.
Today, I'm going to cover importing the base Firebase app
library, importing other features, like Firestore
or cloud storage, making sure you're not importing everything
all at once, and I'll cover importing the right types
for TypeScript users.
So let's dive down into the laptop and get started.
So here I am in my editor, and I have two projects.
I have this JavaScript project and this TypeScript project.
And each one, as you can see, has a Webpack config.
And Firebase is already installed in this,
and this is already set up with Webpack.
And if you want to learn how to do that,
just drop a note in the comments,
and we'll cover that in a video.
But for now, I'm going to start with the JavaScript project.
And my entry module is in source index.js.
So when you're using JavaScript modules,
you usually do something like this, where you say import
from some module, and it has exports,
like a widget or a component or a smiley face or whatever.
But we don't have a bunch of individual exports.
We just have one, which is the Firebase export.
And then from here, I can use that to create my app.
So I can create my app variable and call Firebase.InitializeApp
with my config.
And then now, I can use a feature, like storage.
I call app.storage, and I can create a reference
to some path.
And then from there, I can do some storage-y things.
So now what I want to do is to take all this code,
and I want to bundle it all up.
So Firebase is in this bundle and my application code.
And to do this, I need to call out to Webpack.
And in my package.json, I have this build script.
I'll open up the console, run npm run build.
And just like that, we have our built app.
So to test this out, I'm going to serve up
using Firebase serve.
And here in the local browser, we
can see that our app, while basic, does work.
But we have a little bit of a problem over here.
We have this warning.
And it says, it looks like you're
using the development build of the Firebase js SDK.
When deploying Firebase apps through production,
it is advisable only to import the individual SDK
components you intend to use.
Because what's happening here is that we're
importing all of Firebase.
If you want the database, you have the database.
But if you don't want auth, well you still have auth.
In our case, we just want storage.
So if we go down here to the bottom,
we can see that there's advice for how to use es modules.
And in this case, they tell us not
to import from Firebase as a whole, but this Firebase/app
and then to import an individual package below.
And we can even see in our bundle
that we're importing everything.
If we use Chrome's explorer, we can just type in database,
and we can see the database indexes there.
And if we type in auth, we see the auth file is there.
And the same for storage.
So we have proof that all that code is in our application.
So let's go back into the editor and fix that.
So now instead of importing from Firebase,
I'm just going to import from Firebase/app.
And to prove that it only includes app,
I'm going to rebundle the application.
So I'll kill my server here and then run the build.
Put the server back up.
And then now we can see we have this error,
app.storage storage is not a function.
If I click into the stack trays, you
can see that it's when we try to access storage.
It's not loaded so we get an error.
So back in the editor, I'm going to import Firebase.
And I need to include a package name.
So this right here is different than the import statement
above.
This is actually called a bare import
because we're not actually importing
any exports from that package.
We're importing the name because it's
going to extend the ability of Firebase app.
And in this case, whatever package name
you provide becomes available onto the Firebase app.
So if I wanted to include Firestore,
I just type Firestore or auth or database.
But in this case, I want to use Firebase storage.
So now I'll rebuild.
Run my server.
And we don't have any problems.
And if I type in database, no files are found.
If I type in auth, a file is found,
but that's not our auth file.
And if I type in storage, we have
our storage file right there.
So when you're bundling with Webpack or some module bundler,
you want to make sure that you import Firebase
from Firebase/app because that way you're only getting back
the base Firebase app library.
So when you want to use an individual feature of Firebase,
you import that using a bare import because that way it just
extends Firebase app.
So that's how JavaScript modules work.
Let's take a look at how TypeScript works.
So I'll close out and get to the TypeScript project.
And just in case you're wondering,
to compile the TypeScript to JavaScript,
I'm using a plug-in called TS-Loader,
which is really good.
I'll put the link in the description.
So just like the JavaScript project,
the entry point is an index.ts.
So you might think, well, I know how to do an import now.
I'll say import Firebase from Firebase and that should work.
But we can see we have an error.
And it says that there is no default export.
And that's because TypeScript works a little bit differently.
And so we have to say import star as Firebase from Firebase.
And we want to make sure that we include the app so we don't
pull back the entire library.
And now we'll include the Firestore package.
So bare import of Firebase/storage.
And now we can go create our app, calling initialize app
with our config.
And we'll just do our storage-y things.
We'll call storage and call the app.storage method.
And you might think at this point, well,
this is how I import my code from the package.
But where do I get my types because that's
pretty much the reason why I use TypeScript?
Well, in this case, the types are inferred.
But let's say this was a parameter of a function
or something that wasn't typed.
Well, we could provide our own type from the Firebase package
as well.
So I can type Firebase.storage.
And this is a namespace in which all of the storage types
are located under.
And if I type storage.Storage, this
is the storage service as a whole.
Now in this case, this isn't really that useful
because TypeScript has really great type inference.
But in other cases, like parameters
of a function, like I said earlier,
this is where it can be really useful.
And all the other types are also underneath this namespace.
So if I wanted to type out a reference,
I type Firebase.storage.reference,
and I create my reference.
So let's build and test out this app.
So I'll run npm run build, then go run my server.
And now you can see if I type in database, there's nothing.
If I type in storage, we just have storage.
So that's all there is to using a module bundler like Webpack
with Firebase.
And if you want to learn how to set up Webpack and Firebase
from scratch either using TypeScript or Babel,
just leave a note in the comments
and we'll make a future video on that.
So that's all for today.
Thank you so much for dropping by.
If you found this video helpful, make
sure to hit that thumbs up button and also hit
that subscribe button so you get a notification every time
we drop a new video.
And I hope to see you in a future Firecast.