# Integrating websdk in new create react app

**URL:** <https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334>\
**Category:** Web\
**Created:** [January 4, 2020, 1:30pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334 "2020-01-04T13:30:38Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![digivalsolutions](https://avatars.discourse-cdn.com/v4/letter/d/9fc29f/32.png) [@digivalsolutions](https://devforum.zoom.us/u/digivalsolutions)\
**Post date:** [January 4, 2020, 1:30pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/1 "2020-01-04T13:30:39Z")

</div>

I am having trouble in implementing web-sdk in my existing react app. I can able to run demo react app and cdn version successfully but start script and webpack configuration confuses me in integration.

Below is my start script:  
“start”: “react-scripts start”

I would like to embed zoom inside my ‘App’ component created using ‘creact-react-app’.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [January 6, 2020, 5:25pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/2 "2020-01-06T17:25:09Z")

</div>

Hey @digivalsolutions,

What specific issues are you running into?

This may help:

> [@Zoom Meeting Custom Ui](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281/18):
>
> @edward & @sdenardi - yes, this is currently correct. #zmmtg-root appends into the body on import, and needs to be hidden on load. Hiding it in this way should not influence .init() or .join() from overlaying the page when the meeting starts. Considerations for future readers: If you’re loading another root element (like in React), you’ll need to manage/manipulate the DOM outside of the app. And make sure to include required css files in index.html, not within the app. We’re working on improvi…

And here is my example in Angular:  
[https://github.com/tommygaessler/zoom-angular](https://github.com/tommygaessler/zoom-angular)

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![swamivenkat](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@swamivenkat](https://devforum.zoom.us/u/swamivenkat)\
**Post date:** [May 22, 2020, 1:28pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/3 "2020-05-22T13:28:16Z")

</div>

Hello Tommy,

Have any update on React JS awith Web SDK version 1.7.7?

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 29, 2020, 4:39pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/4 "2020-05-29T16:39:40Z")

</div>

Hey @swamivenkat,

Can you be more specific? Not sure what you are referring to.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![swamivenkat](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@swamivenkat](https://devforum.zoom.us/u/swamivenkat)\
**Post date:** [June 29, 2020, 9:39am UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/5 "2020-06-29T09:39:19Z")

</div>

Do we have any sample code to use Web SDK into React Js / React Native App?

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [June 30, 2020, 6:33pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/6 "2020-06-30T18:33:49Z")

</div>

Hey @swamivenkat,

Unfortunately we do not. You can follow our Web SDK NPM guide to install into your React project:

> **[@zoomus/websdk](https://www.npmjs.com/package/@zoomus/websdk#usage)**
>
> Zoom Web SDK

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![sangitapujara512](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sangitapujara512/32/1636_2.png) [@sangitapujara512](https://devforum.zoom.us/u/sangitapujara512)\
**Post date:** [July 9, 2020, 7:55pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/7 "2020-07-09T19:55:27Z")

</div>

Hey Tommy,

Could you please help?  
While integration,I am getting error :  
errorMessage: “The meeting number is not found.”, errorCode: 3707.

Thanks and Regards,

---

<div class="post-metadata">

**Author:** ![michael\_p.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/michael_p.zoom/32/18105_2.png) [@michael\_p.zoom](https://devforum.zoom.us/u/michael_p.zoom)\
**Post date:** [July 10, 2020, 4:31am UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/8 "2020-07-10T04:31:46Z")

</div>

Hi @sangitapujara512 What is the meeting number that you’re using?

---

<div class="post-metadata">

**Author:** ![sangitapujara512](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sangitapujara512/32/1636_2.png) [@sangitapujara512](https://devforum.zoom.us/u/sangitapujara512)\
**Post date:** [July 10, 2020, 5:24am UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/9 "2020-07-10T05:24:28Z")

</div>

Hey Michael,  
Thanks for your reply.  
Meeting number issue is solved.  
My current configuration is : role = 0 (ie for joining meeting)  
If I want to start meeting , what changes I need to make.  
I tried making role to 1 in request body, but it says invalid signature.

Thanks again for your time!

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [July 13, 2020, 11:09pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/10 "2020-07-13T23:09:29Z")

</div>

Hey @sangitapujara512,

That is correct, you will change the role to 1 when [generating the signature](https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature), just make sure you own the meeting. You can’t start meetings your account doesn’t own.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![nBow](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/nbow/32/12799_2.png) [@nBow](https://devforum.zoom.us/u/nBow)\
**Post date:** [July 31, 2020, 2:26am UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/12 "2020-07-31T02:26:24Z")

</div>

Do you have a working react app demo with Zoom integration. The current demo seems to only show regular web code.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 3, 2020, 6:12pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/13 "2020-08-03T18:12:41Z")

</div>

Hey @nBow,

We do not have a React Sample App yet, but a few people in the community have built some:

> [@ZOOM WebSDK/React Clash](https://devforum.zoom.us/t/zoom-websdk-react-clash/13432/11):
>
> Here is the working example [https://github.com/shkhalid/zoom-web-sdk-react-example](https://github.com/shkhalid/zoom-web-sdk-react-example)

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![raop.dev](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/raop.dev/32/18978_2.png) [@raop.dev](https://devforum.zoom.us/u/raop.dev)\
**Post date:** [November 18, 2020, 9:02pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/14 "2020-11-18T21:02:40Z")

</div>

Hi Tommy, i’m trying to use the example for reactjs you quote, but i cant make it work. dunno why i keep getting this:

```
<--- Last few GCs --->

[10456:000001FA5617D420] 37010 ms: Mark-sweep 1378.0 (1425.3) -> 1377.7 (1424.8) MB, 1045.0 / 0.0 ms (average mu = 0.066, current mu = 0.008) allocation failure scavenge might not succeed
[10456:000001FA5617D420] 37014 ms: Scavenge 1378.4 (1424.8) -> 1378.2 (1425.3) MB, 2.4 / 0.0 ms (average mu = 0.066, current mu = 0.008) allocation failure

<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00000395E485C5C1]
    1: StubFrame [pc: 00000395E484E7C3]
Security context: 0x006b2a71e6e9 <JSObject>
    2: replace [0000006B2A7105E9](this=0x004a25d8a2c9 <String[116]: C:\Users\PX\Desktop\zoom\zoom-web-sdk-react-example-master\node_modules\@zoomus\websdk\dist\zoomus-websdk.umd.min.js>,0x0275398df129 <JSRegExp <String[2]: \\>>,0x011433132409 <String[1]: />)
    3: _append [00000005D0056B49] [C:\Users\PX\Desktop\zoom...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF76981DD8A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4506
 2: 00007FF7697F8886 node::MakeCallback+4534
 3: 00007FF7697F9200 node_module_register+2032
 4: 00007FF769B130DE v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF769B1300F v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF769CF9804 v8::internal::Heap::MaxHeapGrowingFactor+9620
 7: 00007FF769CF07E6 v8::internal::ScavengeJob::operator=+24550
 8: 00007FF769CEEE3C v8::internal::ScavengeJob::operator=+17980
 9: 00007FF769CF7B87 v8::internal::Heap::MaxHeapGrowingFactor+2327
10: 00007FF769CF7C06 v8::internal::Heap::MaxHeapGrowingFactor+2454
11: 00007FF769E21EA7 v8::internal::Factory::NewFillerObject+55
12: 00007FF769E9F096 v8::internal::operator<<+73494
13: 00000395E485C5C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! zoom-testing-react@0.1.0 start: `react-scripts start`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the zoom-testing-react@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\PX\AppData\Roaming\npm-cache\_logs\2020-11-18T21_01_43_083Z-debug.log
```

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [March 16, 2021, 7:30pm UTC](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/15 "2021-03-16T19:30:01Z")

</div>

Hey @raop.dev ,

You can checkout our React Sample App:

> **[zoom/websdk-sample-react](https://github.com/zoom/websdk-sample-react)**
>
> Use the Zoom Web SDK in a React App. Contribute to zoom/websdk-sample-react development by creating an account on GitHub.

Thanks,  
Tommy