Test API With Front-end

We will perform the document upload, document download, and delete document functions to test the working of the APIs.

  1. Open the console of fcjdms stack, click to id of DocAPI

TestAPI

  1. Select Stages, then expand dev stage and record the API’s URL

TestAPI

  1. Open constant.js file in src folder of front-end project.
  2. Relpace value of APP_API_URL with your URL:

TestAPI

  • Open the src/component/Home/Upload.js file in the application’s source code directory and uncomment the code that calls the API to write data to DynamoDB.

TestAPI

  1. Build and upload build folder to s3 with the following commmand:
yarn build
aws s3 cp build s3://BUCKET_NAME --recursive

Replace BUCKET_NAME with the name of the bucket you created to host the website

  1. Back to web application and reload web page.
  • Click Upload

TestAPI

  1. Click Add files and select the files you want to upload. Then click Upload

TestAPI

  • Select My Profile to view information about file numbers and used storage

TestAPI

  1. Select My Document on the left menu to view all uploaded files. Then click Select

TestAPI

  1. Check to files that you want to delete and click Delete

TestAPI

  • Click OK to confirm deletion

TestAPI

  1. You will see the deleted files and you can download them if you click the Download icon

TestAPI

  1. Select Home on the left menu, you will see the information has been updated

TestAPI

You can open the S3 bucket and DynamoDB table to examine objects and data. We have completed the deployment of a serverless application with SAM.