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:
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.
1/3/2021:
Soy desarrollador de aplicaciones web junior.
¡Me gusta mucho el mundo del desarrollo de aplicaciones web!
Actualmente estoy aprendiendo NodeJs, Firebase, CSS3 y MongoDB.
1/3/2021:
Soy desarrollador de aplicaciones web junior.
¡Me gusta mucho el mundo del desarrollo de aplicaciones web!
Actualmente estoy aprendiendo NodeJs, Firebase, CSS3 y MongoDB.
For anyone else struggling with the no
server/index.jsbeing generated on project creation, here's what I did (quite simply):server/index.jsfile, then copied the author'sindex.jsfrom the project repo - he provides a link at the bottom of the article. Remember to replace thedevandbuildscripts inpackage.json!import colors from 'vuetify/es5/util/colors'statement at the top ofnuxt.config.jsso I removed that import entirely and because of that I also had to remove the references tocolorsfrom thevuetifysection (which I'm in any case gonna replace with my own hex strings later on)export default {tomodule.exports = {at the top ofnuxt.config.jsAfter 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
importstatements in mynuxt.config.jsfile 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:firebasepart. It builds fine, but when running the start command, I get the following output:[ 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.
Cannot set property config of #<Object> which has only a getterwarning turned out to be nothing - I fixed it by updating myfirebase-toolspackage, but it didn't solve theCannot GET /problem.npm i).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 ranyarn deployit eventually threw anunknown 403 http error(paraphrasing), so I split thedeploy scriptin two: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/ 500in 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:
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/axiosin mypackage.jsonbut not infunctions/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.
Siiiiiiiiiiiiiiiiiiiiiiiiuuuuuuuuuuuuuuuuuuuuuu, tenia el mismo problemaaa, gracias en serio Selemene!!! (vean el anime de dota xd)
Gracias en serio!