Create a SSR + Serverless App with Firebase & Nuxt.js within an hour
I’ve been hearing a lot about Firebase these days. I looked it up and my first thought was “Wow, it looks good for building a post-prototyping-stage app”. Because you don’t need to think about backend architecture, and you can simply focus on what service you’re going to make. And, on top of that, Firebase is free to start!
Vue.js is my favourite framework. It’s so easy to make a web app UI with Vue.js. Nuxt.js is using Vue.js technology to make SSR(Server Side Rendering) possible. I believe the combination of Firebase & Nuxt.js allows you to make a web app instantly.
I found this tutorial video. It’s awesome, very useful and well made, but a little bit quick to work with. I also realized there are some things I want to add. This post will cover them up.
In this post, I’m using Terminal on my Mac. vim is my editor. When you see it in this tutorial, you can simply think it’s opening an editor and editing the file. My node version is 8.11.2, and I like to use yarn. yarn add is same as npm install —-save if you’re using npm.
I’d like to leave the repository I made through this tutorial: https://github.com/wataruoguchi/nuxtjs-firebase-example
1. Create a project directory
<proj> can be your project name. This directory will be the root directory of the project.
2. Setup Nuxt.js
Let’s install vue-cli, which allows you to run vue command. Installing yarn is optional. Then, initialize your project in src folder with a template.
3. Edit home page
We’re going to edit index page, which you’ll see at first when the app is loaded.
pages/index.vue will look like this:
That’s easy! Just displaying the list fetched from https://nuxt-ssr.firebaseio.com/facts.json
Let’s edit the config file for building the app.
Add the following code block in build node.
4. Let’s launch in localhost
Congrats! You must be able to see it in http://localhost:3000 ! If you see the page with ‘View Page Source’, you can tell it’s SSR!
5. Use Babel to support old browsers
We need to support not only the latest browsers but also the older ones like IE. Babel is the tool you want to use.
Nuxt.js needs to know their existence. Let’s edit the config file.
In addition, in the same file, you want to update vendor like this:
Try running it and see it in the browser again. It should not have any errors.
6. Setup Firebase
Firebase has great documentation, I’d just go through it. But here’s what I’ve done:
It tells you to open https://console.firebase.google.com at one point. Open it in your browser.
Then, add the project in your console.
7. Setup Cloud Functions
Let’s setup Cloud Functions. It’s used for SSR. Server side work should be done by this Cloud Functions powered by Firebase.
Add this line in top level.
Next, let’s move to functions and work there
Add "engines": { "node": "8"} in the top level. Then you can enable node 8 in Firebase. See more
Then, add all packages you have in src/package.json
Now you must see nuxt directory in functions directory.
8. Run Nuxt.js by Cloud Functions
We want to serve static assets from static server. Let’s copy the static assets from functions and save in public/assets .
functions/index.js will look like this below. The app gives request and let Nuxt render the response.
9. Serve static assets by Firebase Hosting
We don’t want to serve static assets dynamically every time. Let’s serve them statically.
Now, public directory has been made. Let’s copy static assets here
10. Let’s deploy!
Update rewrites under hosting . Look how it will look like:
Ok, cool. Let’s run firebase on localhost.
It takes a little while. When you see functions got green, open http://localhost:5000 . You should be able to see the page in your browser.
However, we still have errors in console window. Let’s fix them.
Change publicPath from /public/ to /
Same for functions/index.js
Let’s move to src and build the app again.
Open http://localhost:5000 again. Hope you can see no error in console window in your browser.
Finally, let’s deploy!
Wait until you see “✔ Deploy complete!” message. Then visit “Hosting URL:”. Do you see the page you built? Congratulations!
I can’t believe it’s that easy to deploy SSR app. What an era we live! This quickness would be helpful for Hackathon, or building alpha version of apps. I’d like to enjoy Nuxt.js and Firebase for a while.
Thank you for reading, happy coding!
