Build a Dynamic Web App Using Firebase Hosting – Firecasts
Articles,  Blog

Build a Dynamic Web App Using Firebase Hosting – Firecasts


[MUSIC PLAYING] LAURENCE MORONEY:
Firebase Hosting provides fast and secure
hosting for your web app. It works with static
content, but that doesn’t have to be a limitation. With powerful
JavaScript frameworks, you can build very rich websites
using only static files. I’m Laurence Moroney,
and in this video, I will show you how to use
Firebase Hosting to build a powerful website that lets you
view extremely high resolution images with a very smooth
zooming experience. For example, here’s
a finished site that I built using an image that
has 100 million pixels in it. You can visit this link to
play with it for yourself. As you can see, when
I zoom in to her eye, you can actually see what
was behind the virtual camera causing that
reflection in her eye. Or if I zoom into the
monitors behind her, you can actually see the text
that was written on them. All of this was implemented
using static files and hosted on Firebase Hosting. Now, how would you do this? First of all, you’re going
to need a Firebase project. Create that in the Firebase
console in the usual way, and then make sure that
you select Firebase Hosting and go through the steps. To deploy files to hosting, you
will need the Firebase Command Line Interface, or CLI. And in order to get this,
you’ll need NPM, which is the Node.js Package Manager. If you don’t have
this already, you can get it by following the
instructions on Node.js.org. Once you have NPM, you can
install the Firebase CLI on your system as part
of the Firebase tools with this command. Now create a directory on
your development machine. And this is where you’re going
to store your static files. Move into that directory and
run the Firebase init command. The first question is, what
do you want to do with it? Do you want to use Firebase
Database, Cloud Functions, or Hosting? Pick Hosting, and then
you’ll be asked which project you want to associate with. Earlier in the
console, I created a project called FH-Screencast,
so I’m going to pick that. The CLI will then ask
you a bunch of questions. Just select the default
answers to all of them. Note in particular the public
directory for your web files. It defaults to Public. Once the initialization
is complete, take a look in that directory. There’s going to be a
bunch of files in there, as well as a public
folder which contains the basic HTML files that
you will use to get started. And that’s it. Put your static files
in the public directory, and then use the
Firebase Deploy command and they’ll be uploaded for you. Let’s take a look
at an example now. The Seadragon-based zooming
app that I showed earlier on. This zooming works by
slicing your image up into tiles at
different zoom levels. There’s a Python-based
tool to do this for your, and you can get it here. Of course, you’ll need
an image, so if you want to use my
100 megapixel one, you can download
it at this link. So when you run the tool
to slice up the image, you’re going to
get lots of tiles and an index file
called a DZI, which is used by the
JavaScript libraries to link them all together. Then all you need
is a static HTML file that uses the
Seadragon JavaScript, and which points to this DZI. Here’s what the script on
that page would look like. And once you have all of that,
you put it in the directory and do a Firebase
Deploy command. Files will upload to your
Firebase Hosting space and get deployed for you. Can see in the Firebase
console that previous versions are archived if you
ever need to roll back. You can also map a domain
name to it if you want. And that’s it. It’s really that easy
to build a website, manage, and deploy it on
Firebase, and it’s free. If you have any questions,
please leave them in the comments below. And don’t forget to hit
that Subscribe button. [MUSIC PLAYING]

42 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *