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; ^
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...
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
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')".
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"//...}
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?
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?
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.
At my 30s I found out that there was a developer inside a Political Science Graduated. I've been COO an CMO for 4 years but I decided to persue my dream and become a Front-end developer:)
Location
Elche, Alicante, Spain
Education
Certificate of Higher Education for Web Applications Development & Degree in Political Science
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.
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)
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.
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
Passionate about education, fintech, Python, Javascript, progressive growth, and full-stack development. Sometimes I write code, sometimes I just write.
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.
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.
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"
I got everything to work and was thrilled. But then found that initial loading speed was horrendous ( I just made the site consist of an h1 tag ). Anyone else having issues with the load speed? Is there something I'm not taking into account?
I think it's because your website is not always running on the firebase servers. The first time you visit it, the website needs to wake up first. Then the website will stay awake for some time but will eventually go back to sleep if no one visited it.
Thanks for the article; really helped me. I'm new to web development and evaluating several technologies. Right now nuxt + firebase is on top of my list.
Did you make any comparison to e.g. ssr with next.js on firebase? Do you think nuxt.js + firebase is the way to go or is there anything you didn't like; testing, dev process, deploy process, ...?
Thank you so much, this guide really helped me a lot to deploy my project. It's working on Firebase right now but i'm having a "Error: [vuex] must call Vue.use(Vuex) before creating a store instance." error on local environment.
I tried everything i know but could'nt find a way to make it working. Just to make sure, could it be that i changed the node version from 8 to 10? Or anything else?
hello, it worked perfect, but it doesn't show me the home page, I get this message
Welcome Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!
This guide probably saved me hours of configuration hell. Thank you! I had a relative path issue with the default setup:
WARN No pages directory found in [path to project]/functions. Using the default built-in page..
Took me a while to figure out it was because I'd tweaked the render function to enable dev in the config object when it's set in the node ENV (config.dev = process.env.NODE_ENV !== 'production'). If you want to be able to run the code in dev mode for debugging purposes just add srcDir: '../src' to the config object.
Thanks for this tutorial, but I do have some questions:
How should I install Express?
Should I install cross-env?
Should I install nodemon?
Does it matter that my nuxt.config.js file starts with "export default {"?
I tried installing Express by hand (wasn't offered as option by create-nuxt-app) and installed both cross-env and nodemon and got the folders moved to "src" and made the updates to nuxt.config.js and package.json - but that's as far as I come. I have no errors at the moment, but I have no running site/page either.
Hi Thank you for a great article and code! I installed on my local machine and everything is working fine, except when I added a simple middleware to the project, that use the 'redirect' function to redirect to the 'inspire' page. Problem: When running in local environment ('yarn run dev') The root page isn't redirected properly I guess this is a problem within the server/index.js file. Can you help? Thank you Yalon
Accomplished and accountable TypeScript, PHP Developer with a consistent record of achievements in the successful end-to-end delivery of leading-edge projects and products.
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.jsinternal/modules/cjs/loader.js:796
throw err;
^
Error: Cannot find module '../nuxt.config.js'
Require stack:
my recent nuxt build doesn't have server folder for some reason
i have some problem, i could not find server folder, i have develop in normal nuxt before
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
Thank you very much , I appreciate your reply.
My nuxt installation script didn't offer the option to choose an integrated server-side framework. What did I do wrong?
same problem... managed to fix it?
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')".
Thanks, was stuck for like 2 weeks on this part...
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...
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
Disabled
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.
rm -rfand allows for a work around to therm -rfwith pattern matching in node scripts issue.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...
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.
Glad I could help!
To make it more obvious: Replace yarn with npm run, but at the end of build:firebase change run to i (install)
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/contactroutenuxt.config.js:I can't make it work with Firebase configuration. Should I move
~/api/contactto thefunctionsdirectory?Should I define it as a separate Firebase function or import somehow to the
nuxtssrfunction?I would appreciate any tips ;)
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
That clarified a lot, thank you!
One more question: after following steps from the article I can't use
yarn devanymore. It looks like my plugins are nowundefinedon page render and Nuxt throwsCannot read property ... of undefinederror instead of rendering my page.yarn build:firebase && yarn start:firebaseworks fine.Do you have any idea what may be wrong? Do I need some additional configuration in
src/server/index.jsto make it work again?Weird, i get the same error...
I'll investigate on this when i get some free time (so rare these days :D)
Did you guys manage to solve this issue? I'm having the same error.
Found the solution in the comment below... just run yarn clean before running the yarn dev.
Sr ,I'm having the same error. And your link github is 404. How do you solve this issue? Tks.
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 = {
/**
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)
Thank you so much for this guide!
Here's what I changed in the package.json for anyone on macOs:
I'm glad you liked it.
Thanks for the macOs scripts, I'll update the article.
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!
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:
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
My node version is 10.20.1
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
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.
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
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 servernpm 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
i don't have cross-envs installed as well
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.
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.
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"
Glad I could help!
That's odd. Do you have your code hosted somewhere? I could take a look
Really appreciate the response.
I started again with a blank nuxt project and built it up from there which is working so far :)
I got everything to work and was thrilled. But then found that initial loading speed was horrendous ( I just made the site consist of an h1 tag ). Anyone else having issues with the load speed? Is there something I'm not taking into account?
I think it's because your website is not always running on the firebase servers.
The first time you visit it, the website needs to wake up first. Then the website will stay awake for some time but will eventually go back to sleep if no one visited it.
Thanks for the article; really helped me. I'm new to web development and evaluating several technologies. Right now nuxt + firebase is on top of my list.
Did you make any comparison to e.g. ssr with next.js on firebase?
Do you think nuxt.js + firebase is the way to go or is there anything you didn't like; testing, dev process, deploy process, ...?
Hey Rob,
I'm glad the post helped.
I didn't do any kind of comparison but I guess the firebase part would be pretty much the same.
If you try with nextJs, I'd like to know how it went.
Thank you so much, this guide really helped me a lot to deploy my project. It's working on Firebase right now but i'm having a "Error: [vuex] must call Vue.use(Vuex) before creating a store instance." error on local environment.
I tried everything i know but could'nt find a way to make it working. Just to make sure, could it be that i changed the node version from 8 to 10? Or anything else?
Here is the folder structure:
thepracticaldev.s3.amazonaws.com/i...
I've had issues when trying to change node version so you could try that.
I didn't use VueX in my project. Is your code hosted somewhere so I can have a look ?
hello, it worked perfect, but it doesn't show me the home page,
I get this message
Welcome
Firebase Hosting Setup Complete
You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!
I'm also getting the same output, I did the exact same steps that the article provided.
Hello Jesus,
Is your project hosted somewhere?
This guide probably saved me hours of configuration hell. Thank you! I had a relative path issue with the default setup:
WARN No pages directory found in [path to project]/functions. Using the default built-in page..Took me a while to figure out it was because I'd tweaked the render function to enable dev in the
configobject when it's set in the node ENV (config.dev = process.env.NODE_ENV !== 'production'). If you want to be able to run the code in dev mode for debugging purposes just addsrcDir: '../src'to the config object.Thanks for this tutorial, but I do have some questions:
I tried installing Express by hand (wasn't offered as option by create-nuxt-app) and installed both cross-env and nodemon and got the folders moved to "src" and made the updates to nuxt.config.js and package.json - but that's as far as I come.
I have no errors at the moment, but I have no running site/page either.
Hi
Thank you for a great article and code!
I installed on my local machine and everything is working fine, except when I added a simple middleware to the project, that use the 'redirect' function to redirect to the 'inspire' page.
Problem: When running in local environment ('yarn run dev')
The root page isn't redirected properly
I guess this is a problem within the server/index.js file.
Can you help?
Thank you
Yalon
I managed to solve this - Thanks
there is 1 small issue with mkdir, it assumes that public folder is present.
instead it should be
mkdir -p public/_nuxtSo... everything was going really well until I deployed.
Now I'm getting a 500 server error on firebase. 😭😭😭
is there any way to enable axios proxy in firebase deployment ?
How do I deploy a vuejs app with a nodejs backend to firebase? Are the steps the same?