Deploying: only publish newly generated files and exclude any previously generated files that are no longer present

After checking out this discussion regarding setting Build Action for an entire folder in Visual Studio, I found a solution that worked for me. My webpack configuration generates hashed files in a Build folder which are then published. However, I encountered an issue where old files that were no longer being generated were still accessible on the live site. Here's what's happening:

  • During each build, all existing files in the ./Build folder are removed
  • The initial build creates both index.js and main.js which are published using a wildcard configuration in the .csproj file
  • Subsequent builds only generate index.js as the rest of the files are not created, but previous versions remain on the live site

This is causing a problem because media files like .js and .css, along with images and fonts, are being bundled and hashed. The accumulation of different versions of the same files can clutter the server. Do you have any suggestions on how to resolve this issue?

javascriptvisual-studiotfsmsbuild

Answer №1

My issue was traced back to the release configuration setup.

I utilize TFS as my Version Control System, with a Visual Studio Build specifying MSBuild x86 in the advanced settings. The MSBuild configuration includes all files and folders from the ./Build directory, as intended.

The snag arises during deployments/releases, where I employ a TFS configuration with an Azure App Service Deploy task to deliver the packaged build onto the server. Within the Additional Deployment Options, there's a crucial setting for Remove Additional Files at Destination. Without this option, extraneous files without matches in the deployed package remain untouched.

Example 1 – sans Remove Additional Files at Destination setting:

  • Deployment location contains: a.js, b.js, c.js
  • A new build is generated on TFS with updated a.js, c.js and introduces z.js, omitting b.js;
  • The build is deployed;
  • Post deployment, the destination now hosts: 
    a.js(updated), b.js, c.js(updated), z.js(new)

Example 2 – incorporating Remove Additional Files at Destination parameter:

  • Deployment location has: a.js, b.js, c.js
  • New build created on TFS updates a.js, c.js and adds z.js, excluding b.js;
  • The build is deployed;
  • After deployment, the site exhibits: 
    a.js(updated), c.js(updated), z.js(new)
    , while b.js is purged from the destination.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble connecting to the http json service in AngularJS

I recently started learning angularjs and I'm facing an issue with my code. There seems to be a flaw in the code and I'm uncertain about it. From a java perspective, the httpController has a nested function defined inside. Below is the code sn ...

javascriptangularjs

Problems with Ajax functionality

Excuse my rusty JavaScript skills but I'm attempting to use an AJAX call to a PHP file, pass it a plan type, and then determine if there are enough available slots for the plan. If so, return true; otherwise, false. Below is the Form in XHTML: <fo ...

javascriptphpajax

Deciphering the JavaScript code excerpt

