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 ie 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'