Skip to main content

React App

The ex.ReactApp resource represents a website, built using React, that can be both hosted in the cloud or to run on a development hot-reload server in the sim target.

Usage

Initialization

Using the default arguments:

bring ex;
bring util;

let website = new ex.ReactApp(projectPath: "./client");

or customizing them:

bring ex;
bring util;

let website = new ex.ReactApp(
projectPath: "./client",
useBuildCommand: true // `false` by default. Will run the build command if true, and the start command if not
buildDir: "/dist" // default is "/build"
startCommand: "pnpm start" // default is "npm start"
buildCommand: "pnpm build" // default is "npm build"
localPort: 4000 // default is 3001
);

When ReactApp is compiled to the sim target, by default it runs the start command (default: npm start) inside projectPath to serve your app in development mode on a local port.

If the useBuildCommand environment variable is set OR if ReactApp is compiled to any other target, it will run the build command (default: npm build) inside of the projectPath to build the React app for production to buildDir and serve the app.

Using Wing variables within react code

ex.ReactApp allows you to pass preflight string values from Wing to the React app using addEnvironment method:

bring cloud;
bring util;
bring ex;

let api = new cloud.Api();
let website = new ex.ReactApp(projectPath: "./client");

website.addEnvironment("apiUrl", api.url);
website.addEnvironment("another", "some string variable");

Then in the React app use window.wingEnv: (accessible after adding <script src="./wing.js"></script> to the index file)

const { apiUrl } = window.wingEnv;
const users = await fetch(apiUrl + "/users");

Currently, we can only pass preflight string variables to the React app environment.

Target-specific details

Simulator (sim)

sim implementations of ex.ReactApp is using either the Website resource (when useBuildCommand is true) or starts React development server when false.

AWS (tf-aws and awscdk)

AWS implementations of ex.ReactApp uses the Website resource.

Azure (tf-azure)

🚧 Not supported yet (tracking issue: #4220)

GCP (tf-gcp)

🚧 Not supported yet (tracking issue: #4221)

API Reference

Resources

ReactApp

A cloud deployable React App.

Initializers

bring ex;

new ex.ReactApp(props: ReactAppProps);
NameTypeDescription
props
ReactAppProps
No description.

propsRequired

Methods

Preflight Methods
NameDescription
addEnvironment
Adding a key-value pair that can be accessible later via the window.wingEnv object in the react code.

addEnvironment
addEnvironment(key: str, value: str): void

Adding a key-value pair that can be accessible later via the window.wingEnv object in the react code.

keyRequired
  • Type: str

the key to add.


valueRequired
  • Type: str

the value to add.


Static Functions

NameDescription
onLiftType
A hook called by the Wing compiler once for each inflight host that needs to use this type inflight.

onLiftType
bring ex;

ex.ReactApp.onLiftType(host: IInflightHost, ops: MutArray<str>);

A hook called by the Wing compiler once for each inflight host that needs to use this type inflight.

The list of requested inflight methods needed by the inflight host are given by ops.

This method is commonly used for adding permissions, environment variables, or other capabilities to the inflight host.

hostRequired

opsRequired
  • Type: MutArray<str>

Properties

NameTypeDescription
node
constructs.NodeThe tree node.
url
strWebsite's url.

nodeRequired
node: Node;
  • Type: constructs.Node

The tree node.


urlRequired
url: str;
  • Type: str

Website's url.


Structs

ReactAppOptions

Basic options for ReactApp.

Initializer

bring ex;

let ReactAppOptions = ex.ReactAppOptions{ ... };

Properties

NameTypeDescription
projectPath
strThe path to the React app root folder- can be absolute or relative to the wing folder.
buildCommand
strA command for building the React app.
buildDir
strThe path to the React app build folder- relative to the projectPath.
localPort
numA port to start a local build of the React app on.
startCommand
strA command for starting React app locally.
useBuildCommand
boolIn sim, if true - will use the start command, and if false - the build command.

projectPathRequired
projectPath: str;
  • Type: str

The path to the React app root folder- can be absolute or relative to the wing folder.


buildCommandOptional
buildCommand: str;
  • Type: str
  • Default: "npm run build"

A command for building the React app.


buildDirOptional
buildDir: str;
  • Type: str
  • Default: "/build"

The path to the React app build folder- relative to the projectPath.


localPortOptional
localPort: num;
  • Type: num
  • Default: 3001

A port to start a local build of the React app on.


startCommandOptional
startCommand: str;
  • Type: str
  • Default: "npm run start"

A command for starting React app locally.


useBuildCommandOptional
useBuildCommand: bool;
  • Type: bool
  • Default: false

In sim, if true - will use the start command, and if false - the build command.


ReactAppProps

Options for ReactApp.

Initializer

bring ex;

let ReactAppProps = ex.ReactAppProps{ ... };

Properties

NameTypeDescription
domain
Domain
The website's custom domain object.
projectPath
strThe path to the React app root folder- can be absolute or relative to the wing folder.
buildCommand
strA command for building the React app.
buildDir
strThe path to the React app build folder- relative to the projectPath.
localPort
numA port to start a local build of the React app on.
startCommand
strA command for starting React app locally.
useBuildCommand
boolIn sim, if true - will use the start command, and if false - the build command.

domainOptional
domain: Domain;
  • Type: Domain
  • Default: undefined

The website's custom domain object.


projectPathRequired
projectPath: str;
  • Type: str

The path to the React app root folder- can be absolute or relative to the wing folder.


buildCommandOptional
buildCommand: str;
  • Type: str
  • Default: "npm run build"

A command for building the React app.


buildDirOptional
buildDir: str;
  • Type: str
  • Default: "/build"

The path to the React app build folder- relative to the projectPath.


localPortOptional
localPort: num;
  • Type: num
  • Default: 3001

A port to start a local build of the React app on.


startCommandOptional
startCommand: str;
  • Type: str
  • Default: "npm run start"

A command for starting React app locally.


useBuildCommandOptional
useBuildCommand: bool;
  • Type: bool
  • Default: false

In sim, if true - will use the start command, and if false - the build command.