Skip to content

davidroyer/nuxt-ssr-firebase

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

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 .setup-firebaserc and replace the text 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 and creates .firebaserc from from .setup-firebaserc by using a postinstall hook
yarn
  1. Build The Project
yarn build
  1. Deploy To Firebase
yarn deploy

Your site should now be live!


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