Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting
Host a Nuxt Universal app or site by combining Nuxt.js with Firebase Cloud Functions and Hosting.
Pre-Setup: Before Installing Any Dependencies
Obtain a Firebase Project ID to use for this project. See Overiew Here
Inside this directory, locate the file
.setup-firebasercand replace the text
your-project-idwith your Firebase Project ID.
We will now get everything setup and deployed in 3 commands:
Note: All of these commands are ran from the root directory
- Install Dependencies in all necessary directories and creates
.setup-firebasercby using a
- Build The Project
- Deploy To Firebase
Your site should now be live!
Firebase Project Setup
Create a Firebase Project using the Firebase Console.
Obtain the Firebase Project ID
- Server-side rendering with Firebase Hosting combined with Firebase Functions
- Firebase Hosting as our CDN for our publicPath (See nuxt.config.js)
Things to know...
You must have the Firebase CLI installed. If you don't have it install it with
npm install -g firebase-toolsand then configure it with
If you have errors, make sure
firebase-toolsis up to date. I've experienced many problems that were resolved once I updated.
The root directory has a package.json file with several scripts that will be used to optimize and ease getting started and the workflow
ALL commands are ran from the root directory