KiritchoukC

Posted on Oct 10, 2019 • Edited on Feb 13, 2020

Deploy nuxt on Firebase

#javascript #tutorial #vue #serverless

Introduction

I already have a working website using Nuxt and SSR so why would I move everything to Firebase?

SSR stands for server-side rendering, you can find more information here Understanding Server Side Rendering

There are so many reasons!
To list a few...

Price

Current solution: I have to pay every month for a private server

Firebase: Well, for my needs, it's free.

Configuration

Current solution: I have to configure everything myself. Docker containers, https, Nginx reverse proxy, ...

Firebase: Everything you need is already done. Logging, analytics, https, custom domain, ...

Update

Current solution: A change in my website? here are the steps

Push changes to git
Hook on docker hub get triggered and build the container (10-15 min)
Connect on the server (1 min)
Pull the latest container version (1 min)
Find the right folder where the docker-compose.yaml is and update it (2 min)

I know I could've automated things a bit more but still...

Firebase: Steps

type firebase deploy in terminal (1-2 min)
done... changes are live

You're hooked? Obviously, you are. Let me help you get it running.

Setup the Firebase project

Create your Firebase account

You want to use Firebase, don't you? Well, you need to create your account first.

Done? We can now create a new project.

Create a Firebase project

Let's head over to Firebase console and click on Add project.

Set your project name.

Click on Continue.

Uncheck Google analytics for now and click on Add Firebase.

Wait for the project initialization and click on continue.

Install Firebase CLI

Now with the help of NPM, we will install the firebase tools on our computer.

Simply enter this command on your favorite terminal

npm i -g firebase-tools

Afterward, you should be able to login with this command

firebase login

A browser window will pop up and allow you to login with your Google account.

Alright, the initial Firebase setup is done...

Before adding firebase to our project, we need to update our application project structure...

Project Structure

I'm supposing you already have a nuxt project.

If not, head over to the Nuxt website to create a new app with express for the server side.

Our project will be decomposed into 3 directories

src: This is where our development files sit
functions: This is where our SSR function will be
public: This directory will hold the files that will be served by Firebase hosting

We won't take care of the functions and public directories. It will be generated automatically.

So create the src directory and move all the nuxt directories into it.
Only the directories, leave the configuration files at the root

You should have something like the structure below

The app is broken now! Let's fix it by updating the nuxt config...

Update Nuxt config

In nuxt.config.js, add the following lines in module.exports

module.exports = {
[...]
  srcDir: 'src',
  buildDir: 'functions/.nuxt',
[...]
}

And in the build object, set extractCss to true

module.exports = {
[...]
  build: {
    extractCSS: true,
    [...]
  }
[...]
}

It is still broken because npm script cannot find our entry file server/index.js

Let's update our package.json

Replace dev and start scripts with these.

I just prefixed the path with "src"

    "dev": "cross-env NODE_ENV=development nodemon src/server/index.js --watch server",
    "start": "cross-env NODE_ENV=production node src/server/index.js",

You should now be able to start your application by typing yarn dev or npm run dev

Notice that the functions directory has been created with the nuxt files in it.

Add Firebase to the project

Like Git or NPM, Firebase CLI has its init command to get everything you need quickly.

Launch the command

firebase init

The CLI will ask you some questions and here are the answers:

? Are you ready to proceed?
> Yes

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
> Functions: Configure and deploy Cloud Functions,
> Hosting: Configure and deploy Firebase Hosting sites

? Please select an option:
> Use an existing project
(Select the project we created earlier)

? What language would you like to use to write Cloud Functions? (Use arrow keys)
> JavaScript

? Do you want to use ESLint to catch probable bugs and enforce style? (y/N)
> y

? Do you want to install dependencies with npm now? (Y/n)
> Y

? What do you want to use as your public directory? (public)
> public

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
> N

A wild public directory appeared! Our project structure is now complete.

We can now edit our function...

Implement SSR function

Open the functions/index.js file, remove everything and paste the code below

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

