I have been importing data in the form of a JSON file into a React component:
import data from '../../public/json/data.json';
I am using the create-react-app tool, and when I run npm run build, as expected the data.json file is bundled as part of the build/static/main.js file.
What I would like is for this data.json file not to be bundled but to be referenced at run-time each time the component runs. I.e. so that it can be edited in the built app and for these edits to show in the app. I thought that by including it in my public (as opposed to src) folder this would work, but of course I am still importing it so it is bundled. Is there a way to reference it without bundling it?
Use the fetch API to retrieve the JSON file asynchronously.
Check out https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch for example implementations.
Related
I've unit tests that utilize a common reference Json file. That file is used by multiple tests all throughout the app.
Can I simply create a folder "testFiles" and put my json file there? I don't want the json to be bundled when building for prod
thanks
Maybe the answer is simple or I don't see whole picture yet.
When I need json files in my unit tests, I'm putting them into some ./test/mocks/.. subfolder and just importing them.
import xxx from "../../mocks/yyy.json";
I have added some json file to my library, but when I build it there is error my.json file not under rootDir.
Assuming you want to access the .json file as part of the application build process (i.e. not via http), you will will need to put it into the assets folder in your project.
More information about the folder structure of an Angular application here.
You can then follow the instructions here to access the data from your components.
I have a web server (back-end) written using node. It will communicate with the front-end written in react. I would like to 'require' a file for a data structure and also use that same file in a script in the front-end. I can seen how this can easily be done using json - However, I would like to see if this can be done using plain javascript.
There are multiple ways to do this, but here is a simple one, using a monorepo structure.
You file structure will look like this:
/
packages
backend
package.json
index.js
frontend
package.json
index.js
common
index.js
package.json
Then, in each of the frontend and backend package.jsons, you can include common package as a dependency using the file:.. syntax
ie.
dependencies: {
"common" : "file:../common"
}
I am working on angular 5 project want to create a visualization of an application system internal connection (something like a flowchart where systems internal components like server, mq, db can be dragged upon and connection be made) component in angular. Started with the jsplumb community edition (link) to do the same. Was able to successfully integrate jsplumb into angular 5 application. The only drawback is we cannot create the new element at runtime (That is drag and drop items and create connection). This is possible in the toolkit licenced version. Which I am not considering to work with.
So was looking into js-graph-it (link) The js-graph-it is a old project works nicely with simple html page. I am having problem injecting js-graph-it.js file into the angular project. As it is non npm file it is not defined and the system does not recognize the same if syntax like import { jsgt } from '../../assets/jsgraphit/js is used. If you observer I have placed the files in my asset folder. The first question is this the right place for 3rd party js file if not present in npm? How to import or the correct way to import such files not present in npm ?
You can import 3rd party JS files into your project and be bundled by the CLI by putting them in the scripts array in your angular-cli.json config file.
This will make them part of the global scope (e.g. available on the window object) as if you imported it via a <script> tag.
You can additionally include any CSS files or other assets part of the libraries in the config file as well via the styles and assets properties.
I think the proper way for you to manage these 3rd party libs is to store them in your assets directory as it looks like you are already doing.
For my current project, I'm developing a frontend application that consumes a backend API. I would like to keep the URL of the backend dynamic (e.g. in a seperate config file). However, with Webpack, all defined variables end up in a bundle, which makes it hard to keep the backend URL dynamic (I'd have to dive in the bundle and change the URL).
How would I achieve this using Webpack 2? Basically I want to import a config file that gets excluded from the bundle so I can easily modify the config file later on.
My current solution is to define a window.config object in my index.html and read the window object from my application. I feel there should be a better way to achieve this though.