The Nuxt documentation (latest) states that for SPA you need to set ssr: false in nuxt.config.js. Also, every vue file in the pages folder is added to the router configuration, so you don't have to do this yourself. This is both correct and works perfectly, but there is something I really don't understand.
When I run npm run build (nuxt-ts build), it builds the production output of the project and puts in the dist folder (default). I was surprised to see that even though I configured it to be a SPA, it still generates HTML files for each vue file in the pages folder.
It happens with newly generated projects using npx nuxt-create-app as well.
What I'd expect is that it only generates one HTML file (which is index) when ssr is set to false and when I want a static app, I would use npm run generate or set target to 'static' to create HTML files per route.
Nuxt documentation also states this for the target property:
https://nuxtjs.org/docs/2.x/get-started/commands#target-server-default-value (builds output to dist)
https://nuxtjs.org/docs/2.x/get-started/commands#target-static (generates HTML per route)
All I have in my config is ssr set to false, so it should not generate static files (HTML) per page.
What am I missing here, or am I misunderstanding how this works?
Thanks in advance!
Remember that in a static setup, your visitors may arrive at your site via any of your page routes— not just index.html.
For example, they may access https://www.your-app.com/contact-us. If you do not have a contact-us.html file available, and you don’t have a server configured to handle this request (as is the case with universal mode), you’re gonna end up with a 404.
What happens in static mode is contact-us.html is served, which contains the minimum javascript necessary to hydrate your nuxt app, then SPA mode kicks in— giving you client-side navigation.
Related
I have a website built with a Strapi/Nuxt stack.
I can make it totally static, instead of pre-rendering pages, but I still need to retrieve the images or other assets from Strapi, so I still do need a server.
During the "compilation", the Strapi API is fetched and the contents used to pre-render all the pages I want: would be possible to also download all the assets into the dist directory during the nuxt generate operation?
During the build, you can query Strapi's API and get the assets URL, nothing blocking you here.
Otherwise, you could also download the file itself and write it down into your project.
Here is one my answer that you can get some ideas from: How to access remote data and write it into a file during Nuxt build?
It's not Webpack's job to do this neither. As a pre-build tool, I guess that you can use nodejs-file-downloader and use it at the top of your nuxt.config.js file.
This one looks great and is active: https://github.com/hgouveia/node-downloader-helper
I'm publishing my SPA that I'm making with Vue and Buefy to my a gh-pages branch a of private repo, just so I can test if everything will load normally.
Later, I'll upload the finished website to the actual public repo, which is tied to my custom URL (I'm redesigning the website from scratch, using a diff tech).
Since Vue websites needs to be built for distribution, I'm using an NPM package to do this for me: https://github.com/KieferSivitz/vue-gh-pages
"deploy": "node ./node_modules/vue-gh-pages/index.js --branch gh-pages -m \"Deploy to gh-pages.\""
When deploying the website, it loads only partially. The images won't load, and the router will not work (links to other pages won't work).
I'm storing images in the assets folder, and using require('#/assets/logo.png') to load them (at least it works with localhost).
The images are trying to be loaded from https://<username>.github.io/img/logo.d2151712.png.
I read that I would need to set the publicPath to my project name, since currently the website is being served from https://<userName>.github.io/<projectName>/, but with that, the whole website is 404-ing.
With that property, the whole website would try to load from https://<username>.github.io/<projectName>/<projectName>.
I think that somewhere, there's a setting adding <projectName> to router, but not adding elsewhere.
Edit
I tried to force vue-router to get the correct base, without setting the publicPath:
base: "<projectName>/", //process.env.BASE_URL,
But the routes are stil not working, since I'm lazy loading them using import("#/views/Page.vue").
It seems that your issue is, that you want to run your Vue app in a subfolder of a domain (domain.com/subfolder/index.html). This needs to be configured in Vue CLI. Add a new file to the root of your repository, called vue.config.js and add the following content:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/subfolder/' : '/',
};
This will set the webpack publicPath to /subfolder/ when running the build process in production mode. If you are using Vue CLI < 3.3, you need to use baseUrl instead. You need to make sure, that your path starts with a slash.
See also the documentation of publicPath.
Vue CLI has also a special section for the deployment to GitHub pages. You might also want to take a look at this: https://cli.vuejs.org/guide/deployment.html#github-pages
I read that I would need to set the publicPath to my project name, since currently the website is being served from https://.github.io//, but with that, the whole website is 404-ing.
Indeed, the publicPath property is required to be set to the GitHub repo name, surrounded by slashes (i.e., /github_repo_name/). The 404's are caused by vue-gh-pages removing the leading slash from URLs in index.html:
<!-- <script src=/github-pages-vue-demo/js/chunk-vendors.c4b075fb.js></script> --> <!-- before -->
<!-- <script src=/github-pages-vue-demo/js/app.9b45ea45.js></script> --> <!-- before -->
<script src=github-pages-vue-demo/js/chunk-vendors.c4b075fb.js></script>
<script src=github-pages-vue-demo/js/app.9b45ea45.js></script>
With that property, the whole website would try to load from https://<username>.github.io/<projectName>/<projectName>.
That's a side effect of the slash-removal, making the URLs relative. Relative URLs are relative to the current location (appended to the current directory). For example, with this GitHub pages URL - https://tony19-sandbox.github.io/github-pages-vue-demo/, a relative URL of github-pages-vue-demo/js/app.9b45ea45.js would resolve to:
https://tony19-sandbox.github.io/github-pages-vue-demo/github-pages-vue-demo/js/app.9b45ea45.js
And an absolute URL of /github-pages-vue-demo/js/app.9b45ea45.js would resolve to:
https://tony19-sandbox.github.io/github-pages-vue-demo/js/app.9b45ea45.js
I think that somewhere, there's a setting adding <projectName> to router, but not adding elsewhere.
vue-router has a base property for that purpose, but Vue CLI (#vue/cli-plugin-router) correctly defaults it to process.env.BASE_URL. That environment variable is already equal to publicPath from your Vue CLI config, so there's no need to set it.
Workaround
If you wish to continue using vue-gh-pages, you could use patch-package to disable the slash-removal (index.js line 109) as shown below:
//editForProduction();
if (repository !== null) {
pushToGhPages();
}
GitHub demo
Otherwise, I would skip that library entirely, and use gh-pages directly in a deploy script.
Vue has a configuration for that. If you use vue client then add vue.config.js the next lines por public path property
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './':'/' };
I have a Vue CLI application that I'm currently working on that uses code splitting for JS and CSS, and builds almost 1,000 JS/CSS files on running npm run build.
I am hosting this application on Google Cloud Run, where I pay per request. While the cost is still not that significant, I was still looking to try and prevent the need for 500 requests for every page view. I had a thought, but I'm not sure it's possible...
What I was wondering was if I could have my webpack build generate the JS and CSS files into the dist folder, but reference those files in the index.html file with an external host, instead of assuming a relative path. For instance, the file would exist at dist/css/chunk-abc123.js but in index.html, it would be something like https://storage.google.../css/chunk-abc123.js.
That way, in my CI pipeline, I can upload those files from the dist directory into Google Cloud Storage, and serve them up statically from there.
Does anyone know if this is possible? If so, can you guide me in the right direction?
publicPath comes in rescue.
The base URL your application bundle will be deployed at (known as
baseUrl before Vue CLI 3.3). This is the equivalent of webpack's
output.publicPath, but Vue CLI also needs this value for other
purposes, so you should always use publicPath instead of modifying
webpack output.publicPath.
// vue.config.js
module.exports = {
...
publicPath: 'https://storage.google...'
...
}
I have developed a vue application and did run npm run build
After that I uploaded the content in the dist file to my webpage but it returned a blank page.
Since I did this for testing I uploaded it to a folder in my public_html/mypage.com/vueapplication To get all the paths right I added a vue.config.js with this content:
// vue.config.js
module.exports = {
publicPath: '/vueapplication/'
}
The application now works but I wounder however:
how do I best publish/upload the application to my site? Just by simply dragging the content inte the right folder?
how can I best maintain my site? Do I need to build again and upload, overwriting my files when everytime I make an update on my site?
And what is the difference between build and deploy your application?
Drag and dropping your code should work. But as your app grows you may want to look into automating this. For instance if you use an S3 bucket you can use the aws cli to automate the upload.
Yes, you should overwrite your deploy folder(s). You need to also take care of deploying different binary files, that have the same name. An example is if you have a global css file (main.css for instance). The file will probably change content between deployments, but keep the same name. Browsers may cache the file so users that downloaded older versions of the file will not use the new one. There are different techniques to handle this, but if you use webpack, it uses cache busting techniques and you should be fine.
Build is the process of transforming source code into an artifact(s). Exactly what this means differs from language to language, platform to platform. In the vuejs world this usually means a couple of js files, a couple of css files and some assets.
Deploying means taking the output of a build and making it available to your users. Again this differs from project to project. In the vuejs world this usually means taking the artifacts from the build and uploading them to an http enabled web server.
We're currently using vue as a script file without a build step. We want to start using webpack and vue-cli. We need to preserve the asp login pages and session handling (cookies) so we need the vue stuff and the asp stuff to share an origin.
The current plan is to ignore the vue dev server, to put src and dist inside the existing .net project folder, and to have iis serve the contents of dist. Is this the way to go? We will lose hot reloading.
If we do this, how and where do I configure the url fragment from the web root to the dist folder? Currently, vue expects dist to be the root of the domain.