How to add dynamic json in a build in react.js?

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Meers E. Chahine wants to to this question: 这个问题：

I have a server that can talk to the react build file. I want to dynamically update a json file from the backend without having to rebuild the react project and pushing.

Can this be done? I checked the.network tab and I'm assuming the JSON is being compacted into the code, so no way to find the file name and replace.

How can I do this?

I have a react app that loads data from a local json file using

import data from './data.json'

it is all working fine without any issues and I'm able to open my index.html in 3000 and also open it as simple HTML page in browser.

Now I run npm run build which creates the build directory. However, my json values become kind of stagnant as it is hardcoded in the javascript in the build. So the question is how can my code in build directory reads json files from a specific location dynamically.

Answer 1

If you want your data.json to be preserved after npm run build you should move it inside your public directory.

After that change your imports to import data from '/data.json' .

If you then want to change your data dynamically, simply replace data.json from the build directory.

Answer 2

My question: Why not use fetch and serve the JSON from a server side API?

---

To partially answer your question:

Without changing any webpack configuration, you can use the import() function, instead of import , and a chunk will be built with the json content within a js file.

async function fn() {
    const json = await import("./foo.json")
    document.title = json.bar
}

On the other hand, probably, webpack has a way to configure this output to be json, but for that you'll need to npm run eject or use a tool to override the webpack production config.

Answer 3

Apart from other alternatives, what you're looking for vanilla Javascript is called fetch API . It's possible to read from either local or remote URLs via fetch method.

As per the example you provided above, instead of doing below;

import data from './data.json'

You can make use of it like;

fetch('./data.json')

Also it works pretty same way as per any URL;

// Sample working URL example to mock some real data
fetch('https://jsonmock.hackerrank.com/api/football_competitions?year=2015')

And best part of it, the parameter fetch method accept can be modified easily since it both accepts local file path and a URL as a variable very same way;

let baseURL = 'https://jsonmock.hackerrank.com/api',
    endpointToCall = 'football_competitions',
    year = '2015',
    URL;

URL = `baseURL/${endpointToCall}?year=${year}`;

fetch(URL);

Note: With the last example above, my point is to destructure the same API endpoint used with previous example before, via dynamic variables in order to being able to more clearer. Please let me know if it's not and you need more clarification.

Answer 4

What you can do it before you run the npm run build you make a request to your server to get the data.json file and then just run the npm run build when it loads. You can write a simple script for it.

For example:

#!/bin/bash

# Get the file from the server
curl https://yourServer/data.zip -o data.zip

# Unzip the file, you can also use unzip
zip -d data.json

# Move the file to the desired directory
mv data.json /yourApp/data/data.json is

# Navigate to the directory where the npm package is
cd /yourApp/

# This one is optional but you should run a test to see if the app won't crash with the new json data that you fetched
# Run tests
npm run tests

# Run the build command for React
npm run build

You can modify this script with your paths and it should work.

Summary

• Get the json data with curl
• Unzip it
• Move it to your react app where data.json is and replace it
• Run the tests (optional)
• Run the build
• You're done.

Hope this helps.