According to a recent study, two-thirds of users have access to web apps on a mobile device, but still test very few developers develop web applications on mobile devices. Nowadays we add web performance tests on mobile devices to AWS Mobile Hub. Combined with the recently announced
awsmobile CLI, web developers can perform a simple performance test on our fleet of iOS and Android devices in the AWS Device Farm.
Recently, we introduced a number of downloadable starter kits that provide you with a fully functional cloud-based app from the packaging. In this blog post we walk through the implementation and testing of a web application React Starter Kit. It takes about 10 minutes.
1. Log in to the Mobile Hub console. Choose the starter kit for restaurant order and select Start .
2. Create a project: A project is a location where you can create and manage the cloud resources of your app.
3. Set your starter kit: When you create the project, the starter kit automatically configures a number of back-end functions for you. While configuring the cloud backend, set your local environment. Clone the starter kit first. All our starter kits are hosted on GitHub:
4. Then set the AWS Mobile CLI. With the AWS Mobile CLI, web and react-native developers can configure and manage their cloud environments directly from their desktop. The CLI creates a Mobile Hub project in the backend, allowing users to integrate functions such as user login, analyzes and APIs without a server directly from their apps in the terminal window.
If you want to use the CLI with AWS, you must ensure that your credentials are set. By then the cloud backend must be set up and you have access to your project. Select Next .
5. Your project automatically configured the back-end you set up in the cloud. You must link this cloud backend to the React starter app on your desktop. The awsmobile init command links your project to the app you cloned on your desktop and retrieves a cloud configuration file to your app. The configuration file contains a ledger of all endpoints for the configured backend functions.
6. Normally, you would currently write code in your app to connect your app to the Amplify library to use the features that you have enabled in the backend. For the starter kit we have already written that code, so you can continue to the last step of implementing your app in the cloud.
7. First test your code to make sure the app is working. Use
awsmobile run instead of
npm start . This pushes any updated code to the cloud backend and launches the web application in your browser. Your React application has user registration and login, allowing you to perform CRUD operations against an Amazon DynamoDB table. The app uses an Express application that is executed in AWS Lambda. Lambda is called by Amazon API Gateway using proxy integration with greedy paths that only authenticated users can access.
With AWS Mobile Hub you can host your web application by moving your frontend code to Amazon Simple Storage Service (Amazon S3). The code is then distributed over a URL of an Amazon Cloudfront. You can publish your web application and start a free performance test with one command:
When you execute this command, two tabs will automatically be opened in your browser. One shows the tests that are running and the other shows your web application while it is being used on the CloudFront CDN.
The web application runs on a number of devices, such as the Apple iPhone 8 and Google Pixel 2. This gives you real insights about app performance, with statistics such as time to first meaningful paint and time to first byte. In addition, we provide screenshots of how the app looks on different screen sizes and OS versions, so developers can identify layout issues before they are released. Choose more extensive tests from our large library of cloud devices at AWS Device Farm. After a few minutes you will see your test results:
We are done! In 10 minutes you could start all over again building, implementing and testing a cloud app.