Nuxt.js SSR Vue on Cloud Functions for Firebase with Firebase Hosting
Cloud Functions and Nuxt.js can combine to provide a low-cost auto-scaling, SSR app experience.
Firebase Hosting can rewrite routes to a Cloud Function that serves our server-side rendered Nuxt.js Vue app. Using a rewrite rule that catches all routes, we pass the request information to Nuxt.js to produce our page per request. This results in our app being served on our Hosting URL instead of the Cloud Function URL:
<project-name>.firebaseapp.com/ & <project-name>.web.app/
instead of:
https://us-central1-<project-name>.cloudfunctions.net/<function-name>
The accompanying Medium post (TBA) goes into more detail.
# install
yarn
# setup: setup firebase config to deploy
yarn setup
# build
yarn build
# or use watch
yarn watch
# locally test
yarn serve
# deploy to firebase
yarn deploy- Due to the Firebase Hosting route priority any static files should be included in the Firebase
public/folder instead of the Nuxt.js static assets folder. - for more information about uploading the entire folder as the function's source, see my blog post about microservices with Firebase (TBA).