Nuxt 2 how to serve the Assets correctly in Firebase Host

Asked

Viewed 139 times

0

I’m building a new ssr application using Nuxt 2 and Firebase, I’m trying to deploy my application using Firebase Hosting and Cloud Functions as well as this video however the problem, the video is done using Nuxt 1 and when deploying with Nuxt 2 in the dist folder are generated 2 folders /client and /server and on account of that after deploying the error Uncaught SyntaxError: Unexpected token <Uncaught SyntaxError If I copy all the contents of the /dist/client folder and paste inside the /public page the error stops but the css stops working.Sem CSS My nuxt.config is like this:

{
  mode: 'universal',

  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
    ]
  },

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

  /*
  ** Global CSS
  */
  css: [
    '~/assets/style/app.styl'
  ],

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

  /*
  ** 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: '/',
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {

    }
  }
}

My functions/index.js look like this:

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

const app = express()

const config = {
  dev: false,
  buildDir: './nuxt',
  build: {
    publicPath: '/'
  }
}

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.nuxtApp = functions.https.onRequest(app)

1 answer

0

As in the video, you should serve your static content according to the public path setting, which is the root.

Copy client and server content to the public folder, which will be accessible at the root of your application:

cp -R functions/nuxt/dist/client/* public
cp -R functions/nuxt/dist/server/* public

Browser other questions tagged

You are not signed in. Login or sign up in order to post.