This information was sourced from (function ($, undefined) { // more code ... $.getJSON("https://api.github.com/orgs/twitter/members?callback=?", function (result) { var members = result.data; $(function () { $("#num- ...

javascriptjqueryjsonp

Tailwind CSS not applying styles to my Next.js project on Ubuntu operating system

I'm experiencing a strange issue where Tailwind CSS is not applying any styles to my project on Ubuntu 20.04. Interestingly, the project works perfectly fine on Windows but for some reason, it's not styling at all on Ubuntu. https://i.sstatic.n ...

javascriptcssubuntunext.jstailwind-css

The POST response I received was garbled and corrupted

Operating under the name DownloadZipFile, my service compiles data and constructs a Zip file for easy downloading. This particular service provides a response that contains the stream leading to the file. A Glimpse of the Service: [HttpPost] public Actio ...

javascriptc#ajaxpostblob

Making an API request in React based on user input

As a beginner, I am in the process of creating a simple weather application. However, the code below is not functioning as expected. I need assistance in getting user input and submitting it. Can someone please provide guidance? class App extends Component ...

javascriptreactjsapi

Creating custom validation in Vuetify for password confirmation is essential in ensuring that

While developing a Vue.js template, I encountered a scenario on the sign-up page where I needed to compare passwords during user registration. To achieve this, I implemented a custom validation rule in the code snippet below: <v-text-field label=" ...

javascriptvalidationvue.jsvuetify.js

Tips for effectively eliminating errors in a redux store

Within my react-redux application, I have implemented a system to catch error responses from redux-saga. These errors are saved in the redux-store and rendered in the component. However, a major challenge arises when trying to remove these errors upon comp ...

javascriptreactjsreduxreact-reduxredux-saga

What is the minimum number of characters required to embed JavaScript using the HTML5 <script> element?

Is this the most efficient way to include external JavaScript on a page, now that the type attribute of the <script> tag can be omitted in HTML5? <script src="URL"></script> Is there a way to optimize this further, especially if a frame ...

javascripthtml

Is there a way to control the quantity of items that can be dragged to the drop area with dragula?

I'm struggling with a drag-and-drop issue that involves limiting the number of elements in a drop-area to two. I am using the dragula library for this task: If there are fewer than two elements in the drop-area, allow adding a new element from the dr ...

javascripthtmlcssdragula

What is the best way to position the left sidebar on top of the other components and shift them to the

Currently, I am working on a project to display NBA data fetched from an API. I am aiming to recreate the design showcased here: Dribbble Design My main challenge lies in overlaying the left sidebar onto the main box and shifting the components sligh ...

javascriptcssreactjs

Using jQuery to crop an SVG view box

I'm currently working on a sticker website project for a client who requires the ability to crop an image within a specific SVG shape, resembling a Halloween face (shown below). The uploaded image should be displayed only within this shape while hidi ...

javascriptjqueryimagesvgcrop

Copy the click function to a contenteditable <div> with spellcheck feature

When using a contenteditable <div> in Chrome, the native spell check feature will only work if the user manually clicks into the <div>. But what if you want to add a contenteditable <div> dynamically? Is there a way to trigger the spell c ...

javascriptjquery

Unusual sequence of JQuery Ajax calls

Within my website, there is a project div that is displayed using EJS. The data for the projects in EJS are rendered using a forEach loop, resulting in multiple similar divs appearing on the page. Each project div is assigned an id for identification pur ...

javascripthtmljquerydom

Creating a duplicate or copy of an element in jQuery using

My dilemma involves a div that consists of text/images and a custom jQuery plugin designed for those images. The plugin simply executes a fadeIn/fadeOut effect every 3 seconds using setInterval. This particular div acts as a "cache" div. When a user wants ...

javascriptjqueryjquery-plugins

Determining the availability of a remote source in React: A step-by-step guide

Is there a way to verify the existence of a remote resource, such as a large zip file, without actually downloading the file? What is the most efficient method for checking the presence of the resource? ...

javascriptreactjs

Vue - Utilizing mapState in Vuex to display the contents of the first object within an array

I am trying to display the names array from the first object in players using mapState with Vuex. Currently, the objects in players are listed based on their titles, but I want to filter them based only on the names in the first object for the current page ...

javascriptarraysvue.jsobjectvuex

Leveraging angular.extend() with controllers and function overrides

Currently, I am working with Angular 1.4.8 and attempting to expand a controller. The original controller and the expanding controller are quite similar, but there is a specific function that I aim to replace in the extending controller. angular.module(&a ...

javascriptangularjsinheritanceangular-controller

Enhance Shipping Options on Your Woocommerce Cart

I am facing a challenge with providing delivery options for three different countries in my e-commerce store. I want the customer to be able to select their country and instantly see the available delivery methods without having to refresh the entire page ...

javascriptphpajaxwordpresswoocommerce

I encountered an issue stating, "The function `req.redirect` is not recognized."

Recently starting out with node development. Encountering the error below: TypeError: req.redirect is not a function at Post.create (/var/www/html/node_blog/index.js:40:7) at /var/www/html/node_blog/node_modules/mongoose/lib/utils.js:276:16 a ...

javascriptnode.jsexpressnpmbackend