how do i embed the notebook in react

Community Help
1

I have tried to embed this notebook here in react by looking at the instruction . But have been unsuccessful, how do i embed the notebook so as to display the graph in my react based webapp’s screen?

2

hi @mespsar, could you share more which problem have you encountered?

Looking at your notebook now, I guess it might be related to the the FileAttachment and import.meta.url, specially if you’re using create-react-app which uses webpack.

One quick hack is to edit the downloaded notebook, if you’ve followed the instructions you did

yarn add https://api.observablehq.com/d/84fe095e25ec38a2.tgz?v=3

then you’ll have your notebook at node_modules/84fe095e25ec38a2/84fe095e25ec38a2@3060.js

edit and replace the line related to FileAtachments

  const fileAttachments = new Map([["Terminal_1_1st_Aug.csv", new URL("./files/624eff0ddb0053eaac7843157607c51fa2ec90a0637be46099091c2abd02dfce8a004711402a07a363fc0c59f575965754a438a3752f8f32beaf50e26df1b88a", import.meta.url)]]);

  const fileAttachments = new Map([["Terminal_1_1st_Aug.csv", require("./files/624eff0ddb0053eaac7843157607c51fa2ec90a0637be46099091c2abd02dfce8a004711402a07a363fc0c59f575965754a438a3752f8f32beaf50e26df1b88a")]]);

the idea is to replace the not supported import.meta.url with require('./') then webpack loaders will take care to copy and link the corrected file attachment.

1 Like
3

HEY thanks! @radames, that was exactly the problem i was facing, that particular error has been fixed but the screen of the react app is now empty, it is not showing th graph

Capture
Capture1309×1030 75.3 KB

can you help me with what changes i should make to make the graph appear,
thanks!
Edit: so by changing (name==“aniamtion”) to (name==“chart”) i was able to display the graph.
But how do i get

1 Like
4

hi @mespsar , yes I notice you were not matching an existing cell name on your notebook. Make sure you’re naming the cells you want to mount on your app.

image
image1042×666 50.9 KB

5

I met a problem after changing the line. It works perfectly locally, but after I deploy the app, the changes I made are all abolished. Meanwhile, the other changes I made locally to the node_modules also disappear. Do you know how I can solve the problem?

6

hi @haoshuai that makes sense. When you deploy, it stops working because, in the process, it downloads a new fresh package of your notebook from Observable without your local changes.

I recommend you to follow the Observable tutorial, download your notebook as an asset on your project folder and modify the file attachment, i.e., without npm install.

or a more drastic change use rollup to package your react app

2 Likes
7

It seems like I need to create my app from scratch in order to use rollup. I think I will download the notebook directly. Thank you for your answer!

1 Like