const app = express()

const config = {
  dev: false
}

const nuxt = new Nuxt(config)

let isReady = false
const readyPromise = nuxt
  .ready()
  .then(() => {
    isReady = true
  })
  .catch(() => {
    process.exit(1)
  })

async function handleRequest(req, res) {
  if (!isReady) {
    await readyPromise
  }
  res.set('Cache-Control', 'public, max-age=1, s-maxage=1')
  await nuxt.render(req, res)
}

app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)

To sum it up, on each reqest, the function will pass the response and request object to the nuxt.render(req, res) function which will handle the app rendering.

Updating the function package.json

The function will need the same libraries as your nuxt app. Copy the package.json dependencies to the functions/package.json dependencies

At the time of writing this article, firebase supports node version 10. In functions/package.json you can update the node engine version from 8 to 10.

Here's an example of the functions/package.json of a blank nuxt project

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "dependencies": {
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.1.0",
    "cross-env": "^5.2.0",
    "nuxt": "^2.3.4",
    "express": "^4.16.4",
    "vuetify": "^1.3.14",
    "vuetify-loader": "^1.0.8",
    "@nuxtjs/pwa": "^2.6.0"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-plugin-promise": "^4.0.1",
    "firebase-functions-test": "^0.1.6"
  },
  "private": true
}

Updating firebase.json

Replace the whole file with

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

It will redirect all the requests to the function we've made

Using a node version above 10 can cause some issues...
You can use nvm or directly install NodeJs 10 on your computer.

Automate all the things

Static files

We learned earlier that static files will be held by the public directory. But what are the nuxt static files?

There will be the nuxt app itself, the result of the nuxt build command.

And the static files (.jpg, .ico, .png, ...) stored into the src/static directory

So we'll need to move them both in the public directory, let's see how...

Step by step

Here is what we're going to automate with the scripts

Clean the directories in case there's already something in it
Build the nuxt app
The built app is now in the functions directory. Copy the content of the functions/.nuxt/dist/ directory to the public/_nuxt directory
Copy the static files from the src/static/ directory to the root of the public directory
Install the functions dependencies with yarn

The public folder should look something like this

These scripts will do all that for us. So kind of them.
Add these to the main package.json file.

Windows version

scripts: {
    "build": "nuxt build",
    "build:firebase": "yarn clean && yarn build && yarn copy && cd \"functions\" && yarn",

    "clean": "yarn clean:public && yarn clean:functions && yarn clean:static",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",

    "copy": "yarn copy:nuxt && yarn copy:static",
    "copy:nuxt": "xcopy \"functions\\.nuxt\\dist\\*\" \"public\\_nuxt\\\" /E /Y",
    "copy:static": "xcopy \"src\\static\\*\" \"public\\\" /E /Y",

    "start:firebase": "firebase serve --only functions,hosting",

    "deploy": "firebase deploy --only functions,hosting"
}

MacOs version

Thanks to Michael Messerli for his MacOs scripts version

 "scripts": {
    // ...
    "build:firebase": "yarn clean && yarn build && yarn copy && cd functions && yarn",

    "clean": "yarn clean:public && yarn clean:functions && yarn clean:static",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",

    "copy": "yarn copy:nuxt && yarn copy:static",
    "copy:nuxt": "mkdir public/_nuxt && cp -r functions/.nuxt/dist/* public/_nuxt",
    "copy:static": "cp -r src/static/* public",

    "start:firebase": "firebase serve --only functions,hosting",

    "deploy": "firebase deploy --only functions,hosting",

    // ...
  }

Still having issues? James Block comment might help you https://dev.to/meanjames/comment/leln

Grand finale

You can now launch these commands to start your application:

yarn build:firebase
yarn start:firebase

And to deploy:

yarn build:firebase
yarn deploy

Tho, for development, you can still use

yarn dev

Conclusion

You now got a server-rendered nuxt application on firebase... Easy huh?

