Skip to content

Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting

Notifications You must be signed in to change notification settings

ekoeryanto/nuxt-ssr-firebase

This branch is 1 commit ahead of, 9 commits behind davidroyer/nuxt-ssr-firebase:master.

Repository files navigation


  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.


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

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 a .firebaserc from .setup-firebaserc,
yarn setup

// This runs several commands in progression including
  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

About

Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 54.4%
  • JavaScript 24.2%
  • CSS 15.4%
  • HTML 6.0%