Vue and Firebase: Building a Serverless Single-Page App
What if you could create an interactive application with a fully-featured backend without maintaining a server?
You can! And it's why the term serverless is gaining more popularity. In this course, we take a look at building a modern single-page app with Vue. We'll hook our Vue app up to Firebase for a realtime datastore and user authentication.
View the code for this course on Github.
What does Vue CLI scaffold for us out of the box? Let's walk through some important files and get our bearings before writing our own code.
We need to be able to display the data we fetched from Firebase in the last episode. Luckily, Vue makes that a breeze!
It would be nice to be able to send visitors to a specific link about a given Broadway show. Let's add a
ShowDetail component which will display information about one specific show. We'll use Firebase to query information about this specific show as well.
Let's create a form to allow a user to add a new show to our collection.
Now that we have a show form, let's complete the work by persisting the data to Firebase.
We can create shows, but what if we need to make changes? Let's create a mechanism which allows the user to edit a show.
We have both a
ShowEdit view, but they're almost identical in markup. Let's try to refactor the shared logic into a child component called
At some point, we're going to need to be able to delete a show. Let's add that functionality into our app with a button and a call to Firebase.
Right now, any user on the internet could update, add or delete a show. That's probably not ideal for a production application. Luckily, Firebase provides user authentication out of the box. We'll leverage Firebase UI to add user registration, login and authentication to our app.