Deploy and upgrade quasar app
-
Hi all !
I want to know what is the best way to upgrade my quasar application (SPA) in production.
When I finished my dev with “quasar dev” I use “quasar build” to pack my application in dist folder.
- Do I need to delete old dist folder before build ?
- How can be sure my users have the latest version of my app in the cache ?
Wich process do you use guys for your apps ?
I use quasar 0.13
Thanks
-
The old dist folder is automatically deleted when a new build is started.
Also, the generated webpack bundle uses cache busting techniques, like appending a hash value to the filename, so you shouldn’t have to worry too much about caching issues.So when it comes to deploying your app, there are different ways a achieve this. Because Quasar/Vue.js projects are just static files most of the time, you can just replace the old files with the new files on your server.
- You could use Github hooks to receive new commits, build them on your build server and then deploy them to your server,
- You could use a continuous integration service
- You could have a little script on your local machine, that runs the build command, and then transmits the new build files to your server via SSH
Most of the times, you do not want to build your files on your production server, because then you need to install the whole toolchain, make sure, only authorized users could use the tools, protect your source, you have additional load on your server, find a way to deploy without downtime when building.
Here is an older blog post that gives an overview over some of the solutions I mentioned above:
https://css-tricks.com/deployment/ -
Thanks @a47ae for this complete and usefull reply !!
-
Hi!
Are you shure about point 2, browser cache is taked into account, so user can see changes just pressing F5 (not ctrl+F5)? -
Avoid to ask your users to refresh manually by F5 or CTRL+F5 …
See webpack longterm caching, you just have one or two lines to change in webpack config and all is good
-
I can give you an example, but sorry I’m not on my computer, it’s a screenshot from my phone…
Look at chunk and chunkFilename.
Webpack will add hash code in the name of all your packed files. The hash code correspond to the file content, so if you change something in your sources, the hash will change also and the browser will reload automagically
*As you can see it will add hash only for prod (quasar build)
-
Thank you!
I never used webpack but it worked without ctrl+F5, but is F5 or other reload method avoidable?
Also index.html needs a <meta> or something to turn off browser cache, isn’t it? -
@mzamateo Why do you want to avoid the reload?
Just for development or in production? -
In production, i think must reload.
Now i see damosse31 said “avoid ask user press F5…”, shure, you can ask kindly to finish current work and then reload, with a popup or so…
Thank you! -
@mzamateo said in Deploy and upgrade quasar app:
you can ask kindly to finish current work and then reload, with a popup or so…Exactly !
On my side, I put app version in localstorage (or cookie) and I check if the current version is different (ex: 9.0.10 -> 9.0.11) then I open dialog to inform the user that a new version is available since his last visit and if he want to see the changelog or not.
