I am currently facing challenges with deploying my Universal Nuxt.js app on Firebase. Despite attempting various methods, I have been unable to achieve full functionality.
While SSR and hosting static assets seem to be functioning properly, middleware is only executing on the client side and not on the server when deployed on firebase using firebase functions/hosting or through firebase serve.
My project structure includes:
project
└─ /functions (firebase functions including `nuxt/` built files)
└─ /src (nuxt app, created with `create-nuxt-app` starter template)
└─ /public (contains static files and built nuxt client files)
└─ firebase.json
In src/nuxt.config.js, the build options are configured as follows:
mode: 'universal',
...
buildDir: process.env.NODE_ENV === 'development' ? '.nuxt' : '../functions/nuxt',
build: {
publicPath: process.env.NODE_ENV === 'development' ? '/public/' : '/',
extractCSS: true,
...
}
The functions/package.json file specifies the use of node v8:
"engines": {
"node": "8"
},
...
In addition, adjustments were made in functions/index.js:
// Code snippet here
The configuration specified in firebase.json instructs Firebase to utilize the function:
"rewrites": [
{
"source": "**",
"function": "nuxtapp"
}
]
All dependencies from src/package.json were also included in functions/package.json.
After running npm run build in the src folder, the built Nuxt client files and static assets are copied into the public folder for deployment on Firebase.
Although static asset hosting and SSR appear to work, issues arise with middleware and other functionalities not being executed during server-side rendering via Firebase function.
These functionalities perform as expected in both server and client environments during local development using npm run dev.
If you have any insights on how to resolve this issue on Firebase, your input would be greatly appreciated. Thank you!