How To: Vue SSR with Nuxt.js on Firebase
The VueConf sessions from this year’s conference are being released as editing finishes up on them. Yesterday saw the release of Sebastien Chopin’s talk on Vue & SSR. Here’s a link, it’s a good talk. One of the nice things about Nuxt.js is that it allows you to leverage the same code for client and server side renderings. SSR is important for public facing apps, especially where SEO is involved.
I’ve also been getting into Firebase a bit. It’s a great platform for building all kinds of applications, especially if you want to go serverless. I did some digging for examples on how to set up Nuxt.js on Firebase and there were a few things out there, but nothing that I could just clone and go with. Google’s David East has a video that walks through the process of getting started, but I had a little trouble following it. There’s also this issue on the NUXT GitHub issue tracker that was helpful, but didn’t have an example solution.
So I made one! My sample project is a pseudo search engine that demonstrates how you can get started with Nuxt.js on Firebase today. It leverages three features of Firebase: Hosting, Functions and Storage. And it also illustrates how to use the
asyncData feature described in Sebastien’s talk.
If you haven’t worked with Nuxt.js or Firebase before this is an easy way to get started with both. Here are the high-level steps you need to take:
- Set up a Firebase account and create a project
- Set up your environment
- Clone the project and initialize Firebase
- Run locally
- Publish & Voilà
Get a Firebase Account and Create a Project
You can do this at https://firebase.google.com. After you’ve signed in with your Google account hit the giant Add Project button and start a new project. Give it a name and hit the Create Project button. Once you‘re on the project dashboard click Storage from the left nav, then click Get Started. This will enable Storage for you and give you a place to upload files. After we clone the project we’re going to drop a
results.json file here so that it’s available to query. This will drive the search results screen. Now you’re ready to head over to your terminal.
First you’ll want to be sure that you’re running Node 8.x or later. Firebase only supports Node 6 right now (es5), but that’s ok. This project uses webpack/babel to transpile for you, so you can ignore the warnings you may see about this in your console. You’ll also want to be sure that you have the Firebase CLI tools installed:
$ npm install -g firebase-tools
Clone and Init Firebase
Now you can clone the project repo. Once you’ve done that you need to hook the code up to your Firebase project. Do that with the following:
$ git clone email@example.com:groksrc/groksrc-search.git
$ firebase init
This will walk you through a series of questions and at the end a
.firebaserc file is created for you. This is how the Firebase CLI knows where your backend is.
⚠️ Caution: when you run the init command it will overwrite the
firebase.json file. Be sure to discard this change and just keep the
As you walk through the
firebase init command options select the following:
- Choose only the Hosting option. You can skip the others because this configures the firebase.json file and we already have one in the project.
- Select the project you created above from the list of choices. If you don’t see it, make sure you’re logged in to the correct account. This will be saved in the
distfor the public directory. This will prevent junk files from being created.
- Choose the defaults
Now be sure to reset the
firebase.json file. Once that’s complete you need to also need to be sure and install the npm dependencies:
$ yarn install # or npm install
Now you should be able to start the project locally. Use the following command to make sure that everything is running:
$ yarn dev
It should start and you should be able to browse http://localhost:3000. If everything is working as expected you’ll see a search page that looks similar to Google’s homepage. Once it’s up you can start making changes, Hot Module Reload should work too.
Note at this point we’re just running with
nuxt via node.js. Firebase hasn’t come into play yet. If we want to test our Firebase functions locally we have to transpile the project. Then we can run it:
$ yarn package-functions
$ firebase serve --only hosting,functions
This will launch the app via a Firebase process, similar to what it would do once you publish. Note that HMR is not available while running via the Firebase CLI.
To push your project and see it live you can run the following:
$ yarn push
This script will compile the Google Functions code into a /functions directory and publish it for you. The code in this directory is what Functions will use to perform the server side rendering.
Once the push command is complete the project will be up and you can test it on your live URL that is display in the console. Note: when I was testing these steps I noticed that the push command would fail on occasion for some unspecified reason. Just running the command again seemed to take care of the problem.
The sample app is set to pull the
results.json from the original Firebase project I set up for the demo. In order to make your own results just pop open the file in the root directory, tweak & save, then upload it to the Storage project in your app. Once you’ve done that, click on the uploaded file to expand the details and expand the File Location section. Copy the Download URL from this section. Then in the source code locate results.vue and update the URL in the
asyncData method to point to your file. Now save and
yarn publish again.
That’s it! At this point you’re off and running with Nuxt.js and Firebase. I hope you’re able to spend a few minutes with these two awesome technologies, it’s definitely a smooth way to build an app and I’ve really enjoyed getting acquainted with them. Until next time!