ReactJS: JSON file is fetched from localhost instead of project directory

Question

I have following directory structure of my project.

I have following code in my index.js file for loading website.json file.

index.js

componentDidMount() {
    $.ajax({
       url: "../website.json",
       type: "GET",
       dataType: 'json',
       ContentType: 'application/json',
       success: function(data) {         
         this.setState({data: data});
         console.log(data);
       }.bind(this),
       error: function(jqXHR) {
         console.log(jqXHR);
       }.bind(this)
    })
  }

The problem is that I am using npm start command to server my react app from local directory of my application. This serves my app at http://localhost:3000/ . Now the problem is that the application tries to load the website.json file from http://localhost:3000/website.json which gives a 404 not found error.

So, my question is how my website.json file can be loaded from my project directory instead of localhost.

Note: my project folder is not at localhost but at virtual host.

Update: I am specifically asking why the ajax call is unable to load data from my project folder (I am using relative addressing) and instead including path from localhost. I want to load data using ajax call is it possible or not.

Show what you running as 'start'. You may find it in package.json file. — Oleg Imanilov
– Oleg Imanilov, Commented Aug 14, 2017 at 15:14

Alcinator · Accepted Answer · 2017-08-14 15:11:26Z

2

Your webserver (I would guess Express) will be serving files from the 'public' folder.

For security reasons, web servers do not allow access to files outside of the directory root (/public in your case), so you will not be able to get the file by ajax (or from the browser).

If you really want to, you could either:

Copy/Move the file into the public folder
Create a symlink to the file in the public folder

answered Aug 14, 2017 at 15:11

Alcinator

3171 silver badge6 bronze badges

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

2 Comments

Dan Mason Over a year ago

@Nosyara has mentioned this below (not as clearly as above, however).

geeksal Over a year ago

Thank @Alcinator you made me understand it.

Oleg Imanilov · Accepted Answer · 2017-08-14 15:09:45Z

2

You may include it inside source as

var website = require('../website.json');

So it will be embedded during compile time.

Another way to do it - move website.json to public folder, than you may access it as ajax('/website.json'...

edited Aug 14, 2017 at 15:09

answered Aug 14, 2017 at 14:49

Oleg Imanilov

2,7791 gold badge17 silver badges28 bronze badges

7 Comments

geeksal Over a year ago

Is it not possible by using ajax that is my question?

Oleg Imanilov Over a year ago

Yes, if you add API on back end. And than use relative URL to get the file by ajax.

geeksal Over a year ago

can you please explain it?

Oleg Imanilov Over a year ago

You have to manage server side. Or move your file to public folder and ajax it from root.

geeksal Over a year ago

Currently I am doing it on my local machine. For sure I will move it to server. So I want to simulate here at localhost. Later on i will be providing a different url at server side.

|

Dan Mason · Accepted Answer · 2017-08-14 15:02:28Z

0

I assume you are using ES6/ES2015 since you are using react. So instead of doing it in componentDidMount you can just add this at the top:

import websiteData from '../website.json';

And then you can just use websiteData as a variable in your component.

edited Aug 14, 2017 at 15:02

answered Aug 14, 2017 at 15:00

Dan Mason

2,3371 gold badge18 silver badges38 bronze badges

2 Comments

geeksal Over a year ago

Yes it is possible by this method but my question is how to do it using a ajax call. I am updating the question to make it more clear.

Dan Mason Over a year ago

Why do you need to do it via ajax? Is the json file changing? if not then doing it this way is perfectly suitable. If it is changing then componentDidMount would only load it once anyway.

Collectives™ on Stack Overflow

ReactJS: JSON file is fetched from localhost instead of project directory

3 Answers 3

2 Comments

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related