React App Deployment successful but takes only one html file.

[GEEKY-EXPERTS]

On Azure Web Static Apps, I have been having terrible issues with the deployment of a React App.

The [src], [public], [.gitignore], [README.md], [package.json] and [package.json] are in a folder whilst the (.env) file is outside the folder. Let's call the folder, folder qw.

Now, when trying to deploy, the react based on Node.JS, i set the following:

      app_location: "/qw/src" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "build" # Built app content directory - optional

It deployed successfully but the view it shows is just the index.html file.

I did a Local build and production build run on my personal computer and it ran successful so, I am a bit surprised to see this on Azure.

Error Message I got: Error: Could not detect the language from repo then, it proceeds to continue deployment and finishes but only loads one index.html file in the src.

Detecting platforms... Could not detect any platform in the source directory. Error: Could not detect the language from repo. ---End of Oryx build logs--- Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support. Finished building app with Oryx Either no Api directory was specified, or the specified directory was not found. Azure Functions will not be created. Zipping App Artifacts Done Zipping App Artifacts Uploading build artifacts. Finished Upload. Polling on deployment. Status: InProgress. Time: 0.1209041(s) Status: Succeeded. Time: 15.2024556(s) Deployment Complete :)

I don't understand what the issue is. By the way, if i remove the [src] from the app location, it doesn't deploy at all. Repo is in GitHub but private.

Sample of entire yml file codes name: Azure Static Web Apps CI/CD

on: push: branches: - master pull_request: types: [opened, synchronize, reopened, closed] branches: - master

jobs: build_and_deploy_job: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkout@v2 with: submodules: true - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.G_TOKEN }} # Used for Github integrations (i.e. PR comments). It is named this way in GitHub Secrets. action: "upload" ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig app_location: "/qw/src" # App source code path api_location: "" # Api source code path - optional output_location: "build" # Built app content directory - optional ###### End of Repository/Build Configurations ######

close_pull_request_job: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Close Pull Request Job steps: - name: Close Pull Request id: closepullrequest uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} action: "close"

[qianz2]

Hi GEEKY-EXPERTS,

In your app location "/qw/src", does it contain a package.json there? I see that you put the package.json file outside of the src folder, which may be the reason why oryx didn't detect your app as nodejs app since no package.json file in your "/qw/src" folder.

[GEEKY-EXPERTS]

Hello... Thanks for the response. We moved the package.json file into the src and the new error message is:

Node Build Command Manifest file created. Using Node version: v14.19.1 Using Npm version: 6.14.16 Running 'npm install --unsafe-perm'... npm WARN deprecated [email protected]: In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x. npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated

[email protected] postinstall /github/workspace/F_C_L_P/src/node_modules/core-js node -e "try{require('./postinstall')}catch(e){}" [email protected] postinstall /github/workspace/qw/src/node_modules/core-js-pure node -e "try{require('./postinstall')}catch(e){}" [email protected] postinstall /github/workspace/qw/src/node_modules/react-app-polyfill/node_modules/core-js node -e "try{require('./postinstall')}catch(e){}" npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.3.2 (node_modules/react-scripts/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.3.2 (node_modules/jest-haste-map/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/fork-ts-checker-webpack-plugin/node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/tailwindcss/node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/rollup/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN [email protected] requires a peer of browserslist@>= 4 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of browserslist@>= 4.21.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of browserslist@>=4 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of typescript@>= 2.7 but none is installed. You must install peer dependencies yourself. npm WARN @apideck/[email protected] requires a peer of ajv@>=8 but none is installed. You must install peer dependencies yourself. added 1938 packages from 757 contributors and audited 1946 packages in 50.866s 213 packages are looking for funding run npm fund for details found 15 vulnerabilities (2 low, 10 moderate, 3 high) run npm audit fix to fix them, or npm audit for details npm ERR! missing script: docs:build npm ERR! npm ERR! Did you mean this? npm ERR! build npm ERR! A complete log of this run can be found in: npm ERR! /github/home/.npm/_logs/2022-07-19T03_35_34_331Z-debug.log ---End of Oryx build logs--- Oryx has failed to build the solution.

NOTE: F_C_L_P is the name of the Git Repo.

This time, it didn't even build at all...

Based on folder description for qw,

We have these files inside the src apart from other folders: [App.css], [App.js], [App.test.js], [bg.jpg], [index.css], [index.js], [package.json], [Candara.ttf], [Candara.woff], [Candara.woff2], [No-asset-background.jpg]

We have these files inside the public apart from the [img] and [js] folders: [favicon.ico], [index.html], [logo192.png], [logo512.png], [manifest.json], [robots.txt]

Then, we have the .gitignore, api and read.me files in the qw folder The api folder is empty - It will be filled later.

Outside the qw folder, we have the following in the - .github/workflows qw .env .gitignore package-lock.json readme.md

The above are inside the F_C_L_P repo.

[simonjj]

We're closing this issue due to its age. If this is still impacting you please open a new issue and simply link back to this one.