Skip to content

davidroyer/nuxt2-ssr-firebase

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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