Nuxt ^2.0.0 and Firebase Hosting

Question

I am attempting to deploy my nuxt application to firebase hosting. I am currently following this tutorial which has helped me deploy the app to the firebase cloud i.e. the generated local host url: http://localhost:5001/****/us-central1/testApp

However, when I view the application in my localhost 5000 or the cloud local host 5001 the app is broken.

localhost:5000

localhost: 5001

The tutorial mentioned is scaffold with Vue cli and I created my project with the npx create-nuxt-app. Also, assuming that the tutorial uses Nuxt version 1, which has a different dist output, I am using version 2 which outputs a dist directory with two folders client and server.

I believe the issue has to be the script tags not pointing to the right path, and that may have to do with how either the nuxt.config.js, the functions/index.js, or the firebase.json files are written. Or it could be the structure of the public directory.

nuxt.config.js

const pkg = require('./package')

module.exports = {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: pkg.name,
    meta: [{
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1'
      },
      {
        hid: 'description',
        name: 'description',
        content: pkg.description
      }
    ],
    script: [{
      src: '/bundle.min.js',
      body: true
    }],
    link: [{
        rel: 'apple-touch-icon',
        size: '180x180',
        href: '/img/apple-touch-icon.png'
      },
      {
        rel: 'icon',
        type: 'image/png',
        href: '/img/favicon-32x32.png'
      },
      {
        rel: 'icon',
        type: 'image/png',
        href: '/img/favicon-16x16.png'
      },
      {
        rel: 'manifest',
        href: '/img/site.webmanifest'
      },
      {
        rel: 'mask-icon',
        href: '/img/safari-pinned-tab.svg',
        color: '#da532c'
      },
      {
        rel: 'shortcut icon',
        href: '/img/favicon.ico',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700'
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Poppins:400,500,600,700'
      },
      {
        rel: 'stylesheet',
        href: 'https://use.fontawesome.com/releases/v5.5.0/css/regular.css',
        integrity: 'sha384-z3ccjLyn+akM2DtvRQCXJwvT5bGZsspS4uptQKNXNg778nyzvdMqiGcqHVGiAUyY',
        crossorigin: 'anonymous'
      },
      {
        rel: 'stylesheet',
        href: 'https://use.fontawesome.com/releases/v5.5.0/css/brands.css',
        integrity: 'sha384-QT2Z8ljl3UupqMtQNmPyhSPO/d5qbrzWmFxJqmY7tqoTuT2YrQLEqzvVOP2cT5XW',
        crossorigin: 'anonymous'
      },
      {
        rel: 'stylesheet',
        href: 'https://use.fontawesome.com/releases/v5.5.0/css/fontawesome.css',
        integrity: 'sha384-u5J7JghGz0qUrmEsWzBQkfvc8nK3fUT7DCaQzNQ+q4oEXhGSx+P2OqjWsfIRB8QT',
        crossorigin: 'anonymous'
      },
      {
        rel: 'stylesheet',
        href: '/styles.css'
      }
    ]
  },

  /*
   ** Customize the progress-bar color
   */
  loading: {
    color: '#fff'
  },

  /*
   ** Global CSS
   */
  css: [],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],

  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
   ** Build configuration
   */
  buildDir: './functions/nuxt',
  build: {
    publicPath: '/public/',
    extractCSS: true
  }
}

functions/index.js

const functions = require('firebase-functions')
const express = require('express')
const {
  Nuxt
} = require('nuxt')

const app = express()

const config = {
  dev: false,
  buildDir: 'nuxt',
  build: {
    publicPath: '/public/'
  }
}
const nuxt = new Nuxt(config)

function handleRequest(req, res) {
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200')
  nuxt.renderRoute('/').then(result => {
    res.send(result.html)
  }).catch(e => {
    res.send(e)
  })
}
app.get('*', handleRequest)
exports.testApp = functions.https.onRequest(app)

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
      "source": "**",
      "function": "testApp"
    }]
  }
}

Public Directory Structure

-| public/ ----| client ----| server

What am I doing wrong?

Answer 1

The static files are in the client folder. If you put publicPath: '/client'