Is there a difference between nuxt start + nuxt preview?
And is it correct to start a server with an ssr nuxt app in production mode with:
npm run build (nuxt build)
npm run start (nuxt start) ?
For me, the docs are a little bit confusing, https://v3.nuxtjs.org/api/commands/preview/
"The preview command starts a server to preview your Nuxt application after running the build command."
There are mainly 4 things:
nuxt dev, purely for development purposes
nuxt build for SSR or nuxt generate for SSG
nuxt preview to get a preview locally of what would the final bundle look like
nuxt start what should be running on the actual production server
At the end, Nuxt's team made this simple for us by detecting the platform you're pushing your code too. But at the end, you could have nuxt ship or nuxt yoloooo doing the exact same thing, it all depends of your own preferences.
Most of the defaults are adapting or overriding some possible mistakes by analyzing what are your project's settings and reacting accordingly.
Depending on where you deploy your app, you can get various behaviors as explained in the doc: https://v3.nuxtjs.org/getting-started/deployment
If you want to deploy your app on Heroku (SSR), your nuxt start command will look something like this
"scripts": {
"build": "nuxt build",
"start": "node .output/server/index.mjs"
}
as shown here: https://nitro.unjs.io/deploy/providers/heroku
If you're publishing your code to some SSG platform, it will usually use a "lighter Nginx/Apache server" for free and do basically the same as serve for your static assets (with nuxt start).
The only thing NOT to do is to ship a nuxt dev on production.
Related
if you set ssr: false in nuxt.config.js file, does this make nuxt work exactly same as plain Vue application?
if so, doing npm run build, npm run start will just serve static html/css/js file with node.js server?
Am I right here?
Yeah, that will make Nuxt behave like Vue for the rendering part.
Be sure to have generate for an SSG target and not build (for SSR).
Here are more details of the benefits of still using Nuxt: https://stackoverflow.com/a/74714106/8816585
If you're doing npm run build, it's supposing that you're using your Nuxt app as SSR. Which means pretty much nothing since you don't want SSR (false).
It's like saying
I want a tomato sandwich, but without the tomato.
In the current situation, Nuxt3 will probably give you a sandwich but without tomatoes aka SPA-only Nuxt3 generated as SSG. Totally hostable as any other regular SPA app, on Netlify.
Official source: https://nuxt.com/docs/getting-started/deployment#client-side-only-rendering
Also, what Nuxt is doing during local development and on production are 2 different things.
You will always have a Node.js server running for dev, but that is not the case once deployed (SSG, SPA, etc...).
If you want a Nuxt3 SSR'ed app, use build + ssr: true.
From the nuxt3 document
ssr - Disables server-side rendering for sections of your app and make them SPA-only with ssr: false
What I understand from the doc
When SSR is false and use npm run build
If you make ssr: false and build the project not generate, then It will work like a simple vue spa application. Like a traditional spa application, it will load the whole js in the initial load and then render in the client site.
When SSR is false and use npm run generate
Again if you make ssr: false and generate the project not build, Then it will prerender all the pages and generate the static file. And it will work like a traditional static website. But you have to be careful that as SSR is false it will not prefetch any data it needs in the generated time. So It's best to generate pages with SSR mode on.
I am trying to build my app in development mode and am running this script:
ionic capacitor run ios
But every time it says building in production mode? Am I missing something? Shouldn't it only build production if I use the --prod flag?
I found that I need to use:
ionic capacitor run ios -- --mode development
https://cli.vuejs.org/guide/cli-service.html
vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching. The chunk manifest is inlined into the HTML.
Check your angular.json configuration file and ensure that configurations is set for dev environments.
I have a Nuxt 2 app. I'm following the docs to add Capacitor and Android Support.
Everything is fine up to the point of running npx cap add android. The android folder is generated however there are errors in the terminal
√ Adding native android project in android in 342.51ms
√ Syncing Gradle in 944.40μp
√ add in 345.44ms
× copy android - failed!
[error] The web assets directory (.\.nuxt) must contain an index.html file.
It will be the entry point for the web portion of the Capacitor app.
√ Updating Android plugins in 33.68ms
× update android - failed!
[error] Error: ENOENT: no such file or directory, open
'<sourceroot>\android\app\src\main\assets\capacitor.plugins.json'
I’m not running Nuxt in static mode (due to routes and content pulled in dynamically from a CMS). So I run nuxt build which generates the output into a folder named .nuxt by default.
However nuxt build doesn’t create an index.html as an entry point, the nuxt build actually states Entrypoint app = server.js server.js.map. Hence the error above where it can’t find index.html in the .nuxt directory.
Does anyone know a way to resolve this? Or have implemented Capacitor with a Nuxt SPA?
I’ve found resources when using nuxt generate for a static app but not nuxt build for a spa like in my case.
I have a Nuxt2 web app with servers (app server and separate API server), also deployed as an Android app on the Play Store (in alpha testing). Both app flavours look and behave identical and use the same API server, as I desire.
IMHO, in the lifetime of your (universal) app, BOTH build and generate will get leveraged:
build, likely by whatever web app host you use (ie AWS, Heroku, etc), during deployment of the web app.
generate by yourself, when you're ready to submit to the app stores (Apple, Google, etc), making use of Capacitor.
Let's say you have a new feature to add to the app. On that day, you make git commits and increment your version number and when you're ready to deploy the update...
For the web app...
Make commit(s) and version number change
Deploy to your app host, which for most people, will also run the build step for you
The only time I ever run build locally is when I need to make final tests, troubleshoot bugs or make optimizations (e.g. lower final package size).
For the Android or iOS apps...
Make commit(s) and version number change
nuxt generate
Run Capacitor sync (however which way you do it (for me I use: npx cap sync)
Prepare the app store build & submit (however which way you do it)
What nuxt generate does for you, and what Capacitor needs, is a fully rendered snapshot of all your app views together, all at once. It's the equivalent of a web app user opening all your app's views all at once (e.g. 50 browser tabs), pulling all components/styles/etc into their local browser. This fully rendered app state ultimately gets bundled and is what will get submitted to the app store(s).
In Nuxt docs and terminal output, they seem to strongly suggest that if you're using nuxt generate, that you want to be using target: static, however I will say you should completely ignore this advice. Static is what you'd consider if you had a "brochureware" website or some recipe book app that you update once-in-awhile. It goes as far as in the terminal output of nuxt generate, even if I have target: server defined, you'll still see a line saying something along the lines of "Outputting for target static...". Just ignore it.
There is hardly anything static about a typical universal web app.
I personally use target: server with nuxt generate and I haven't seen any problems in the app (web or Android version).
I build my VueJS app with vue-cli-service build --mode production, and my chunk-vendors.js weighs 3.2M.
So I decided to investigate why it's so heavy, using vue ui.
Then, I simply click on Build, and I see that chunk-vendors.js is now 1.0M !
Why is there a such difference between these two build?
Here the screenshots:
Thank you for you help!
vue ui's build command is this:
vue-cli-service build --mode production --target app --no-module --dashboard
Notice the --no-module flag, which turns off modern browser builds, which is enabled by default as of Vue CLI 5.0.0. Therefore, the command you're using (i.e., without --no-module) creates a modern build, which includes transpiled code and polyfilled bundles for legacy browsers in addition to slimmer code for modern browsers that don't require the polyfills. On the other hand, vue ui only builds the latter.
What is the difference between
nuxt build
vs
nuxt generate
vs
nuxt build --spa
I am trying to compile three different variations:
1. regular nuxt with ssr
2. prerendered spa
3. spa without prerendering
I am struggling to find the appropriate commands for it
As shown in the docs, the above commands correspond to:
nuxt build: Build your application with webpack and minify the JS & CSS (for production).
nuxt generate: Build the application and generate every route as a HTML file (used for static hosting).
The --spa flag doesn't seem to be covered in the docs themselves, however the generator help outlines, without further explanation:
Options
--spa Launch in SPA mode
Given this information, it would seem the following commands should cover your needs, however I haven't tested them myself at the moment:
Regular Nuxt with SSR: nuxt build
Prerendered SPA: nuxt generate
SPA without prerendering: nuxt build --spa
Take all of this with a grain of salt, however, as the Nuxt team is notorious for having out-of-date documentation.