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.

Improve this question
1
  • If you haven't already, configure a value for PUBLIC_URL in Azure. Think this can be done in the portal (details: learn.microsoft.com/en-us/azure/app-service/…). 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. Commented Mar 10, 2021 at 19:26

1 Answer 1

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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 peocess undefined or process.env.PUBLIC_URL undefined?
The latest updated method helped me. Thank you
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.