# Zoom advanced app heroku deployment

**URL:** <https://devforum.zoom.us/t/zoom-advanced-app-heroku-deployment/111382>\
**Category:** Zoom Apps\
**Tags:** contact\_center\
**Created:** [June 5, 2024, 10:04pm UTC](https://devforum.zoom.us/t/zoom-advanced-app-heroku-deployment/111382 "2024-06-05T22:04:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![brett](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/brett/32/67381_2.png) [@brett](https://devforum.zoom.us/u/brett)\
**Post date:** [June 5, 2024, 10:04pm UTC](https://devforum.zoom.us/t/zoom-advanced-app-heroku-deployment/111382/1 "2024-06-05T22:04:46Z")

</div>

Wondering if someone could give me some insight into the best way to deploy the [GitHub - zoom/zoomapps-advancedsample-react: This repository contains an Advanced Zoom Apps Sample. It should serve as a starting point for you to build and test your own Zoom App in development.](https://github.com/zoom/zoomapps-advancedsample-react) on heroku. I am currently deploying the frontend and backend separately with a different heroku.yml pointing to the Dockerfiles, since I feel like I’ve tried everything possible to get both in the same deployment.

The issue that I run into with deploying them separately is that I set the ZOOM\_APP\_CLIENT\_URL variable in the backend app to my frontend deployment url, but when I launch the app I get a couple errors because it is looking for the manifest.json and bundle.js within the root of my backend instead of the frontend.

If anyone could give me some recommendations, it would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [June 20, 2024, 9:33pm UTC](https://devforum.zoom.us/t/zoom-advanced-app-heroku-deployment/111382/2 "2024-06-20T21:33:06Z")

</div>

@brett When deploying a frontend and backend on heroku, the easiest method may be to build out the static files for the react site and place them in a folder to be served by the backend.

Let me know if that helps. If not, I can reach out to the authors of this sample to see if they have any exact steps on deploying to heroku but I’m not sure if they’ve tested this yet.

---

<div class="post-metadata">

**Author:** ![brett](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/brett/32/67381_2.png) [@brett](https://devforum.zoom.us/u/brett)\
**Post date:** [July 10, 2024, 9:01pm UTC](https://devforum.zoom.us/t/zoom-advanced-app-heroku-deployment/111382/3 "2024-07-10T21:01:40Z")

</div>

Hi @MaxM, I’ve tried your suggested solution but that doesn’t seem to working either. If you have any other ideas, I am open and grateful for any suggestions that you may have.

---

<div class="post-metadata">

**Author:** ![brett](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/brett/32/67381_2.png) [@brett](https://devforum.zoom.us/u/brett)\
**Post date:** [August 9, 2024, 4:36am UTC](https://devforum.zoom.us/t/zoom-advanced-app-heroku-deployment/111382/4 "2024-08-09T04:36:19Z")

</div>

Hi @MaxM, I wasn’t sure if you saw my reply a while back and just wanted to follow up. I tried building the static files to serve up on the backend but didn’t have any luck. Currently I have the frontend and backend split into two different repos. Both deployments build fine but when opening the application in the zoom client, I get this error:  
`Refused to execute …./api/zoomapp/proxy/static/js/bundle.js as script because “X-Content-Type-Options: nosniff” was given and its Content-Type is not a script MIME type.`

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [August 9, 2024, 4:18pm UTC](https://devforum.zoom.us/t/zoom-advanced-app-heroku-deployment/111382/5 "2024-08-09T16:18:52Z")

</div>

Thanks for following up! It sounds like your server needs to set the content type to be application/javascript for those files.

When nosniff is set, then it does not sniff the MIME type and instead relies on `content-type` headers only. Here are some threads on the topic:

> <https://stackoverflow.com/questions/18337630/what-is-x-content-type-options-nosniff/18337753#18337753>

> <https://stackoverflow.com/questions/40728554/resource-blocked-due-to-mime-type-mismatch-x-content-type-options-nosniff/53062522#53062522>

Let me know if that helps!