title: Deploying Vue/Nuxt app to Firebase as Universal App with SSR
body: <p>I'm trying to deploy my Universal Nuxt.js app to Firebase. All information on doing this appears to be out-dated, and I'm not able to get it fully working.</p>
  <p>SSR appears to work, along with static assets being hosted. Middleware though, for example, its only being executed on the client - and not on the server (such as when it is first loaded through SSR) when it is deployed on firebase with firebase functions/hosting (or using <code>firebase serve</code>).</p>
  <p>I have the following project structure:</p>
  <pre><code>project
  └─ /functions (firebase functions including `nuxt/` built files)
  └─ /src (nuxt app, using `create-nuxt-app` starter template)
  └─ /public (includes static files and built nuxt client files)
  └─ firebase.json
  </code></pre>
  <p>in <code>src/nuxt.config.js</code> set the build options</p>
  <pre><code>mode: 'universal',
  ...
  buildDir: process.env.NODE_ENV === 'development' ? '.nuxt' : '../functions/nuxt',
  build: {
    publicPath: process.env.NODE_ENV === 'development' ? '/public/' : '/',
    extractCSS: true,
  
    ...
  }
  </code></pre>
  <p>in <code>functions/package.json</code> set to use node v8</p>
  <pre><code>&quot;engines&quot;: {
    &quot;node&quot;: &quot;8&quot;
  },
  ...
  </code></pre>
  <p>and the following to <code>functions/index.js</code></p>
  <pre><code>const functions = require('firebase-functions');
  
  const admin = require('firebase-admin')
  const { Nuxt } = require('nuxt')
  const express = require('express')
  
  const app = express()
  
  // Set Nuxt.js options
  const config = {
    dev: false,
    buildDir: 'nuxt',
    build: {
      publicPath: '/'
    },
  }
  
  const nuxt = new Nuxt(config)
  
  function handleRequest(req, res) {
    res.set('Cache-Control', 'public, max-age=300, s-maxage=600')
    nuxt.renderRoute('/')
      .then(result =&gt; {
        res.send(result.html)
      })
      .catch(e =&gt; {
        res.send(e)
      })
  }
  app.get('*', handleRequest)
  exports.nuxtapp = functions.https.onRequest(app)
  </code></pre>
  <p>in <code>firebase.json</code> instruct firebase to use the function</p>
  <pre><code>&quot;rewrites&quot;: [
    {
      &quot;source&quot;: &quot;**&quot;,
      &quot;function&quot;: &quot;nuxtapp&quot;
    }
  ]
  </code></pre>
  <p>I've also added all dependencies from <code>src/package.json</code> to <code>functions/package.json</code>.</p>
  <p>On <code>npm run build</code> in <code>src</code> folder, the built Nuxt client files (<code>firebase/nuxt/dist/client/*</code>) and the app's static files (<code>src/static/*</code>) are being copied into the <code>public</code> folder before being deployed (for firebase static hosting and CDN).</p>
  <p>Using this setup, static assets hosting and SSR appears to work when deployed on Firebase, but the <code>middleware/asyncData/nuxtServerInit/etc</code> is not being executed when it is server side rendered using the Firebase function.</p>
  <p>The middleware for example works as expected on both server/client when on dev mode locally (<code>npm run dev</code>).</p>
  <p>What am I missing or doing wrong to get this working when deployed on Firebase?</p>
  <p>Thanks!</p>