For this article, I did an example with a blank nuxt app. Here's the final project nuxt-on-firebase example repository.

Did you spot an error? Shame on me! You can correct it by doing a pull request right here nuxt-on-firebase repository

Top comments (54)

Micha • Apr 29 '20

Hi there :)
Thank you for your tutorial.
I run into an error when i try to start d´the dev server. It looks like he cant find the server cant find the node modules. Does anybody has a similar problem?
Greetings Micha

My errorcode:
[nodemon] 1.19.4
[nodemon] to restart at any time, enter rs
[nodemon] watching dir(s): server
[nodemon] watching extensions: js,mjs,json
[nodemon] starting node src/server/index.js
internal/modules/cjs/loader.js:796
throw err;
^

Error: Cannot find module '../nuxt.config.js'
Require stack:

C:\Users\m\Documents\nuxt-app\src\server\index.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17) at Function.Module._load (internal/modules/cjs/loader.js:686:27) at Module.require (internal/modules/cjs/loader.js:848:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (C:\Users\m\Documents\nuxt-app\src\server\index.js:7:16) at Module._compile (internal/modules/cjs/loader.js:955:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10) at Module.load (internal/modules/cjs/loader.js:811:32) at Function.Module._load (internal/modules/cjs/loader.js:723:14) at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10) { code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\Users\m\Documents\nuxt-app\src\server\index.js' ] } [nodemon] app crashed - waiting for file changes before starting...

Ashh • May 29 '20

my recent nuxt build doesn't have server folder for some reason

bambang setyawan • Jun 5 '20

i have some problem, i could not find server folder, i have develop in normal nuxt before

Abel Moremi • Jun 5 '20

Its probably caused by in the initial creation of your NUXT app, you did not choose an integrated server-side framework... the options were express, koa, hapi.. etc In this case you were supposed to choose Express... that's when the server folder will appear...

check this out, it gives you a step by step guide... read though it especially steps 1

bambang setyawan • Jun 5 '20

Thank you very much , I appreciate your reply.

marcoraven • Aug 1 '20

My nuxt installation script didn't offer the option to choose an integrated server-side framework. What did I do wrong?

itxp2008 • May 24 '20

same problem... managed to fix it?

Wevelly Felipe • May 30 '20

It's giving an error because the directiores was changed and nuxt.config.js can't be found. Just go to src/server/index.js and change "const config = require('../nuxt.config.js')" to "const config = require('../../nuxt.config.js')".

Abel Moremi • Jun 5 '20

Thanks, was stuck for like 2 weeks on this part...

James Block • Feb 13 '20 • Edited

Great article, it really helped out a lot! But, I still had some issues

The Story

The one issue I had was with writing the scripts. Im using a mac and didn't have access to the rimraf command. I was able to write scripts just using the the rm -rf command as a substitute. However I ran into an issue when trying to run the fallowing command...

"clean:public": "rm -rf \"public/**/*!(.md)\""

Sidenote

The command should work fine if you are using git bash and run it in your terminal after enabeling extended globing and remove the escaped double quotations. The commands to do that are as fallows...

Enable

shopt -s extglob

Disabled

shopt -u extglob

This lead me on a journey to discover a little bit of information that to most is probably well known and obvious, and that is that the npm run scripts don't use the users shell. In other words if I wanted to use the extended globing feature in my scripts I would need to install additional node packages like the rimraf node package. Furthermore, using the rimraf package is apparently faster then rm -rf and is more cross platform compatible.

Take Away

I learned a few important things from trying to fallow this article. For clarity I think the article would benefit from having them included even if they seem obvious.

What the rimraf command is and that it's essentially the same as rm -rf and allows for a work around to the rm -rf with pattern matching in node scripts issue.
How to install rimraf in your dev dependencies or globally so you can use it in your npm scripts. Or at least list it somewhere as a dependency for using the scripts as they are written.

Granted most of these issues are from the view point of someone using a macOS or git bash. However, I'm assuming writing scripts on a windows computer has similar issues if you try to avoid using the packages like rimraf. I just think it would be a good thing to mention what the package is and how to use them because chances are someone like myself wont know about the package.

Scripts if using npm on macOS.

This should be fairly obvious but all you need to do is replace yarn with npm run...

"scripts": {
    // ...
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",
    "clean": "npm run clean:public && npm run clean:functions && npm run clean:static",
    "copy:nuxt": "mkdir public/_nuxt && cp -r functions/.nuxt/dist/* public/_nuxt",
    "copy:static": "cp -r src/static/* public",
    "copy": "npm run copy:nuxt && npm run copy:static",
    "build:firebase": "npm run clean && npm run build && npm run copy && cd functions && npm i",
    "start:firebase": "firebase serve --only functions,hosting",
    "deploy": "firebase deploy --only functions,hosting"
   // ...
}

KiritchoukC • Feb 13 '20

Hey James,

Thanks for the deep explanation!

I'll put a link to your comment in the article for every other macOs users out there.
Thanks again for them.

James Block • May 11 '20

Glad I could help!

JoshidCoates • May 15 '20

To make it more obvious: Replace yarn with npm run, but at the end of build:firebase change run to i (install)

Michael Messerli • Dec 2 '19

Thank you so much for this guide!

Here's what I changed in the package.json for anyone on macOs:

"scripts": {
    // ...
    "build:firebase": "yarn clean && yarn build && yarn copy && cd functions && yarn",

    "clean": "yarn clean:public && yarn clean:functions && yarn clean:static",
    "clean:functions": "rimraf \"functions/node_modules\" && rimraf \"functions/.nuxt\"",
    "clean:public": "rimraf \"public/**/*.*!(md)\" && rimraf \"public/_nuxt\"",
    "clean:static": "rimraf \"src/static/sw.js\"",

    "copy": "yarn copy:nuxt && yarn copy:static",
    "copy:nuxt": "mkdir public/_nuxt && cp -r functions/.nuxt/dist/* public/_nuxt",
    "copy:static": "cp -r src/static/* public",

    "start:firebase": "firebase serve --only functions,hosting",

    "deploy": "firebase deploy --only functions,hosting",

    // ...
  }

KiritchoukC • Dec 3 '19

I'm glad you liked it.

Thanks for the macOs scripts, I'll update the article.

SeriousLee13 • Feb 5 '21 • Edited

For anyone else struggling with the no server/index.js being generated on project creation, here's what I did (quite simply):

I manually created the server/index.js file, then copied the author's index.js from the project repo - he provides a link at the bottom of the article. Remember to replace the dev and build scripts in package.json!
Next it threw some importing error regarding the import colors from 'vuetify/es5/util/colors' statement at the top of nuxt.config.js so I removed that import entirely and because of that I also had to remove the references to colors from the vuetify section (which I'm in any case gonna replace with my own hex strings later on)
Lastly, and I'm not sure if this was strictly necessary, but I also converted the export default { to module.exports = { at the top of nuxt.config.js

After doing all of that, the project seems to be starting up just fine (though I still have to finish the rest of the article to see if it's gonna keep working). All this being said, I feel that my solution was probably not optimal (for one thing, I can't use import statements in my nuxt.config.js file anymore), so if anyone finds a better solution, please point me to it.

And FWIW, I'm running nuxt 2.14.12

Updates:

I managed to finish the tutorial but I now get stuck on the yarn build:firebase, yarn start:firebase part. It builds fine, but when running the start command, I get the following output:

PS C:\Github\nuxt-on-firebase> yarn start:firebase
yarn run v1.22.10
$ firebase serve --only functions,hosting
i  hosting: Serving hosting files from: public
+  hosting: Local server: http://localhost:5000
+  functions: Using node@12 from host.
+  functions: functions emulator started at http://localhost:5001
i  functions: Watching "F:\Github\wizpi\codename-groceries-nuxt\functions" for Cloud Functions...
!  functions: Cannot set property config of #<Object> which has only a getter
!  Your function was killed because it raised an unhandled error.

[ I had to change my functions' node version to 12, coz that's what's running on my machine].

And when I then visit localhost:5000 in my browser, all it gives me is Cannot GET / in the browser window, with a 404 in the dev console.

I'm too tired to try and debug it now, but I'll get to it in the morning. If anyone else manages to get it sorted before me, please comment with your solution. Otherwise I'll make another update if/when I figure it out.

So I've been at it all day and made some progress.

The Cannot set property config of #<Object> which has only a getter warning turned out to be nothing - I fixed it by updating my firebase-tools package, but it didn't solve the Cannot GET / problem.
To solve that, I deleted the project I was working on and restarted from scratch, this time adding the changes from the pre-updates section before the part of the article where he says to start the project up for the first time.
The second thing I did differently was to manually install the functions' additional package.json packages, (instead of copying and pasting them into package.json and then running npm i).
Also used yarn exclusively from the start of this project.

Not sure how many of these changes actually made a difference, but that's just what I did.

I'm now perfectly able to run yarn build:firebase, yarn start:firebase, but I'm now having issues with the deployment. The first time I ran yarn deploy it eventually threw an unknown 403 http error (paraphrasing), so I split the deploy script in two:

"deploy:functions": "firebase deploy --only functions",
"deploy:hosting": "firebase deploy --only hosting"

And if I now run them separately, they go through successfully, and I can see them on the firebase functions and hosting tabs. But when I then try to visit my firebase project url, I get a Server Error in the browser window (see screenshot below) and GET https://my-application-3356a.web.app/ 500 in the dev console. When I check the functions logs, many things have happened which look like errors, but I can't expand any of them to see details.

Here's the function logs from a single page request:

12:52:26.252 PM nuxtssr
Function execution took 86 ms, finished with status code: 500

12:52:26.250 PM nuxtssr
at Object.<anonymous> (server.js:121:10)

12:52:26.250 PM nuxtssr
at server.js:118:18

12:52:26.250 PM nuxtssr
at __webpack_require__ (webpack/bootstrap:25:0)

12:52:26.250 PM nuxtssr
at Object.<anonymous> (server.js:4627:18)

12:52:26.250 PM nuxtssr
at __webpack_require__ (webpack/bootstrap:25:0)

12:52:26.250 PM nuxtssr
at Module.<anonymous> (server.js:10282:23)

12:52:26.250 PM nuxtssr
at __webpack_require__ (webpack/bootstrap:25:0)

12:52:26.250 PM nuxtssr
at Object.<anonymous> (webpack:/external "axios":1:0)

12:52:26.250 PM nuxtssr
at node_modules/vue-server-renderer/build.prod.js:1:77685

12:52:26.250 PM nuxtssr
ERROR Cannot find module 'axios' from '/workspace'

12:52:26.250 PM nuxtssr
at Function.resolveSync [as sync] (node_modules/resolve/lib/sync.js:90:15)

12:52:26.166 PM nuxtssr
Function execution started

12:52:25.687 PM nuxtssr
Function execution took 1996 ms, finished with status code: 500

12:52:25.673 PM nuxtssr
at Object.<anonymous> (server.js:121:10)

12:52:25.673 PM nuxtssr
at server.js:118:18

12:52:25.673 PM nuxtssr
at __webpack_require__ (webpack/bootstrap:25:0)

12:52:25.673 PM nuxtssr
at Object.<anonymous> (server.js:4627:18)

12:52:25.673 PM nuxtssr
at __webpack_require__ (webpack/bootstrap:25:0)

12:52:25.673 PM nuxtssr
at Module.<anonymous> (server.js:10282:23)

12:52:25.673 PM nuxtssr
at __webpack_require__ (webpack/bootstrap:25:0)

12:52:25.673 PM nuxtssr
at Object.<anonymous> (webpack:/external "axios":1:0)

12:52:25.673 PM nuxtssr
  at node_modules/vue-server-renderer/build.prod.js:1:77685 

12:52:25.673 PM nuxtssr
  at Function.resolveSync [as sync] (node_modules/resolve/lib/sync.js:90:15) 

12:52:25.673 PM nuxtssr
 ERROR  Cannot find module 'axios' from '/workspace' 

12:52:23.692 PM nuxtssr
Function execution started

I'm taking another break now, but when I get back to it, I'm gonna start working through what I can see in the logs and try to make more progress. But again, if anyone else finds, or know of a quicker/easier solution, please reply to this comment.

I finally have it deployed and working (as best as I think I can get it to work). The last problem was that I had @nuxtjs/axios in my package.json but not in functions/package.json - once I added that, it deployed and has been working fine.

But now that all is said and done and it's working, everytime I request a page from hosting, it does like 10+ function invocations on firebase, and I don't know why. But I suppose that's beyond the scope of this article, so this is where I'll be calling it a day. I hope my overly long comment can help someone in the future.

guillepaivag • Mar 29 '21 • Edited

Siiiiiiiiiiiiiiiiiiiiiiiiuuuuuuuuuuuuuuuuuuuuuu, tenia el mismo problemaaa, gracias en serio Selemene!!! (vean el anime de dota xd)

guillepaivag • Mar 29 '21

Gracias en serio!

Nadine M. Thêry • Nov 6 '20

Just wanted to say a big thank you for taking the time for writing this. It really saved my day.

As I encountered some issues (not related to your tutorial) just wanted to share in case it's helpful for others:

1) Lint Error when deploying the function related to the "then" clause of the promise.
Solution: turn the function code into async/await:

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

const app = express()

const config = {
  dev: false,
}

const nuxt = new Nuxt(config)

let isReady = false
async function readyPromise() {
  try {
    await nuxt.ready()
  } catch (error) {
    process.exit(1)
  }
}

async function handleRequest(req, res) {
  if (!isReady) {
    await readyPromise()
  }
  res.set('Cache-Control', 'public, max-age=1, s-maxage=1')
  await nuxt.render(req, res)
}

app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)

Error 500 when already deployed. You can try to debug this error by going to the Firebase Console, to Functions. Click in "Log" and check what the SSR function is throwing. In my case, it was not finding a specific package. I solved it by running "npm install" within the functions directory.

Bartłomiej • Mar 15 '20

First of all, thank you for this article, it's pretty awesome!

Although I am struggling with one issue for some time now and really can't figure it out.

In my nuxt app I have a server middleware with sendMessage function accessible under /api/contact route
nuxt.config.js:

...
serverMiddleware: [{ path: '/api/contact', handler: '~/api/contact' }],
...

I can't make it work with Firebase configuration. Should I move ~/api/contact to the functions directory?
Should I define it as a separate Firebase function or import somehow to the nuxtssr function?

I would appreciate any tips ;)

