Is it possible to deploy a server-side rendering application with nuxt.js (universal ssr mode) and firebase backend on GitHub/Gitlab Page? Gitlab gives its example on nuxt, and I wonder if the dynamic fetching on server side still works.
These pages are static, so no server side rendering. You could check the nuxt pre-rendering options: https://nuxtjs.org/blog/going-full-static/, not sure what exactly are the limitations here though.
Related
I created a Vue.js app without using Vue CLI, so that means I did everything from scratch including setting up Webpack 4. The reason I did this was because I don't like the idea of frameworks concealing the inner workings of things so that I can't fix things myself.
As an SPA, I have got the basic demo site working with an Home and About view. But I am looking to create a multi-page app with Express. The only information on multi-page Vue.js apps seems to be linked to the pages option that only comes with Vue CLI (see here)
Is there a way to have a multi-page app for projects created without Vue CLI?
Sure, you could handle routing with Express and have the page rendered server-side.
You can use Vue official package for routing, vue-router and choose between SSR (server-side rendering) or client side.
I suggest you to check this official doc about it: https://ssr.vuejs.org/
Good evening, there is a ready spa written in a vue.cli. How can I upload it to the hosting for publishing?
I'm not sure if vue.cli would support this feature, although I have a solution that does not use vue.cli but it does belong to the vue.js universe, I'm reffering to the Nuxt.js cli.
You can simply use SPA mode using nuxt --spa. In combination with the generate feature, it gives you a powerful SPA deployment mechanism without the need to use a Node.js runtime or any special server handling.
The SPA idea is simple! When SPA mode is enabled using mode: 'spa' or --spa flag, and we run build, generation automatically starts after the build. This generation contains common meta and resource links, but not page content - this one you'll have to create on your own of course, but you won't need to worry about SEO matters on your static code.
So, for an SPA deployment, you must do the following:
Change mode in nuxt.config.js to spa.
Run npm run build.
Deploy the created dist/ folder to your static hosting like Surge, GitHub Pages or nginx.
More on:
https://nuxtjs.org/guide/#single-page-applications-spa-
https://nuxtjs.org/guide/commands#single-page-application-deployment-spa-
If nuxt.js is totally new to you, there's a nice introduction on the official website:
https://nuxtjs.org/guide
Hope it helps
I came across vuexpress, vuepress and vue-server-renderer. To me these are looking somewhere similer which I guess are not. I am not frontend developer so not able to understand exact difference and use of these three modules.
Their official sites are saying
https://github.com/vuexpress/vuexpress
vuexpress: Vue + Express.js = VueXpress / A server side rendering
engine for Express.js. Use .vue files as your express.js templates.
https://vuepress.vuejs.org/
VuePress: Vue-powered Static Site Generator
https://ssr.vuejs.org/
vue-server-renderer: server-rendered Single-Page Applications using
Node.js as the server.
vuepress and vue-server-renderer are official library from Vue.js
So what exactly are differences and use of these three modules?
The idea with Vue (from the perspective of your question) is that you create a single-page application.
vuexpress is a rendering engine you can use in an Express application if you want to use the Vue syntax to implement your Express views, i.e. you implement a dynamic website and use the Vue syntax.
vuepress is about building a single-page application in Vue that also prerenders each page (and some other goodies, such as using markdown) to improve initial page load and facilitate for search engines. It is primarily used for websites with static content, such as documentation.
The point with a Vue application is to run it on the client (in the web browser). With vue-server-renderer you can run it on the server to obtain the HTML code the web browser would render if it would run in the web browser, and send it to the web browser, so the web browser doesn't need to run your Vue application, but receives the HTML it would display instead. Why? To improve initial page load and facilitate for search engines. I imagine vuepress makes use of vue-server-renderer under the hood.
I'm studying nuxt.
I leave a question because I have a question while studying.
nuxt can ssr, but ssr is known as server side rendering.
Then, I wonder where the server is.
Because vue is built on node, is the server automatically made into node server?
And, how is SEO possible if we make it with nuxt?
I understand that it is possible if you make html with MPA. However, using nuxt makes SEO possible.
So, when you create a project with nuxt, does the client make it an MPA when it makes the first request?
where the server is?
Depends... Nuxt include a node server (nuxt), but you can during the nuxt instalation merge them with other node server frameworks
when use nuxt alone or with other server-side framework?
Depends of your needs, knowledge and project.
For example I usually use nuxt alone, more apollo graphql it give me all I need. but for Shopify apps, the admin embed login is write for Koa and super easy to use so I prefers nuxt + koa when I develop this kind of app.
what means ssr?
server side rendering, the important thing is Rendering, that means nuxt (or nuxt + extra server-side framework) read the vue (js) code in the server and rendered them in Html code, after that it send the html to the client machine.
This is the reason why SEO is possible, when a web crawler visit the site it receive a fulfilled HTML page easy to read and clasify.
Nuxt has a really extensive and easy to understand guide, I recomend you follow them. Example you can use Head for edit the Header of the page,
I understand that the intended setup is.
Seperate backend server (e.g. Sails, Laravel, ...)
plus frontend server with nuxt.js or prerendered static content generated with nuxt and statically hosted (e.g. AWS S3, now, ...)
I am wondering if it is also possible to run sails and nuxt within the same node/express instance.
Nuxt.js can be used as a middleware so i think you can. Check the docs: Using nuxt.js programmatically