Azure static web apps not loading page resources correctly. css or javascript files

Question

UPDATE 3

Sorry I put this update here, but I did a good discovery. Read Below under the title Original Qestion to review what I have done.

After everything related below I realized something with the cache was happening. However, I also notice that on different computers the error persisted. After playing around with the url I found out that this

https://yellow-hill-0ce1f0e10-4.centralus.azurestaticapps.net/contacto

and this one

https://yellow-hill-0ce1f0e10-4.centralus.azurestaticapps.net/contacto/

load different websites. The only difference is the trailing slash.

When I run this locally from Visual Studio Code, the local server adds the slash automatically; Azure static web app, doesn't

Original Question

I'm making a simple website based on azure static web apps. I used this guide https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps.

I wanted to make a new page, so I copied the files I needed into a new contacto folder. and make all the changes. then deploy succesfully.

however, the files deployed are not the ones I modified but the original ones, as if no changes were detected (if it need to detect changes). So for example. I have this styles.css files in github

 body {
     font-family: ff-dagny-web-pro, sans-serif;
     font-weight: 300;
     font-style: normal;
 }

 .nopadding {
     padding: 0 !important;
 }

 .btn-primary {
     color: #383835;
     background-color: #ffd225;
     border-color: #ffd225;
 }

 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
     color: #383835;
     background-color: #ffd225;
     border-color: #ffd225;
     /*set the color you want here*/
 }


 ul.nav li a, ul.nav li a:visited {
     color: #3C3C3A !important;
 }

 ul.nav li a:hover, ul.nav li a:active {
     color: #3C3C3A !important;
 }

 ul.nav li.active a {
     color: #3C3C3A !important;
 }

 .hide{
     display:none;
 }

but when I load the publish site, the file is significantly different. as you can see.

 body {
     font-family: ff-dagny-web-pro, sans-serif;
     font-weight: 300;
     font-style: normal;
 }

 .table td, .table th {
     vertical-align: middle;
 }

 .table {
     margin: 0;
 }

 .table tr td img {
     width: 100%;
 }

 .table tr td {
     border: none;
 }

 .nopadding {
     padding: 0 !important;
 }

 .geoGradient {
     background: rgb(206, 217, 183);
     background: linear-gradient(141deg, rgba(206, 217, 183, 1) 0%, rgba(185, 202, 150, 1) 100%);
 }

 ul.nav li a, ul.nav li a:visited {
     color: #3C3C3A !important;
 }

 ul.nav li a:hover, ul.nav li a:active {
     color: #3C3C3A !important;
 }

 ul.nav li.active a {
     color: #3C3C3A !important;
 }

A couple weeks ago I was in a similar situation when I updated the images in the inner pages, none of them were loading when surfing the published site, github shows the correct files in the repository and in the actions, yet they seem not to be in the server. I changed the names of all files and it solved the problem. As ridiculous as it sound. I have tried to change folder name, but not working here.

What am I missing and how can I get github action to deploy the files in the commit?

UPDATE 1

As YML file was not relevant to this question I removed it.

UPDATE 2

This update was not relevant so I removed so the question is clearer now.

Answer 1

The problem initially perceived as github not deploying some files, including some image files at some point was not related with github but with an Azure static apps known problem.

It turns out that azure static web apps server doesn't include a trailing slash at the end of the url when pointing to a folder.

The problem arises because without the trailing slash all the relative references in the html file are not understood to be in the current folder but on the parent folder.

www.contoso.com/contact

points to the index.html file in the contact folder but all the relative references in that file points to root level.

www.contoso.com/contact/ (see the slash) 

points to the index.html file in the contact folder and all the relative references in that file works as expected.

There is an issue that well deserve a vote in azure static web apps github https://github.com/Azure/static-web-apps/issues/42

SOLUTION Now you have two workarounds:

1. Make sure all your links to internal pages have the trailing slash.

In my case, when I had the problem with the images, changing the names wasn't the solution. It was that somehow, inadvertently, I included the trailing slash in the links.

2. Use absolute urls in all your references to resources. This one works even in a visitor types the url and forget to type the trailing slash.

UPDATE Definitive Solution A while ago Microsoft deployed a solution for this issue. They have added the ability to configure trailing slash behavior with the trailingSlash configuration in the staticwebapp.config.json file.

Please refer this documentation for more details. https://learn.microsoft.com/azure/static-web-apps/configuration#trailing-slash

Answer 2

Issue description

File placed in wwwroot folder in VS, works fine in local development. But when published to Azure, access to file redirects to Blazor page not found.

Solution

Check your file .csproj file. If you find any code as below, remove it.

  <ItemGroup>
    <Content Update="wwwroot\data\RandomFile.xml">
      <CopyToOutputDirectory>Never</CopyToOutputDirectory>
    </Content>
  </ItemGroup>

Why

When adding files to wwwroot via Visual Studio, it will at times auto add meta data for that file. For a file to be uploaded to Azure from Github workflow, there should be no mention of that file in the .csproj file.