KiritchoukC • Mar 16 '20 • Edited

Hey Bartłomiej, thank you. I'm glad you liked it.

I had to do the exact same thing, you can check how I did it here

In short, I had to add a route to catch post method on 'api/contact' in here at the end of the file.

Tell me if you need any deeper explanations

Bartłomiej • Mar 17 '20

That clarified a lot, thank you!

One more question: after following steps from the article I can't use yarn dev anymore. It looks like my plugins are now undefined on page render and Nuxt throws Cannot read property ... of undefined error instead of rendering my page. yarn build:firebase && yarn start:firebase works fine.

Do you have any idea what may be wrong? Do I need some additional configuration in src/server/index.js to make it work again?

KiritchoukC • Mar 18 '20

Weird, i get the same error...
I'll investigate on this when i get some free time (so rare these days :D)

Hudson de Almeida Ferreira • Nov 23 '20

Did you guys manage to solve this issue? I'm having the same error.

Hudson de Almeida Ferreira • Nov 23 '20

Found the solution in the comment below... just run yarn clean before running the yarn dev.

hapo-duongdv • Dec 27 '21

Sr ,I'm having the same error. And your link github is 404. How do you solve this issue? Tks.

Sebastian Manuelli • Jan 25 '22

Found the index.js he was talking about

