1

I have a json file in my react project public folder like this

public
|
|___Data
    |   test.json

In my .tsx file I’m referencing the file like this

fetch(`${process.env.PUBLIC_URL}/Data/test.json`,
    {
     headers : {
         'Content-Type': 'application/json',
         'Accept': 'application/json'
     }
})
 .then(response => response)

This works fine in development and when building and serving the app locally (npm run build). But when I try deploy to my Azure web app app service, the site throws a 404 error for that file.

I can also see the file in the Kudu debug console so I know it's getting deployed with the project.

Printing process.env.PUBLIC_URL to console yields an empty string. Do I need to set this value to something using environment variables? Is there something else that I’m missing with my app service configuration?

I've looked at other similar questions, namely this one and the solution did not work for me either.

Jordyn
  • 93
  • 10
  • If you haven't already, configure a value for `PUBLIC_URL` in Azure. Think this can be done in the portal (details: https://learn.microsoft.com/en-us/azure/app-service/configure-common#configure-app-settings). You can check browser dev tools (Network tab) to see the full URL that the failed request tries to reach and see if it's what you expect it to be. – chillin Mar 10 '21 at 19:26
  • If my reply is helpful, please accept it as answer(click on the mark option beside the reply to toggle it from greyed out to fill in.), see https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – Jason Pan Mar 11 '21 at 06:03

1 Answers1

2

NEWEST

The React client side project essentially downloads a piece of code to run on the client browser, and will not be related to azure application settings. So its process.env cannot read any azure environment variables.

The latest updated answer can be your alternative. After a lot of testing, it is found that in the react project, the process.env in the .tsx file is different from the global one.

import * as React from 'react';
const {env} = process;
...
public getJsonDataStr = () => {
    const urlBy: string = this.props.urlBy!;
    const url = this.state.url + urlBy + env.REACT_APP_PUBLIC_URL;
    this.setState({ url });
};

For more details, you can download my sample code.

  1. Create .env file in project.

    enter image description here

  2. npm run build, and deploy build folder.

    enter image description here

  3. Test it.

enter image description here

PRIVIOUS

Method 1

You can set PUBLIC_URL in Application settings on portal.

Test Step:

  1. configure on portal.

    enter image description here

  2. Open scm site, click Environment.

    enter image description here

  3. open ssh, run command.

    enter image description here

Method 2

Try to use process.env.WEBSITE_HOSTNAME instead of process.env.PUBLIC_URL.

enter image description here

enter image description here

Jason Pan
  • 15,263
  • 1
  • 14
  • 29
  • Neither of these methods worked for me. I see both variables in scm, but the site itself they come up as undefined. I the app is hosted on Windows and not linux so I can't use ssh to test their either (unless I just have no idea what I'm doing there either) – Jordyn Mar 11 '21 at 17:47
  • @Jordyn peocess undefined or `process.env.PUBLIC_URL` undefined? – Jason Pan Mar 12 '21 at 02:25
  • The latest updated method helped me. Thank you – Jordyn Mar 12 '21 at 20:42
  • The latest update method also helped me! It wasn't obvious from their documentation at all but for some reason `const {env} = process;` and access the environment this way resolves the issue. – T PHo Oct 09 '21 at 12:22