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);
| Name | Type | Description |
|---|---|---|
props | ReactAppProps | No description. |
propsRequired
- Type: ReactAppProps
Methods
Preflight Methods
| Name | Description |
|---|---|
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
| Name | Description |
|---|---|
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
- Type: IInflightHost
opsRequired
- Type: MutArray<str>
Properties
| Name | Type | Description |
|---|---|---|
node | constructs.Node | The tree node. |
url | str | Website'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
| Name | Type | Description |
|---|---|---|
projectPath | str | The path to the React app root folder- can be absolute or relative to the wing folder. |
buildCommand | str | A command for building the React app. |
buildDir | str | The path to the React app build folder- relative to the projectPath. |
localPort | num | A port to start a local build of the React app on. |
startCommand | str | A command for starting React app locally. |
useBuildCommand | bool | In 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
| Name | Type | Description |
|---|---|---|
domain | Domain | The website's custom domain object. |
projectPath | str | The path to the React app root folder- can be absolute or relative to the wing folder. |
buildCommand | str | A command for building the React app. |
buildDir | str | The path to the React app build folder- relative to the projectPath. |
localPort | num | A port to start a local build of the React app on. |
startCommand | str | A command for starting React app locally. |
useBuildCommand | bool | In 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.