Server-Side Render Vue Apps with Nuxt.js (Server-side Rendering with JavaScript Frameworks)
HTML-код
- Опубликовано: 5 окт 2024
- Server Side Rendering Vue apps with Nuxt is super awesome. It takes a bit of configuration, but after the initial setup you have an excellent SSR build pipeline. Add in Firebase Hosting's CDN and now you have a low-latency SSR Vue app!
Firebase Hosting Docs: goo.gl/TfcGv1
package.json: goo.gl/utQDL7
Nuxtjs: nuxtjs.org/
Watch more Server-side Rendering with Javascript Frameworks: goo.gl/yaYkHX
Subscribe to the Firebase Channel to never miss a Server-side Rendering episode: goo.gl/9giPHG
![Natanael Cano - Amor Eterno [Official Video]](http://i.ytimg.com/vi/EO4prCs6WpM/mqdefault.jpg)
Time to create update tutorial for this.
Good stuff, but you fly right through everything and don't explain hardly a thing. It's hard to learn when we're just being given steps instead of being told how or why.
I think so too, can anyone else explain?
it sure is hard to answer all your 0 questions here 😀
Outdated - this is for nuxt 1.x (wasted a few hours to make it work on my own for nuxt 2.x - no luck, still thanks for this vid)
Switched onto "Google App Engine" (instead of firebase hosting, it took around 10 minutes, twice less the length of the vid):
nuxtjs.org/faq/appengine-deployment
It really works like a charm - more than that - you will have a lot of control over the service and the load(aka how many requests goes to route per hour and which routes produces errors and so much more, not sure if it might work the same for firebase hosting if properly migrated)
At this point in time I don't get why anyone should bother themselves with hosting the files on firebase hosting over Google App engine(at least non static ones that must be rendered using the server)
Hope it helps someone!
Great shout, thanks I didn't realise how easy deployment using Google App Engine was!
Thank you. it is super easy :) . Is there any drawbacks on using Google App engine for hosting? My database, storage, functions everything is in firebase. Can I use Google App engine only for hosting?
Wow I didn’t even know firebase has their RUclips channel. Awesome. Thanks for nice tutorial. I didn’t really get it, but I think I got the idea.
for v-for, you can do something like this if you don't want to use a property:
Why does all this SSR gotta be so complicated? D:
At 9:39 he says "I have a little gist". He's talking about Github Gist. Just in case you've been reading the subs and wondering.
nuxt adds a whole lot of boilerplate on top of vue-server-renderer, any performance benchmarks of nuxt vs vue-server-renderer?
How to deal or to do the same way with firestore SSR.. please help how to NUXT firestore Rest API..
Super excited to build my first nuxt app, really want it to be on Firebase, even I could tell that things have changed. Does anyone have a tutorial on how to do deploy to functions and hosting nowadays
On Nuxt 2 there is two folders (client and server) publicated on "dist/", is it changes the process in anyway?
when will be a tutorial publish for nuxt 2.0 .....?
nothing has changed, copy together with the folder
@@hendrapratama9258 Copy together with what folder?
@@marcoraven
with dist folder, copy the dist folder with the server and client folders inside the dist
@@hendrapratama9258 Thanks!
On 8:35 David says: "Build without a problem". But I'm having this message on the console ERROR in ./.nuxt/client.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. What can I do?
This video was made with v6 babel. Not sure about that, if you change the version of babel it'll works fine
Great video - but can't escape the feeling that it takes planning and resources like an aircraft carrier, with the potential of a rowboat?
What do you mean? Is there a better / other way to use Nuxt with Firebase?
I understand 0% of this. But i have been using vue for years
Why shouldn't I just do npm run generate and then upload the dist folder to firebase hosting? It works for my...
did you have a response to that question? i'm wondering also why ?
Code that run on server would not run with static hosting.
then you just upload static HTML not SSR, cmiiw
I was using that approach until I couldn't generate nuxt-child components...
Finally!!!
Same thoughts! HAHA
Is this solution stiill working ?? I want to deploy a nuxt app in firebase hosting, but i dont know how to do it, im trying this video, but dont work for me. Is there a easiest way to do it?
if i use firebase to host Nuxt project, how would i get billed? There is a charge for hosting GB transferred and cloud functions outbound networking. Does this mean an SSR project will cost at least twice more expensive that static only on network egress + actual functions runtime cost?
Great! Love Vue.js & Nuxt. Thanks
David is using nuxt v1.0.0-rc11, working with node v6
Not too sold on this yet. There's a herd-like mentality to blindly follow Hipster trends, without considering the real-world benefits, relative to the cost of resources & time. It's best to ask first: what SPECIFIC USE-CASES is it best to use, or NOT to use Nuxt? Under what use-cases are the benefits, worth the effort?
I think this question should be made before. If the awnser is to use Nuxt, you watch this video
The only thing I don't really understand is the need for a src and a functions folder.
Anyone care to explain?
It would be great to have this for plain vue.js , without Nuxt. Nuxt development is pretty different from plain vue.js SPA.
Your videos are awesome ! Thanks man, thanks Google.
Where can one get all those wonderful t-shirts you guys have???? They’re probably exclusive😭😭😭😭
I want one too..........
This video is out of date
Firestore cloud hosting is not yet ready for primetime. We need better documentation, a more straight forward deploy process, and a tutorial that is up to date. For now this is the best I can find: github.com/davidroyer/nuxt2-ssr-firebase for information, but good luck. I spent 35 hours on this before moving to easier hosting solutions.
This is just awesome 🤝!! I should try this!
Got this working. Except for sub routes. if I load a sub route directly (not through main path). Produces an error.
Looks like I can't import nuxt 1.x.x on firebase functions since cloud functions are still running on node 6.
Yeah, starter-template was updated to use nuxt 1.0.0 (replacing 1.0.0-rc11) before this was even published. Looking around it seems there's also no timeline for updating google cloud functions to node 8... useless.#frameworkproblems
Try with "nuxt": "1.0.0-rc11" in package.json of functions.
You can keep nuxt at @latest in the main directory?? Only change the one in functions/ ?
Finally!!!! Waited for soo long!
can somebody please lead me to updated example or just put some light on
I'm a little confused by this tutorial, it's been incredibly useful... but i'm unsure how Firebase handles images and other assets in my NUXT static directory. Are these all routed through my Firebase function and handled by NUXT? Surely I want these served from the Firebase CDN?
I've since watched over this video again and read more on the cache control headers firebase.google.com/docs/hosting/functions#manage_cache_behavior
After trying to follow this tutorial, encountering many errors, it seems this tutorial uses: "nuxt 1.0.0-rc11" instead of "1.0.0". However, the current latest starter-template is using "1.0.0". Will firebase come with a slightly altered tutorial or blog post explaining how to do this with v "1.0.0" ?
Some other issues on firebase deploy:
⚠ functions: package.json indicates an outdated version of firebase-functions.
Please upgrade using npm install --save firebase-functions@latest in your functions directory.
⚠ functions: Please note that there will be breaking changes when you upgrade.
Go to firebase.google.com/docs/functions/beta-v1-diff to learn more.
is it possible Firebase cannot use Nuxt@latest because it uses Node v8, and Firebase cloud functions can only support Node v6?
Also for some reason the functions/nuxt/dist does not exist for me.
Where do you have the file stored that you are Fetching? Do we add our own path for that. You didn't really explain the set up our Console end. Any help would be appreciated.
I did all of that but after sucessfully deployed i get 504 Gateway Time-out. My app does not call external services and i´m on the free tier.
Any help?
is there any github repo ? i try to follow the steps but i got some issues
hey yoan, what kind of issues ?
you can check this repo out github.com/davidroyer/nuxt-ssr-firebase. I believe this guy created his project based on this tutorial with some cool improvements
i have an error :* help please . "Unknown plugin "transform-runtime" specified in "base" at 0, attempted"
I just spend a whole day trying to configure nuxt 2 + firebase deployment and im on the edge ;(
i tried all the ready templates from github and nothing is working....
does anyone have any tips?
Look at this post, medium.com/likecoin/quick-nuxt-js-ssr-prototyping-with-firebase-cloud-functions-5277553610a8, I'm inspired to make my template, github.com/strujillodv/nuxt2-ssr-firebase-hosting
Hi, I'm getting an error: ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "F:\\NUXT\
uxt-ssr\\functions\
uxt" It occurs when I try to build after creating the package.json in /functions folder. Any hint????
Does firebase hosting work with Universal mode or just static/SPA?
Have you found an answer on your question?
@@oleksii-bryl Yep. You have to host as a function for SSR, spa or static can be hosted directly.
Using linters instead of comment them out can save teams.
@10:00 missing written command: yarn or npm i in functions directory
Can anyone help me? I got to 15:00 and instead of seeing the output like he's seeing on localhost:5004, I'm seeing just a { } on my browser window. I posted my github link of the work if someone wants to recreate it. github.com/spencerbug/nuxt-ssr-test/tree/master/functions
Did anyone else get that?
My project too... i put a console.log(e) in the catch and i saw this error:
Error: inject('content', value) has no value provided
> at inject (functions/nuxt/index.js:150:0)
> at plugin_server (functions/nuxt/content/plugin.server.js:9:0)
> at createApp (functions/nuxt/index.js:222:0)
> at processTicksAndRejections (internal/process/task_queues.js:97:5)
> at async module.exports.__webpack_exports__.default (functions/nuxt/server.js:81:0)
I have no idea how solve it.
Hmm?!, why I googled and only found hosting on Firebase Functions not Hosting?
To have SSR you need to use cloud functions.
Hi, I would like to ask questions regarding the process where can I?
Чертовы гении :)) Спасибо
Hi guys - followed your tutorial to the line and deployed on Firebase but basic routing of additional .vue pages is not working - they all route back to index.vue. Can you help?
I had the same issue. Found this example, and it solved it for me: github.com/davidroyer/nuxt-ssr-firebase/blob/master/prod/server/index.js#L15-L24
It really is a really good video to me.
Very, very, very nice man !!
Wow Nuxt! Vue rules!
Quick question. @nuxt/vuetify is installed as a devdependency in the src package.json by default when running npx create-nuxt-app. Because it's a devdependency I didn't think I would need to list it as a dependency in my express server app that gets deployed to firebase. However, after deploying I get an error that says vuetify is not setup properly. The styling appears to be working but triggering click events seems to not be working. Obviously this will vary from project to project but what dependencies exactly do you need to include for the express server?
I also kind of feel like @nuxt/vuetify shouldn't be a devdependency. I figured maybe it was because thats where it gets placed when you use npx create-nuxt-app and I just assumed everything it needed would be exported into the builds css files.
so after the final run build and copy function/nuxt/dist to /public directory then we can delete /dist from function/nuxt?
I think firebase function still uses it for render request
Ran into a problem with this when the babel configuration was added to the nuxt config. The solution was to put the config into .babelrc.
How to do this?
David is great...
package.json link is broken
Did anyone actually get this to work? I always keep getting a 504 timeout error after my function is triggered. : stackoverflow.com/questions/52347444/nuxt-ssr-firebase-functions-returns-504-timeout
i really luv it!
What is your terminal ?
Looks like VS Code with Zsh setup locally with a theme and configuration via .zshrc It pulls the styles, shortcuts, and all into the terminal in Code. In his case Bash I guess, but that's how I have mine setup.
Could someone get a working copy of his code and upload it on github or something? I tried typing exactly the same as him but it doesn't work for me.
functions/package.json
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase serve --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"dependencies": {
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"clone": "^1.0.4",
"debug": "^3.1.0",
"es6-promise": "^4.2.4",
"express": "^4.16.3",
"firebase-admin": "~5.12.0",
"firebase-functions": "^1.0.1",
"lodash": "^4.17.5",
"nuxt": "1.0.0-rc11",
"vue": "^2.5.16",
"vue-meta": "^1.5.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"private": true
}
check nuxt version
Thanks 😀
Yes!
Amazing
Please update video
Got 3/4 of the way in and realized he's using firebase... bleh NUXT i mean.. NEXT
Gracias!!!
Too bad it doesn't work with the latest version of Nuxt.
It's working for me with v1.2.1. I needed to run `yarn generate` instead of `yarn build` though.
Rob McCormack yarn generate isn't the same
Ah! eek! Total lapse on my behalf. I'm assuming this is because cloud functions are still on Node 6, huh?
Rob McCormack yes
Yeah, what's funny is that the starter-template was updated to nuxt 1.0.0 before this was even published.
A much better idea is this: don't.
Just deploy on the google app engine as per the nuxt docs and you barely have to do any setup, but your billing is still lumped in with firebase. nuxtjs.org/faq/appengine-deployment
This video needs an update.
thx
This is way too delicate for real life development. Or I'm just too brutish, maybe.
Why is it too delicate? I would appreciate your elaboration!
Because it broke on me frequently. Switched to SPA, all fine.
Christian Behrends SPA?
Single Page Application. You can run Nuxt as SSR or SPA, which is *without* Server Side Rendering.
It would be nice to have the full source code here github.com/firebase/functions-samples
i need github files
Here's GitHub github.com/davideast/nuxt-firebase/
this is pretty outdated :/
Seem like it is outdate!
:) i hate that. Point for Heroku...
Nice. Not soo simple.
was time about
6:25
maybe you can use this for the latest nuxt github.com/HendraPB/nuxt2-ssr-firebase