banner 728x90

Build, deploy and test the performance of your web app for free with AWS Mobile Hub

banner 728x90

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 .

build deploy and test the performance of your web app for free with aws mobile hub - Build, deploy and test the performance of your web app for free with AWS Mobile Hub

2. Create a project: A project is a location where you can create and manage the cloud resources of your app.

1512677041 687 build deploy and test the performance of your web app for free with aws mobile hub - Build, deploy and test the performance of your web app for free with AWS Mobile Hub

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:

  git clone https://github.com/awslabs/aws-mobile-react-sample.git  

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.

  npm install-g awsmobile-cli  

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 .

1512677042 988 build deploy and test the performance of your web app for free with aws mobile hub - Build, deploy and test the performance of your web app for free with AWS Mobile Hub

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.

  awsmobile init project id  

1512677043 803 build deploy and test the performance of your web app for free with aws mobile hub - Build, deploy and test the performance of your web app for free with AWS Mobile Hub

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.

1512677043 13 build deploy and test the performance of your web app for free with aws mobile hub - Build, deploy and test the performance of your web app for free with AWS Mobile Hub

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.

1512677044 582 build deploy and test the performance of your web app for free with aws mobile hub - Build, deploy and test the performance of your web app for free with AWS Mobile Hub

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.

1512677045 317 build deploy and test the performance of your web app for free with aws mobile hub - Build, deploy and test the performance of your web app for free with AWS Mobile Hub

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:

1512677045 288 build deploy and test the performance of your web app for free with aws mobile hub - Build, deploy and test the performance of your web app for free with AWS Mobile Hub

We are done! In 10 minutes you could start all over again building, implementing and testing a cloud app.

banner 728x90
author
Author: 
    Script & Style Show: Episode 1: Marc Grabanski
    Script & Style Show: Episode 1: Marc Grabanski
    During this second episode of the Script
    AWS AppSync region expansion and new functions for API keys
    AWS AppSync region expansion and new functions for API keys
    AWS AppSync, a managed GraphQL service with
    What is the best time to involve your mobile app users?
    What is the best time to involve your mobile app users?
    When talking to customers about mobile analysis,
    How to make a Twitter bot with Node.js
    How to make a Twitter bot with Node.js
    Twitter bots have been in the news

    Leave a reply "Build, deploy and test the performance of your web app for free with AWS Mobile Hub"

    Must read×

    Top