Download the frontend code sample
On the Official Solutions or My Solutions page, download the code sample from the location shown in the following figure.
Select a region and click OK to download the ZIP package.
After you decompress the ZIP file, it contains the following three files:
App.js: The sample page code.
openapiv3.js: The utility code.
README.md: Contains recommended usage instructions.
Start the sample
This sample uses 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-appOpen the created project folder and install the following two dependencies.
cd my-app
npm install antd --save
npm install crypto-js --saveCopy App.js and openapiv3.js to the src folder in the my-app project directory.
In the my-app directory, run npm start to start the sample.
npm startAfter the project starts, you can access the sample on the default port 3000.
Sample feature introduction
This sample page 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 ID of the template from which you downloaded the sample. You can also copy the ID from the corresponding location on the page.
The region defaults to the one selected when you downloaded the sample. If you switch regions, make sure the template includes configurations for the selected region.
Create a solution
Enter a solution name and the values for the template variables.
Validate resources
After you click Validate Resources, the solution status changes to Validation Successful. You can then inquire about the resource prices.
Inquire about resource prices
Click the Inquire Prices button. After the price inquiry is successful, you can proceed to resource deployment.
Deploy resources
Click Deploy Resources to view the deployment status.
After the 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 the resources are released, you can delete the solution.
