Wolfram Function Repository

Instant-use add-on functions for the Wolfram Language

Function Repository Resource:

 CloudDeployReactProject (1.2.0) current version: 1.2.1 »

Source Notebook

Build and deploy a React project to the Wolfram Cloud

Contributed by: Kareem Ahmed, Jon McLoone, 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.
PathAutomaticpath on which npm can be found
"ProgressMessages"Nonewhether to print progress messages
Permissions$Permissionsthe Cloud Permissions for deployed files
OverwriteTargetFalsewhether to overwrite static deployments
"DeploymentMode""Cloud"whether to deploy to the "Cloud" or a "WAS"
"DeploymentBase"$CloudBaseserver 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]:=
ResourceFunction["CloudDeployReactProject", ResourceVersion->"1.2.0", ResourceSystemBase -> "https://www.wolframcloud.com/obj/resourcesystem/api/1.0"]["/Users/jonm/temp/my-react-app", "myReactApp"]
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]:=
ResourceFunction["CloudDeployReactProject", ResourceVersion->"1.2.0", ResourceSystemBase -> "https://www.wolframcloud.com/obj/resourcesystem/api/1.0"]["/Users/jonm/temp/my-react-app", {"mydirectory", "myReactApp"}]
Out[2]=

Options (4) 

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

In[3]:=
ResourceFunction["CloudDeployReactProject", ResourceVersion->"1.2.0", ResourceSystemBase -> "https://www.wolframcloud.com/obj/resourcesystem/api/1.0"]["/Users/jonm/temp/my-react-app", "myReactApp", "ProgressMessages" -> True];

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]:=
ResourceFunction["CloudDeployReactProject", ResourceVersion->"1.2.0", ResourceSystemBase -> "https://www.wolframcloud.com/obj/resourcesystem/api/1.0"][ "/Users/abdulg/veet", "veettest", "DeploymentBase" -> "https://www.myepc.example.com", "BuildFolder" -> "dist", OverwriteTarget -> True ]
Out[4]=

Build and deploy a node project to a Wolfram Application Server using "DeploymentMode":

In[5]:=
ResourceFunction["CloudDeployReactProject", ResourceVersion->"1.2.0", ResourceSystemBase -> "https://www.wolframcloud.com/obj/resourcesystem/api/1.0"][ "/Users/abdulg/cra", "cratest", "DeploymentMode" -> "WAS", "DeploymentBase" -> "http://www.mywas.example.com" ]
Out[5]=

If you need to specify the path for npm that can be done with the option Path:

In[6]:=
ResourceFunction["CloudDeployReactProject", ResourceVersion->"1.2.0", ResourceSystemBase -> "https://www.wolframcloud.com/obj/resourcesystem/api/1.0"]["/Users/jonm/temp/my-react-app", "myReactApp", Path -> "/opt/homebrew/bin"]
Out[6]=

Publisher

Jon McLoone

Requirements

Wolfram Language 13.0 (December 2021) or above

Version History

  • 1.2.1 – 08 November 2024
  • 1.2.0 – 13 March 2024
  • 1.1.0 – 13 November 2023
  • 1.0.2 – 14 June 2023
  • 1.0.1 – 26 April 2023
  • 1.0.0 – 08 December 2022

Related Resources

License Information