github.com/KiritchoukC/kiritchoukc...

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

const app = express()
app.use(express.json())

const config = {
/**

Development mode */ dev: false }

const nuxt = new Nuxt(config)

let isReady = false
const readyPromise = nuxt
.ready()
.then(() => {
isReady = true
})
.catch(() => {
process.exit(1)
})

async function handleRequest(req, res) {
if (!isReady) {
await readyPromise
}
res.set('Cache-Control', 'public, max-age=1, s-maxage=1')
await nuxt.render(req, res)
}

app.post('/api/contact', contact)
app.get('*', handleRequest)
app.use(handleRequest)
exports.nuxtssr = functions.https.onRequest(app)

andriyudatama • Apr 16 '20 • Edited

Thank you for the guide, I have succesfully deployed to Firebase

I was able to build and deploy, but if I run yarn dev it shows error

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeCreate hook: "Error: Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object"

found in

---> <VApp>
       <Src/layouts/default.vue> at src/layouts/default.vue
         <Root>

vue.runtime.esm.js?2b0e:1888 Error: Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object
    at VueComponent.beforeCreate (vuetify.js?ce5b:440)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5004)
    at new VueComponent (vue.runtime.esm.js?2b0e:5154)
    at createComponentInstanceForVnode (vue.runtime.esm.js?78e6:3283)
    at init (vue.runtime.esm.js?78e6:3114)
    at hydrate (vue.runtime.esm.js?78e6:6378)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?78e6:6493)
    at VueComponent.Vue._update (vue.runtime.esm.js?78e6:3945)

