How to generate txt & xml files in nuxt SSR? - vue.js

Is there any way of generating a Google : ads.txt file every time i build my SSR project?
There is a module called: sitemap-module from nuxt-community, it is used to generate a sitemap xml file, and that file can be accessed by http://domain.tls/sitemap.xml. and i want something like that.
So currently i'am achieving this by building the project, then manually put ads.txt it in : /var/www/site/.nuxt/dist/client/,
The problem with this is that everytime i rebuild the project i loose /var/www/site/.nuxt/dist/client/ folder then i have to add ads.txt file again.
I would like to know how i can hook up my code to tell nuxt to generate ads.txt file and put it in /var/www/site/.nuxt/dist/client/
Not sure if it makes sense, but i hope someone will understand.

Place your ads.txt file in a directory named static as mentioned here. All the contents of the static directory can be accessed via example.com/{filename.extension}
If you are not using nuxt.js and just using vue js, place it in a public directory right next to src directory.

Haven't found any way of solving this in nuxt, so i decided to redirect all https://domain.tld/ads.txt in Nginx configuration.
/etc/nginx/sites-available/default.conf
#redirect all txt request
location ~* ^.+.(txt)$ {
root /var/www/other.files/;
}
So i think i'll stick to it.

Related

Where to install 3rd party scripts in Nuxt?

Im trying to upload static files(images and js) from "static" folder. And it works fine for index file and base route localhost:8000/, but if I go to the next route localhost:8000/reviews/master001 then static files disappears and I receive by route localhost:8000/reviews/js. And there is two things, first is how to remove prefix "reviews"?
I tried to use in nuxt.config.js
static: {
prefix: false
}
by documentation, but it does not work. Tried to use paths in nuxt.config like "../js", "#/static/js", "/js" - this one works for index file.
Also there are no any static files after I go through the router-link such it in nuxt documentation for path localhost:8000/reviews/master001.
Here there are.
And here there no any files.
As explained in the comments above, images should be in assets and static is only aimed for specific use cases, like exposing a publicly accessible .pdf file.
If you want to install and use jQuery properly into your Nuxt project, you can follow my answer here: https://stackoverflow.com/a/68414170/8816585
If you want to load a specific script and cannot do it in a more cleaner way (with NPM), you can also follow the instructions there: https://stackoverflow.com/a/67535277/8816585
Use this as a last resort tho and be aware that it will increase bundle size and loading time.

Images uploaded in Vue.js production mode not showing

I am a bit new to Vue.js. I am doing a social media application that allows users to upload and share images with others. I store my images in src/assets folder during development. However, when I build the project, all images are put in the dist folder. Therefore, what can I do to enable users to still upload images on production? Do I create the assets directory in the dist folder?
I have since tried different ways, including storing images on the backend. In dooing this, I reference the backend path relatively, using, for example, ../../../backend/public/assets..., and it works on development. However, when I build, the images that existed in the backend directory at the time of building are visible, however, whenever I try uploading more on production to the ../../../backend/public/assets... directory, they are uploaded successfully but are not visible (that is on production). I get an error that Cannot find module './image_name.image_extension'.
What am I doing wrong?
I have seen similar questions like this but there was no answer.
You must set your public path and change your way!!
first step to do is creating vue.config.js in your root directory, if you want to know more details, read this: https://cli.vuejs.org/config/
for example, I define prefix path for my files:
module.exports = {
publicPath:
process.env.NODE_ENV === "production" ? "/" : "/",
};
remember, It's better if you use "#" to define your paths.
for example, if you want to load a image which located in src/assets/files/img/myImage.png, you can use #/assets/files/img/myImage.png in template section for binding or script section of your .vue files!
It always help you to find correct path of your files.
and finally your way is not standard because "src/assets/..." will used for compiled scripts and styles and also your files which you want to use on your UI layout like static images. so you have to use "public/assets/..." directory to save your file, then you will see everything is going well for you.
if you have a more question or stuck solving this problem again, I'm here to fix your issues.

Vue Nuxt.js - deploy in subfolder

I have a Nuxt.js project and I generate a static app. I need to put it in a subdirectory on ftp, but I can't make it work.
I've set router.base to /subfolder and that works fine for _nuxt, but static files are still using absolute path /img/...
So I've tried to put my static files into assets/img/, but they are not getting loaded from scss when I use ~assets/img/...
I've read many topics, but couldn't find the solution.
Any ideas?
Thank you
I had trouble finding solutions in the documentation as well, but I found out you can use the static folder on a subdomain if the links are changed from:
/image.jpg
to:
~/static/image.jpg
Also if it helps, I believe changing:
~assets/image.jpg
to
~/assets/image.jpg
Might solve your issue?

Combine all my custom JS into one single file with dojo build

I'm having a hard time trying to set up dojo build in my project.
Basically, I have my js folder with all my custom widgets and components. I simply want to combine all javascript files form js folder into one single file.
dojo sources are located outside this folder. The structure looks similar to this:
/public
/prod
/dojo-1.9
/dijit
/dojo
/dojox
/js
myScript1.js
myScript2.js
Do you have any idea on how should I configure the package.json and profile.js? The documentation doesn't seem to help since all I am getting is an output folder with the same contents as the js folder (no javascript is merged).
You can start by reading this article:
https://dojotoolkit.org/reference-guide/1.10/build/simpleExample.html
It provides a simplified overview of dojo build system.
Additional there is dojo boilerplate with a sample of folder structure and profile.js configuration for quick start here:
https://github.com/csnover/dojo-boilerplate
I definitely suggest you to use the boilerplate as start for your project as it simplify a lot initial configurations.

Laravel wrong public path file upload

I've deployed laravel with this guide.
http://juniorgrossi.com/deploying-laravel-applications-on-a-shared-host/
On my webserver I have a public_html file now containing all my publicly accesable files and a laravel folder containing the rest, so I've split up the default laravel structure for deployment.
On my development server by default the public folder is resting inside the laravel folder instead of being on the same directory level.
The problem I'm getting though is when I use something like this:
// Upload the file
Input::upload('image', 'public/uploads', $filename);
Same with this.
// Upload the file
Input::upload('image', path('public') . 'uploads', $filename);
Instead of trying to use the uploads folder that is inside my public_html folder it tries looking for a public file inside my laravel folder now.
And I get a
Unable to create the "/uploads" directory
Ofcourse on my development server the public folder is still inside the folder so it's logical.
How do I fix this?
You may try this (add a slash after the folder name)
Input::upload('image', path('public') . 'uploads/', $filename);
Maybe try this....just as a test
Input::upload('image', URL::to_asset('uploads/'), $filename);
You can also try
Intervention/image package.
I'm using this and I find it very easy to use. It also has a resize and crop feature.
It's easy as:
Image::make(Input::file('file')->getRealPath())->save('uploads/' . $filename);
Fixed the paths.php to ../public_html
I've done this before but it failed since I accidentaly uploaded a png and my jcrop function wich crops and saves images failed because it currently onlt takes jpg. So that left me thinking my paths.php settings were no good while they actually were.
Thanks for helping out though everybody!
(I feel like a fool.)
In my case, I got the same problem. Then I created it manually, CHMODed the lil' bastard and it worked fine!
Making a long history short (not so long...): just permission!
If you have the permission to Write/Read to the folder, you'll be cool! If you don't, you change the permissions! If you are unable to change it, put the uploaded files where the permissions allows you to access the file.