Function Repository Resource:

CloudDeployReactProject

Build and deploy a React project to the Wolfram Cloud

Contributed by: Kareem Ahmed, Jon McLoone and Abdul Ghani

ResourceFunction["CloudDeployReactProject"][sourceDirectory,endpoint]

builds the React project found in sourceDirectory to a CloudObject specified by endpoint.

ResourceFunction["CloudDeployReactProject"][sourceDirectory,{targetDirectory,endPoint}]

builds the React project found in sourceDirectory to a CloudObject specified by endpoint in the cloud directory targetDirectory.

Details and Options

React is a JavaScript framework for building user interfaces. A typical application might use React for the user interface and Wolfram Language APIFunction deployments for the computational logic.

This function automates the process of building a React project and deploying it to the Wolfram Cloud or a Wolfram Application Server (WAS). It builds your npm project and deploys a static build folder.

It is geared for create-react-app by default, but the output of different build tools can be deployed by setting the "BuildFolder" option.

Path

Automatic

path on which npm can be found

"ProgressMessages"

None

whether to print progress messages

Permissions

$Permissions

the Cloud Permissions for deployed files

OverwriteTarget

False

whether to overwrite static deployments

"DeploymentMode"

"Cloud"

whether to deploy to the "Cloud" or a "WAS"

"DeploymentBase"

$CloudBase

server where the deployment will be made

"BuildFolder"

"build"

folder where the static files will be found

When deploying to a WAS, the Permissions and OverwriteTarget options are ignored. A WAS deployment is always overwritten.

Node.js and npm must be installed for this function to work. See instructions here»

Examples

Basic Examples (2)

Create a new React app, for example using npx create-react-appmy-react-app then deploy it using:

In[1]:=

Out[1]=

A React deployment consists of many files. A directory called React is created to store these, and the endpoint is also placed in this directory. You can also specify the name of this directory:

In[2]:=

Out[2]=

Options (4)

You can view progress messages with "ProgressMessages"→True for basic messages, or "ProgressMessages"→All for all actions:

In[3]:=

Vite is a build system just like create-react-app, but it builds to a dist folder by default. This can be specified by the "BuildFolder" option. Here we deploy to a private cloud using the "DeploymentBase" option, overwriting any previous deployment:

In[4]:=