Deploying React apps in RStudio Connect

Posit Professional & Hosted Products Posit Connect
1

Hi,

Apologies if this isn't the best place to ask, but I tried to google this topic unsuccessfully.

Does anyone has any experience deploying React apps in RStudio Connect?

It should be possible as static content, however nothing renders when I deploy the example coming with "create-react-app"... There are some resources that are "blocked due to MIME type".

I am quite new to this topic (React), so any information can be helpful. THanks!

2

This is really interesting!! Do you have a hello-world react app to reference that is just static HTML / JavaScript? I am not very familiar with React, personally, but I do like to play with deploying crazy static content to Connect :smile:

Also, is your Connect server behind a proxy, perhaps?

3

Hi @cole,

I fixed it. I forgot to add the content url to "homepage" in the package.json before building it, therefore the blank page.

So, to answer your question, I used the default application created by create-react-app. It's pretty straightforward: GitHub - facebook/create-react-app: Set up a modern web app by running one command..
Then it is just a matter of:

  1. pointing to the right content URL in package.json (here's a ref: Deploy Static React App | Hostwinds)
  2. build the application
  3. deploy the build folder in RStudio Connect as a static page.

Funny that we have this similar hobby... We should make a club :smiley:

1 Like
4

Realize this is an old thread but how exactly do you " 1. deploy the build folder in RStudio Connect as a static page."?

I have made a React app so would like to give this a go on Rconnect

5

Just use rsconnect::deployApp adding the whole /build as appFiles and build/index.html as appPrimaryDoc.

6

In case this is still useful to anyone, this has been working for me for react apps (bootstrapped w/ create-react-app):

  1. Edit package.json setting the top-level homepage property to the content url path of your deployment on Connect, eg:
{
  ...
  "homepage": "my_react_app"
  ...
}

(will prepend "my_react_app" to static resources in the build which will ensure these are found and loaded in your deployment)

  1. Build your react app
yarn build
  1. Deploy w/ rsconnect::deployApp:
library(rsconnect)

rsconnect::deployApp("build",
  appFiles = list.files("build", recursive = TRUE),
  appPrimaryDoc = "index.html",
  appName = "test",
  appTitle = "Test",
  account = "connect_account",
  server = "connect_server"
)
1 Like
7

I know this is an older post, but I thought this example from KPMG on deploying React would be useful to share here!