How to store in server images upload by user with vue js and net core - vue.js

I'm currently working in a POS system and i'm writting the code in net core(web api) with vue as spa and mssql for my database.
I thought at first to use some storage service like aws-s3 or azure-storage ones to fetch the images from there, but I couldn't keep on going that way because there were extra costs, so I was requested to upload images to server better. So, now i'm having an issue and is that, the vue app has to be precompiled by babel when going to publish and therefore i can't changes the files in dist folder when running, so when i do it on dev stage (my machine) I see it working as good as possible, file uploads to folder ok and after compiling back, it will show the image. But, how do I accomplish this in prod stage?

Related

Problem when publishing Nuxt.js app on shared hosting

Okay, I'm trying to publish my Nuxt.js app on my web host but I've run into some issues. I do not want a static site.
After running "npm run build" locally, I transferred the files to my web host with FileZilla. Then I'm supposed to fill in the statements shown in the picture below.
And this is where my problems begin. The app does not want to start at all, and i am nor sure what to put as "Application startup file". And according to my web host, the overall problem is that there is no startup file for Nuxt applications. I am completely new to Nuxt and do not have that knowledge and therefore I now turn to you, is it the case that there is no starup file for Nuxt?
The web host also mentioned that it is more difficult to get a Nuxt application upp and running on shared hosting, is that correct? Will I not be able to get my app up and running in this place?
My web host had received this error message when they tried to start my app. Maybe there are some clues in there to find.
ERROR Request failed with status code 404 15:58:38
at createError ({{my-adress}}/14/lib/node_modules/axios/lib/core/createError.js:16:15)
at settle ({{my-adress}}/14/lib/node_modules/axios/lib/core/settle.js:17:12)
at Unzip.handleStreamEnd ({{my-adress}}/14/lib/node_modules/axios/lib/adapters/http.js:260:11)
at Unzip.emit (events.js:315:20)
at endReadableNT (internal/streams/readable.js:1327:12)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Hope someone can help!
Without some more context, I can't tell you exactly what your issue is but I suspect it is to do with how the web server on your shared hosting is configured to serve files. When you visit a route, it's not correctly finding that index.html page.
A Nuxt static application deploys with a structure where each page route has its own rendered index.html page inside a folder - if I'm not mistaken.
Your web path may look like example.com/hello but in reality it resolves as example.com/hello/index.html. Some web servers will struggle by default with this structure if not setup correctly.
Honestly, if I were you I'd deploy the project to either Vercel or Netlify.
Both have incredibly generous free tiers that will let you host your application for (if it's not making any money) for a very long time at a good scale.
They both run on automatically scaling infrastructure so you don't need to worry how much resources your site is consuming or how many users you get. It will maintain responsive and reliable without any detriment to load speed.
They'll also automatically handle building and deploying the application on your behalf. All you need to do is connect the service to a Github repository.
They also provide CDN's and other optimisations such as compression for you as well to make your site much faster.
Nuxt has a dedicated page on Netlify deployment. I recommend you give it a read:
https://nuxtjs.org/docs/2.x/deployment/netlify-deployment/
When you do npm run build (or npm run generate), your final content will be available in the /dist directory (the console should tell it to you at the end). It contains an index.html file, this is the one that serves as entry point.
Btw, before going any further double check that this is working locally:
npm run build
npm run start (URL and port will be given to you)
If it works locally, you can proceed.
.nuxt is essentially used for development purposes, caching and so on. And should not be tracked by Git, nor deployed.
I'd like to advice against using FTP for deploys (especially if not secured). Prefer a more modern way, like pushing your latest git commit and let the platform handle the hook or fetching your new code and bundling your app for you.
As recommended above, Netlify is one of the best place to easily host your Nuxt app: simple, fast and headache-free. Also, check #jordan's link about the various platform deployments, you may find yours (if it's good/well known).
I may come here a little late, but this is the way I configure the "Application startup file" when deploying a Nuxt app in shared hosting using the NodeJS Selector app (that commonly you find in CPanel)
Since basically the startup file in NodeSelector is executed as if you would run node startup_file.js, you can create an app.js at the root of the project, and add the following code:
require('#nuxt/cli').run(['start']);
This is basically the same as nuxt start, which is basically the start script in your package.json
Hope this can help others having the same issue. I leave here the same issue posted in git:
https://github.com/nuxt/nuxt.js/issues/7192

How to get around storage quota limits in a progressive web app

My question is essentially how can I get around the storage quota limits enforced on a PWA? A little background...
I am hoping to create an offline-ready line-of-business progressive web app that would ideally push about 2GB of images and video resources onto my user's phones or tablets - well beyond the current storage quota for caches and Indexed DB. What I'd like to be able to do is have my users (we all work at the same company) do a 1 time download of a zip file or directory and have the user's store that on their phone/tablet's file system in a well known directory. As the online version of the app treats these files as URL's, the fetch api would seem ideal since I could serve from online if connected or the local serviceworker managed cache if not online. But the qouta limits have me stumped. None of the files are larger than 15MB, but there's no way to know which files are needed before a user goes offline. Can I use something like an HTML input type=file tag to load files into the cache at runtime and then treat them as URL's? Of course I would remove other files to make room. But since these files wouldn't be coming from "the origin" with its secure https address (a PWA requirement I think) , but rather a local file system, I'm not sure this will work. If it is workable, would my users be forced to browse to the files manually?
If its an option, you can have a native Android service to do the caching part to avoid space constraint and then serve the data from native code to PWA using websockets/secure web sockets.
No PWA solution possible for now. File API has limitation as its sand-boxed.

Browserlink for Azure Service Fabric .NET Core App

I'm finding the iterative development cycle quite slow on service fabric as opposed to a standalone .NET Core web application. It does not look like browser link works, hell even refreshing the page doesn't update HTML. From what I can see, you need to restart the whole fabric to update HTML changes.
There has to be something I'm missing.
We have this feature in the pipeline. Will be a few months out, but is coming.
To enable quick iterations on static files and other files that do not need build time compilation, the current hack is to start debugging your app or deploy it to the cluster so it's running. Find the files in the cluster node directory (Typically C:\SfDevCluster\Data\_App\_Node_0\....) edit them there and refresh your browser. Remember to copy changes over to your source before stopping debugging or removing the app, as this will delete those files.
Make sure to set you local cluster in one-node mode, to ensure you only have the files being served from one directory.

How to store images on other server

We have a CMS application written in Ruby On Rails 3 and it is using Paperclip to handle file uploads and ImageMagick to do image manipulating. It has been working great, and we are very happy.
For a new customer we want to make a deployment: the application server is in a public network and the uploaded content + the database is stored on a secured computer in their internal environment.
We have 2 main tracks right now:
Make 2 applications from the application we have right now:
A media asset application (to be developed by us) to handle all of the uploaded files using a REST-based API. Images will represented by a GUID, and we would add functions so that the images can be scaled and cropped.
Another application to be most of the application server excluding the image scaling part and storing part. When an uploaded image is requested, it will function as an adapter to the media asset application to get all the files in the correct sizes and layouts.
Pros:
We have control over what's happening
Might be a cool application in itself
Cons:
A project that might grow and be very complex
Need to make a huge change in our current application
Need to run several Rails applications locally while developing
Make an OpenStack installation:
The other option is to make an OpenStack installation and configure Paperclip to use it. If we have understood correctly, Amazon S3 is using something similar to OpenStack and Paperclip should be possible to configure against a custom installation.
Pros:
Paperclip and our setup will not be affected that much
Cons:
Will not be simple to run a local installation
Might be difficult to setup OpenStack
Very little knowledge on the product if it would fail
Any ideas, thoughts, experiences?

Storing files locally in Node Webkit App

Folks:
I'm creating an app using Node Webkit. The purpose of this app is to display images and pdfs. The app needs to download those files from a central repository, and cache them locally. When the app runs offline, the files should still be available, and displayed.
On the face of it, this sounds like appcache is the answer - and that indeed is where I was heading when this was a pure webapp in a browser. However, now I've discovered node-webkit, and here we are.
node-webkit's GitHub wiki states:
"However, application cache is designed for browser use, for apps using node-webkit, it's less useful than the other two method, read HTML5 Application Cache if you want to use it."
But doesn't say why.
I've also researched node.js filesystem - but that seems like a whole magnitude of complexity above what I need.
Can anyone point me in a sensible direction?
Thanks.
It has to do with the nature of App Cache itself.
You specify a manifest file that lists all the static assets required for your app to run offline. You don't have any programmatic access to the cache to add and remove files via JS.
So for a node-webkit app, it'd make more sense to fetch these files and store them in the Application Support folder (Or AppData, depending on the platform). That's where the node.js part is really useful, the file IO stuff.