Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting - Nuxt 2 Version
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
.firebaserc.sample, and do the following:
- Rename this file to
- Inside this file, replace
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 in 1 command
yarn setup # OR npm run setup
- Build The Project
yarn build # OR npm run build
- Deploy To Firebase
yarn deploy # OR npm run deploy
Your site should now be live!
There are 2 development options.
1. Without Firebase Functions
This will be like a normal Nuxt development experienced.
2. With Firebase Functions
This uses Firebase's local development tools to test our project
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