VueJs Deployment Problem: Chrome caches old version and not updating app - javascript

I'm having a problem with deploying my project.
It's VueJs project, a web app, build on Metronic template with Vuetify components.
When I publish, I use visual studio code with npm run build and upload the dist folder to my server.
I have a version-check problem.
Some of my clients cannot get the latest version, without hard reloading. ctrl-shift-r they are using chrome and when incognito mode is on everything is perfect. But normal mode brings a very old version of the app.
I need a solution on the code or server-side, thank you for your help

I solved my problem and I forgot to post my answer. My problem was because of the PWA package I installed and implemented in the beginning of the project.
When I try to remove PWA from my project, what I did was commenting the code blocks but not removing dependency from my packacge.json.(mistake) So, I was thinkin, *"Since I'm not calling any of the PWA functions or initialize it, it should've been removed."
yeah, not.
It was still there, caching stuff.
So I removed (uninstalled) the dependency from my packacge.json, and even after that, people who did installed PWA before and "not uninstalled properly" was still using cache! (yeah, you have to click uninstall and also check remove files option)
so I had to, manually uninstalled my PWA app from their chrome (thankfully it was only few) and problem solved.

Related

Why vue acts differently with Laravel than standalone vue app?

I don't know why Vue acts differently with Laravel than standalone Vue app. Maybe I can't understand the environment it needs to work correctly. Here is what's happening which made me post this question.
When I install standalone Vue app, Let's say, when I install it in a completely different directory using vue init webpack vueapp, It works as it should. When I update anything in .vue file, It gets updated in the browser too which is expected behaviour in my mind or maybe it's because I am executing it in a development environment using npm run dev.
But when I use vue with laravel, I can load the modules and I can see loaded modules in the browser, but when I update something a component, It won't update in the browser! It just does not. I have to reload a page every time I update markup in the component file.
Also, when I execute npm run dev in the vue app with Laravel, It does not take over the terminal as it does in the standalone vue app. It is obvious as we can't execute vue as well as laravel in the same development environment as vue uses nodejs which uses the port 8080 and apache uses the port 80.
I don't know what I am missing but it's eating my head since last few days. I surfed almost all the tutorials available on the internet and all the available StackOverflow questions but still, I can't get it! I think it's the normal behaviour but I have less experience with vue.js as I am a newbie in vue.js.
Any help would be appreciated!
What you are saying is true and it was meant to be that way.
But you can use a library that comes withlaravel to accomplish that. first.
add .browserSync(); to your webpack.mix.js
instead of npm run dev use npm run watch. This will help you not to refresh.
and that is how you have the same effect. Hope its not much.

Meteor - Website doesn't work in the production environment

The project I am working on, works in the development environment. But when I deploy it live and navigate to the site, I only see blank screen.
I get the following errors in the console (from both development and production environment)
The same error exists in the development and production environments. The different is, I can navigate through the site pages in the development environment. But I only see a blank screen in the production environment.
I tried to update my jQuery to the latest version using the following command:
meteor npm install --save jquery meteor-node-stubs
But I still get the same error.
What am I doing wrong here?
This issue cost me some time to work out. Basically you need to find a sweet spot for jquery.
Meteor loads jquery by default, and in .meteor/packages I have jquery#1.11.10, which is probably what Meteor puts in for you.
You will also need to load a version somewhere in between that works. For me this command did the trick:
meteor npm install jquery#2.2.4
Cheers

Custom script in electorn builder?

I'm working on an Electron application and am using electron-builder to generate a windows installer and dmg for mac.
Everything works great, I was able to set up auto update and use other features of electron-builder.
Now I need to include other files that are not part of my electron project and execute them in order to install them during the installation process (on windows).
From the electron builder docs (https://github.com/electron-userland/electron-builder/wiki/Options#NsisOptions) I found out that a custom script can be used (NSIS, which I'll have to learn). I've tried including a test script but nothing seems to happen, has anyone here tried this?
The docs don't seem detailed enough in that regard so it's been very confusing.
Thanks a lot in advance!
So after looking at different places I found out that setting win.target to nsis and perMachine to true will generate the NSIS installer.
It does work, but then sadly there are no auto updates.

How do I find out what packages I had installed in my previouse meteor app?

I recently upgraded to the latest version of meteor. The currently installed meteor version is Meteor 1.4.1.
In trying to continue developing my app (from the previous version) in the upgraded meteor environment, I figured I would create a new app (meteor create newApp) then copy (the code from the original app) and paste (the code into the newly created files) then run it.
I quickly released that I have to re-install the packages that my original app was depending on or else I get error messages.
The issue here is I don't remember the packages my original app is dependent on. I still have the original app folder, which I created in the previous meteor version. Is there a way to extract the list of packages from the original app?
Alternatively is there a way I can merely continue developing and running the original app without having to create a new app and copy and pasting the code? If so how do I do this?
Any help is greatly appreciated
In the app root go to ./meteor directory. In that folder open packages files. All your installed packages names will be there.
Alternatively, you can use meteor list command in the app directory.
Answer to the second part, yes you can continue developing the same app. The packages will be upgraded accordingly. You may face some issues with bcrypt if you are using accounts-passwords package but there are workaround to get over that.

How can I get a Cordova project template working in Visual Studio 2015?

I want to try my hand at a Cordova based mobile app. In Visual Studio's project templates, under Other Languages->JavaScript, there was an option to install the Cordova templates. I ran that, and after a lengthy install, the JavaScript template folder is gone, and there is a new TypeScript project template node, with one Blank App (Apache Cordova) template.
When I chose that template, I get an error message that says:
The template specified cannot be found. Please check that the full
path is correct
This is giving me the probably wrong impression that in VS2015, support for mobile development has only been given lip service, and there is probably a vast amount of DIY work required to get anything done.
What could be wrong that VS is telling me a template that it just installed is missing? I have a default setup of VS2015 with all default folder settings etc.
I had the same issue after installing update 2 of Cordova. I didn't want to do a 7gb update so I unchecked the Windows 10 related cross platform components as I was only interested in the Cordova update.
To fix the issue I installed all the options back into Visual Studio 2015.
I then received a new error when opening a Cordova Project. I looked in the ActivityLog of Visual Studio "SetSite failed for package [ApacheCordovaToolsPackage]"
To fix this issue I delete the ComponentModelCache of VisualStudio
"C:\Users[your user account]\AppData\Local\Microsoft\VisualStudio\14.0\ComponentModelCache"

Categories