I am working on a small nuxt website for a client, i havnt been using nuxt for very long but so far what i do is add target: "static" to the config when i'm ready to build for production, then send the dist folder to backend for deployment, but now i notice that after i run npm run generate images and others assets like js files do not get added to he page.. i have tried to create a new dummy project just to test, chose static mode when setting up the project, added 1 image to the project and display it in index page using
<img src="~/path-to-file" />
the image will appear normally in dev server, will also appear if project is hosted on netlify, but will not appear in git-pages or local apache server
i am confused on why this is happening, typically adding target static fixes issues like this but not this time, please help
There are two main ways to display images through nuxt. One via the assets folder, the other via the static folder.
Any images in the /assets folder will be bundled with webpack. These images can be referenced using:
<img src="~/assets/image.png"/>
If you do not want images to be bundled by webpack, then save them in the /static folder and reference using the following format:
<img src="/image.png"/>
Currently, you are using ~/ , which is shorthand to the base directory. Once you build your site for production this will no longer work, because the structure is transformed - which is why there is a discrepancy between your environments.
Related
I need to install a custom app in a subfolder of my site, and make that publicly accessible. Like mysite.com/results, where inside the results folder will be a custom JS app responsible for displaying results of some running / cycling events.
Update
By custom JS app I mean a bunch of files that comes from the race timing software I use, so I have no control of the files there, just need to be able to make them accessible.
If I create an index.html in that folder, it works, but if I create an index.php it does not work.
I use Valet on my dev machine and my website is being deployed with Ploi deploy.
I have two separate project, laravel and nuxt;
i want to, when i upload file from the laravel, it'll be stored on static folder of the nuxt project. Is there any way for that?
For that, you'll need to send your file upload to a CI that will inject it into the Nuxt project, and rebuild the whole Nuxt app.
Also, remember that static is not bundled via Webpack.
Meaning that it will be shipped raw: if it's uploaded while not being properly optimized, it'll be shipped as is (would be better suited into an /assets directory but still >> build time for the whole project required here).
Even hosting it on your Laravel server is more worth at this point.
TLDR: it's not worth to send it to Nuxt's static directory.
I recommend hosting it on a CDN or alike.
I work on a single-page application written in Vue.js 3 and built by Vue CLI 5 (Webpack 5). The app is being served from a Laravel app which is deployed to AWS by Laravel Vapor. This tool also uploads all static assets (including JS chunks) to AWS S3 and make them available via CloudFront.
I want to load all static assets used in the Vue.js app from this CDN. The URL of the CloudFront distribution is available at build time in ASSET_URL environment variable. I have written my own asset functions in both TS and SCSS which are able to resolve asset paths properly for both local development and production environment. I use these functions whenever I write a URL of a static asset (image, font, etc.) in either .scss or .vue file and everything works fine.
But I am not able to make Vue.js app load JS chunks from CDN. When I modify publicPath option in vue.config.js, Vue Router gets broken. If I try to change output.publicPath directly in Webpack config, I get an error from Vue CLI saying that I cannot modify it directly.
So I have written a script that rewrites all URLs pointing to static assets in the generated index.blade.php file (similar to index.html in a typical Vue.js project) and initial JS chunks are loaded from CDN now. However, all lazy-loaded chunks are still being loaded from the server where Laravel app is deployed. It looks like these paths are somehow defined the generated app.f73fadef.js file.
So my question is, how can I load all static assets (including JS chunks) from CDN while serving an app from a dynamic web server? Is it even possible to do this just by changing Vue CLI or Webpack config and without any dirty "hacks" (like modifying generated JS files)?
I have finally been able to solve this. The problem was caused by the following router initialization code:
createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
Once I remove the parameter of createWebHistory function, I was able to set publicPath option in vue.config.js to my CloudFront distribution URL and everything started to work properly. I was even able to remove my own script that changed the URLs in index.blade.php since it was no longer needed.
When I add images it is stored inside google cloud platform VM correctly.
But I am not able to fetch newly added images in my website.
If I redeploy project with newly added images in assets folder it is showing correctly.
I have verified there is no mistake on frontend or backend side.
Is it not possible to get live image update with VM?
Edit:
I have used Vue.js.
I am storing images inside src/assets folder.
When I save images in my website it is saved at src/assets folder.
I think it can only access things in dist folder after build.
Can you suggest where should I save my file?
I'm making an educateg guess it's some cache issue.
Instead of putting your image files inside the VM you can try storing them in a bucket that's accessible to public. The downside is that it can serve only static files (no PHP or anything).
You have to configure your load balancer to forward all your.domain.com/images/ requests to the bucket but that's actually quite easy. Have a look at my answer asking for such configuration.
I am using sails.js to build an image service website. There are lots of images need be shown on the webpage. And the website will allow users to upload images as well. If I put it all images under assets folder, they will be copied to .tmp/public everytime when i restart the sails server . it will be very slow. Does anyone have an idea where should i put .Should I write a route rule to handle this? thanks.
/assets are for your static contents (like css, frontendjs, ...).
If you have a lots of images you should place them in one folder of your server and write a route for showing it.
Or better: Use some Cloud-Hosting like amazonS3 or imageShack.
Example for middleware:
1.) create a file "express.js" in config/
2.) Put this code into the file and change to the right path (routing + your local folder):
module.exports.express = {
customMiddleware: function(app){
app.use('/images', require('../node_modules/sails/node_modules/express').static('/User/yourfolder'));
}
}