search

observablehq / examples

Examples of using Observable in a variety of contexts
106 stars 33 forks source link

How to use "react-create-react-app" with other D3 template? #18

Open metascience-lab opened 2 years ago

metascience-lab commented 2 years ago

Hi Tophtucker, Thanks for your example code! As a beginner, I have one question.

I wish to use one of your example "react-create-react-app" with other D3 template, so I downloaded the source code of the new template and put it in scr/@d3/NewTemplate. Also, I run: yarn add @observablehq/runtime, then I have the new file in ./file to build my fileAttachments variable in json script. But when I used the original file downloaded by yarn add @observablehq/runtime, the webpage could not show out successfully. I noticed that you mentioned in the ReadMe file in "react-create-react-app" that we need to replace this file name with flare.json. I am confused about which .json file is suitable for the new template? I tried flare.json but it doesn't work. Could you pls give me a hand? Thank you so much!

heaversm commented 2 years ago

The fix for me was to:

run the yarn commands that it tells you to in the embed options of observable, for example:

yarn add @observablehq/runtime@4
yarn add "https://api.observablehq.com/@heaversm/mozilla-ecosystem.tgz?v=3"

copy the json file from the node_modules/[your_directory]/files directory into create react app's /public directory, give it an extension of .json (it has no extension by default), and then edit the javascript in the node_modules/[your_directory]/[your_file].js file so that the import is, for example:

new Map([["flare-2@2.json","/files/af12b2c45618d5de452c00b06fedb7419a7733e49ba65d051f45b3f9c754b41b842343db07d77422daa2137734c5eb09737342b5a5dda9ca509055fcd8f9a758.json"]]);

instead of:

new Map([["flare-2@2.json",new URL("./files/af12b2c45618d5de452c00b06fedb7419a7733e49ba65d051f45b3f9c754b41b842343db07d77422daa2137734c5eb09737342b5a5dda9ca509055fcd8f9a758",import.meta.url)]]);

then re-run yarn start