I'm building a react + typescript website and I've deployed the application using azure static web apps.
On localhost everything works as expected, but on the published environment, no app image is displayed. Looking at the console, I get this error:
No png, svg, gif... is loaded, but it works on localhost.
I've tried following the instructions at:
https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#fallback-routes
But without success.
It's my first deploy of an app on azure. I don't know if it's important to add more information.
All help is appreciated.
My package.json:
{
"name": "yarn",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"@anatoliygatt/dark-mode-toggle": "^1.0.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/draft-js": "^0.11.10",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.3",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.8",
"@types/victory": "^35.0.0",
"axios": "^1.3.0",
"crypto-js": "^4.1.1",
"draft-js": "^0.11.7",
"draft-js-export-html": "^1.4.1",
"env-cmd": "^10.1.0",
"keycloak-js": "^20.0.2",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-aws-s3": "^1.5.0",
"react-aws-s3-typescript": "^1.1.5",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18.2.0",
"react-draft-wysiwyg": "^1.15.0",
"react-hot-toast": "^2.4.0",
"react-icons": "^4.6.0",
"react-loading": "^2.0.3",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"react-select": "^5.6.1",
"react-toggle": "^4.1.3",
"styled-components": "^5.3.6",
"typescript": "^4.8.4",
"victory": "^36.6.8",
"web-vitals": "^2.1.4"
},
"scripts": {
"build:dev": "env-cmd -f .env.development yarn run build",
"build:homolog": "env-cmd -f .env.homolog yarn run build",
"build:prd": "env-cmd -f .env.production yarn run build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "index.js",
"author": "João Victor Simonassi",
"license": "MIT",
"devDependencies": {
"@types/react-beautiful-dnd": "^13.1.2",
"@types/react-toggle": "^4.0.3",
"@types/styled-components": "^5.1.26",
"@typescript-eslint/eslint-plugin": "^5.42.1",
"@typescript-eslint/parser": "^5.42.1",
"eslint": "^8.27.0",
"eslint-plugin-react": "^7.31.10",
"file-loader": "^6.2.0"
},
"resolutions": {
"styled-components": "^5"
}
}
My azure pipeline tasks:
On Static WebApps, you will define configuration for Azure Static Web Apps in the staticwebapp.config.json file, which controls the mimeTypes – please try adding the missing files types and then check.
Checkout the example configuration file here: Example configuration file
"mimeTypes": {
".json": "text/json"
}
}
The recommended location for the staticwebapp.config.json is in the folder set as the app_location in the workflow file. However, the file may be placed in any subfolder within the folder set as the app_location.
I understand you have already checked route setting - just confirming, if you have added fallback routes in staticwebapp.config.json file via "navigationFallback".
See: https://learn.microsoft.com/azure/static-web-apps/configuration#fallback-routes
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
}
}
Also, review any filter on file extensions on route, as outlined in this doc.