I'm fairly new to using React/Node/Express, I've chosen kyt as a boilerplate as it seemed like a great choice when looking for a base set of files to work from. I'm using the default React starter kyt.
My job is to take a bunch of JSON that's dumped from a CMS, and turn it into a React site.
For this to work, I need to be able to populate the 'routes' with data from this JSON file. I've used the code posted below, and this works great. The problem here though, is that my 'import' of the JSON means the data gets compiled into my bundle (by webpack) - which is fine, until the CMS updates the JSON file, at which point the bundle.js doesn't update, rendering it out-of-date (unless I wrote some code to recompile the bundle every time the CMS updates, which I don't like the sound of).
What I need is for the code to load the JSON file at runtime, rather than when the compiling happens.
Can anyone point me in a direction here, please? I've tried a bunch of things, including AJAX/axios requests - but nothing seems to work. I read that Webpack's 'System.import' feature could help me, which I've tried - but that also bundles my data into the compiled bundle.js.
import React from 'react'; import Route from 'react-router/lib/Route'; import IndexRoute from 'react-router/lib/IndexRoute'; import App from '../components/App.js'; import Home from '../components/Home.js'; import Standard from '../components/Standard.js'; import Listing from '../components/Listing.js'; import FourOhFour from '../components/FourOhFour.js'; // THIS IS THE PROBLEM - I don't want this to be bundled import Model from '../app-json/model.json'; const componentRegistry = { "Home": Home, "Standard": Standard, "Listing": Listing, "FourOhFour": FourOhFour } function buildDynamicRoutes(config){ var routeJSX = []; Object.keys(Model.posts).map((key) => { var thisComponent = ''; if(Model.posts[key].template === 'page-listings.php'){ thisComponent = 'Listing'; } else if(Model.posts[key].template === ''){ thisComponent = 'Standard'; } routeJSX.push( <Route path={Model.posts[key].route} components={componentRegistry[thisComponent]} key={key} /> ); }); return routeJSX; } const routes = ( <Route path="/" component={App}> <IndexRoute component={Home} /> { buildDynamicRoutes() } <Route path="*" component={FourOhFour}/> </Route> ); export default routes; 1 Answers
Answers 1
Update:
Doing the same thing, but server side is just as easy. You can choose to either host it remotely like I said below and use a library like request or even the built in Node http library to get he remote file contents.
Alternatively, when you dump the CMS file, instead of putting the file on some random remote file store, you could put it on the server doing the rendering and use Node's fs library to read the file from disk.
In both cases, you would then have to parse the JSON data and feed it into your component.
Since you are working with front-end code, you've got two choices:
Load the JSON when the React code is compiled by Webpack. This is what is happening now.
Load the JSON when the React code executes on the browser. This could be done by hosting your JSON export on some static file storage (Like S3, but there are many alternatives) and using AJAX to load and parse the JSON file when the component mounts.
Here's another answer which explains how to do this.
http://stackoverflow.com/a/14388512/4697675
You'll probably want to load the JSON file into your component's state and then render with that. That way, before the AJAX call is complete, you can render without the data.
0 comments:
Post a Comment