Skip to content
Nuxt2 Universal App with SSR via Firebase Functions and Firebase Hosting
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
prod
src
.firebaserc.sample
.gitattributes
.gitignore
README.md
firebase.json
package.json
yarn.lock

README.md

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.

Live Preview


Pre-Setup: Before Installing Any Dependencies

  1. Obtain a Firebase Project ID to use for this project. See Overiew Here

  2. Inside this directory, locate the file .firebaserc.sample, and do the following:

  • Rename this file to .firebaserc
  • Inside this file, replace your-project-id with your Firebase Project ID.

Setup

We will now get everything setup and deployed in 3 commands:

Note: All of these commands are ran from the root directory

  1. Install Dependencies in all necessary directories in 1 command
yarn setup
# OR
npm run setup
  1. Build The Project
yarn build
# OR
npm run build
  1. Deploy To Firebase
yarn deploy
# OR
npm run deploy

Your site should now be live!


Development

There are 2 development options.

1. Without Firebase Functions

This will be like a normal Nuxt development experienced.

yarn dev

2. With Firebase Functions

This uses Firebase's local development tools to test our project

yarn serve

Firebase Project Setup

  1. Create a Firebase Project using the Firebase Console.

  2. Obtain the Firebase Project ID

Features

  • 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-tools and then configure it with firebase login.

  • If you have errors, make sure firebase-tools is 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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.