My node version is 10.20.1

andriyudatama • Apr 16 '20

UPDATE

run "yarn clean" solved the issue. If somebody experience the same thing maybe should try "yarn clean" first before bumping your head to the wall

Steve Pascoe • Apr 24 '20

I ended up doing a bunch of things like the clean script and then i was puzzled that the site half ran even though my dev server wasn't running. Ended up going to chrome dev tools > application > clear storage. Bam, all good.

legendary sage • Aug 8 '20

hello thanks for the tutorial
i tried this out i ran into some issues and i dont seem to know what is wrong
here is the error i got

quiccly@1.0.0 dev /Users/Legendary/Documents/projects/nuxt pwa/Farm_app
cross-env NODE_ENV=development nodemon src/server/index.js --watch server

sh: cross-env: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! quiccly@1.0.0 dev: cross-env NODE_ENV=development nodemon src/server/index.js --watch server
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the quiccly@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Legendary/.npm/_logs/2020-08-08T01_16_18_348Z-debug.log

so far i have installed nodemon and i dont seem to be using express for the project config from scratch

legendary sage • Aug 8 '20

i don't have cross-envs installed as well

Ted Ngeene • Apr 30 '20 • Edited

Hey, thank you so much for the guide. Really helpful. Is the configuration different for a single page application? I have followed the instructions but the app brings a server error.

it raises the following error on setting debug to true
Renderer resources are not loaded! Please check possible console errors and ensure dist (D:\work\lorenzo_dry_cleaners\functions\.nuxt\dist\server) exists.

JoshidCoates • May 15 '20

The configuration is much different for SPA, it is very simple: you run nuxt build, which will create a dist file and setup firebase to use dist instead on public and then deploy. You do not need functions.

Dave • Nov 14 '19

Thank you so much for writing this!!
I've been pulling my hair out for ages trying to get a universal nuxt app deployed with firebase.

After following your article, I have it working running the start:firebase script, however when I deploy and follow the url I get a "500 Internal Server Error" :(

Would very much appreciate any help.

P.s. the firebase function logs just say "Function execution took 9 ms, finished with status code: 500"

KiritchoukC • Nov 14 '19