Cloud Architect Design Tools:Download and run the frontend code sample

Download the frontend code sample

On the official solutions or my solutions page, download the code sample.

Click the code icon button (</>) in the toolbar at the bottom of the solution card to download the code sample.

Select a region and click OK to download the ZIP package.

The Download template API code dialog box displays the current template ID and template name.

The decompressed ZIP file contains three files:

App.js: Sample page code.

openapiv3.js: Utility code.

README.md: Usage instructions.

Start the sample

This sample is built with create-react-app. For installation instructions, see https://create-react-app.dev/docs/getting-started/.

After installation, create a project named my-app.

npx create-react-app my-app

Navigate to the project folder and install the following dependencies.

cd my-app
npm install antd --save
npm install crypto-js --save

Copy App.js and openapiv3.js to the src folder in the my-app project directory.

[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]# ls -a
..  App.css  App.js  App.test.js  index.css  index.js  logo.svg  openapiv3.js  reportWebVitals.js  setupTests.js
[root@iZ2zecyreg5js3kpihjmpiZ src]#
[root@iZ2zecyreg5js3kpihjmpiZ src]#

In the my-app directory, run npm start to start the sample.

npm start

After the project starts, access the sample on the default port 3000.

The startup page displays a form for basic CADT configuration. Enter your AccessKey ID, AccessKey Secret, and the template ID (for example, L8BB1L2IKEBD4IRT). In the region drop-down list, select a target region, such as China (Beijing). Then, click Next to proceed with solution creation, resource validation, price inquiry, and resource deployment.

Sample feature introduction

This sample demonstrates the following flow: Create Solution -> Validate Resources -> Inquire Prices -> Deploy Resources -> Release Resources.

This code sample demonstrates only the basic flow for frontend integration. It is not a complete technical solution. Use this sample for development or reference only. Do not use it in a production environment.

Configure basic information

Enter the AccessKey ID and AccessKey secret.

The template ID defaults to the template from which you downloaded the sample. You can also copy the ID from the page.

The region defaults to the one you selected during download. If you switch regions, ensure the template includes configurations for the selected region.

On the CADT console's my solutions page, click the clipboard icon in the toolbar of the target solution card to copy the template ID.

Create a solution

Enter a solution name and the values for the template variables.

For example, in the solution name field, enter test-deploy-ecs. In the template variables section, set ${instance_type} to ecs.c6.2xlarge and ${pay_type} to PostPaid. Then, click Next.

Validate resources

After you click Validate Resources, the solution status changes to Validation Successful. You can then inquire about resource prices.

The resource validation results table shows that the region, security group, vSwitch, and VPC are all validated successfully. The remarks for the ECS resource show the message: NotFound.Property: [key_pair_name] in Node [ecs].

Inquire about resource prices

Click the Inquire Prices button. After the price inquiry succeeds, you can proceed to resource deployment.

After the price inquiry is complete, the solution status changes to Valuating_Success. In the resource list, the VPC, vSwitch, and security group are free resources (price shown as -1). The price for the ECS instance (spec ecs.c6.2xlarge, pay-as-you-go) is CNY 2.144. After confirming, click Next to proceed to resource deployment.

Deploy resources

Click Deploy Resources to view the deployment status.

The solution status changes to Deploying. In the resource list, the status of the VPC, vSwitch, and security group resources is Running.

After deployment is complete, the resources are created.

Release resources

You can release deployed resources by releasing the solution. Alternatively, you can delete the solution to hide it. Note that deleting a solution does not release its deployed resources.

After you click Release Solution, the Solution Status changes to Releasing.... Wait for the resource release to complete.

After the resources are released, you can delete the solution.

After deletion, the status of the solution changes to Deleted. In the resource list, the status of all associated resources (VPC, vSwitch, ECS, and security group) changes to Deleted.