Front-End Web & Mobile
Build, deploy, and test your web app’s performance for free with AWS Mobile Hub
According to a recent study, two-thirds of users access web applications on a mobile device, yet very few developers test their web applications on mobile devices. Today, we are adding web performance testing on mobile devices to AWS Mobile Hub. Combined with the recently announced awsmobile CLI, web developers can run 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-enabled app out of the box. In this blog post, we walk through the deployment and testing of a web application React Starter Kit. It should take about 10 minutes.
1. Sign in to the Mobile Hub console. Choose the Restaurant Ordering Starter Kit and choose Start.
2. Create a project: A project is a where you create and manage your app’s cloud resources.
3. Set up your starter kit: When you create the project, the starter kit automatically configures a number of backend features for you. While the cloud backend is configuring, set up your local environment. First, clone the starter kit. All of our starter kits are hosted on GitHub:
4. Next, set up the AWS Mobile CLI. The AWS Mobile CLI enables Web and React Native developers to configure and manage their cloud environments right from their desktop. The CLI creates a Mobile Hub project in the backend, allowing users to integrate features like user sign-in, analytics, and serverless APIs for their apps directly from the terminal window.
To use the CLI with AWS, make sure your credentials are set up. By this time, the cloud backend should be set up and you can access your project. Choose Next.
5. Your project has automatically configured the backend you set up in the cloud. You need to 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 pulls a cloud configuration file into your app. The configuration file contains a ledger of all endpoints for the configured backend features.
6. Usually, at this point you would write code in your app to connect your app to the Amplify library to use the features you’ve enabled in the backend. For the starter kit, we’ve already written that code, so you can proceed to the last step of deploying your app to the cloud.
7. Test your code first to make sure the app is functioning. 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 sign-in, which allows you to perform CRUD operations against an Amazon DynamoDB table. The app uses an Express application running in AWS Lambda. Lambda is invoked by Amazon API Gateway using proxy integration with greedy paths that only authenticated users can access.
AWS Mobile Hub lets you host your web application by pushing your frontend code to Amazon Simple Storage Service (Amazon S3). The code is then distributed over an Amazon Cloudfront URL. You can publish your web application and start a free performance test with one command:
When you run this command, your browser automatically opens two tabs. One shows the tests being run and the other shows your web application as it is deployed on the CloudFront CDN.
The web application is run on a number of devices, such as the Apple iPhone 8 and Google Pixel 2. This helps you gain real insights on app performance, with metrics such as time to first meaningful paint and time to first byte. Additionally, we provide screenshots of what the app looks like on different screen sizes and OS versions so developers can identify layout issues before release. To run more comprehensive tests, choose from our large library of cloud devices at AWS Device Farm. After a few minutes, you should see your test results:
We’re done! In 10 minutes you were able to start from scratch to build, deploy, and test a cloud-enabled app.