Push website updates without affecting the user

Question

I'm working on my first website right now, and when I'm updating a file (uploading the newest version to the server), for example the stylesheet or a .php file, and I try to load the page halfway through it being uploaded/changed, I get a blank screen or broken CSS. Sometimes the cache has to be cleared for the correct stylesheet to load.

When pushing updates to users, how can this be prevented?

Answer 1

One way to do this is with "cache busting". Everytime you make changes to your .css or .js file you rename the file.

style_v1.0.css // Release 1.0
style_v1.1.css // Release 1.1
style_v2.0.css // Release 2.0

Or do it after the filename:

style.css?v=1.0 // Release 1.0
style.css?v=1.1 // Release 1.1
style.css?v=2.0 // Release 2.0

Answer 2

Regarding the .php file updates, the users should just receive the new responses from the updated files. In respect to the CSS, I'd suggest trying some JavaScript via jQuery.

Either way, it is good practice to not work on a live version of a website, but in a "sandbox" copy of it saved on your local machine or another folder on the server and after you've achieved the desired features, upload the files at night or when your website has minimal traffic.

Answer 3

We've all been there and done this. Although the question probably isn't a good fit for Stack Overflow, there is a chance it'll remain here and other folks will find it. With this in mind here's an example workflow I use and some tips:

General tips

• Never, ever, ever, ever work on a website live. Always take a backup and set it up locally on your machine using WAMP, MAMP, LAMP, or similar
• Set up source control. There's plenty of providers out there that will give you a free account for you to use.
• Learn about .git and branching
• Don't use FTP. It's full of problems
• SSH to your server. If you're unsure about what you're doing, read some tutorials.

Workflow

My typical workflow when working on websites is as follows:

1. Clone the repo from .git
2. Set up website locally
3. Make changes to the files, website
4. Commit those changes back into source control and push to the develop branch.
5. Run some tests (selenium/similar) on the develop code
6. If those tests pass, merge the develop branch to the master branch by doing git merge develop --no-ff -m "message"
7. Have a webhook set up to push code to your server/live/production website.
8. Only ever do a push to production at a time when both:
   • Visitors are at a low point (i.e. night)
   • When you have enough time to fix something going wrong
9. If any issues happen when pushing to Production, rollback to the last version and figure out what went wrong.

Answer 4

You can also append time Stamp to your file name so each time you refresh you get unique file

<script src="../assets/js/header.js?rndstr=<?php echo getCurrentTimeStamp();?>"></script>


function getCurrentTimeStamp(){
    return date('Y-m-d G:i:s');
}