Alternative 3D Solutions Tutorial


Publishing a Web Application Using AWS Amplify


20 minutes

Posted on: April 30, 2020

Learn Sumerian
Publishing a Web Application Using AWS Amplify

Your progress

Tags

glTF
babylon
babylon.js
three
js
three.js
amplify

In this tutorial you will learn about:

Learn how to publish a basic web application using AWS Amplify

In this tutorial, you’ll learn how to publish a web application using AWS Amplify.

Prerequisites

Step 1: Initialize Amplify

In this step you’ll learn how to set up an Amplify project.

  1. First, initialize the project. From your project’s root directory:

     amplify init
    

    The init command initializes the project for use with Amplify. Running the command will prompt you for several items. You may choose whatever you like for the project name, environment name, and default editor, but the remaining choices should be filled out as follows:

    Prompt Input
    Choose the type of app that you’re building javascript
    What javascript framework are you using none
    Source Directory Path src
    Distribution Directory Path dist
    Build Command npm run-script build
    Start command npm run-script start
    Do you want to use an AWS profile? Yes

    When asked to select an AWS profile, you may select one that you have already configured for use with the AWS CLI, or you will be directed to the steps to set up those credentials.

    For more information on Amplify environments, see the documentation. For a real application, you may want different environments for development, testing, and production.

  2. Add hosting support.

     amplify add hosting
    

    Again, the command will prompt you for several items. Choose Amazon CloudFront and S3 for the plugin module and DEV for the environment setup. Use the defaults for the remaining prompts.

     ? Select the plugin module to execute Amazon CloudFront and S3
     ? Select the environment setup: DEV (S3 only with HTTP)
    

    See the hosting documentation for more information on these options. The DEV environment we chose to use here results in a faster setup as it uses only S3 over HTTP, but is not recommended for production environments. The PROD setup uses CloudFront on top of S3 over HTTPS and should be used for the production version of the application.

  3. Test it out:

     amplify publish
    

    Then visit the URL in output using a web browser to load the scene.

Step 2 (optional): Configure auth support for AWS services

If you intend to use other AWS services in your web application, you’ll need to add and configure a Cognito identity pool through Amplify’s auth category. See the Amplify documentation for more detail on the options available. In this tutorial, we’ll see up an identity pool that allows unauthenticated user access.

  1. Add the auth category:

     amplify add auth
    
  2. When prompted, answer the questions as below. For any prompts not listed below, you may enter any value of your choosing.

    Prompt Input
    Do you want to use the default authentication and security configuration? Manual configuration
    Select the authentication/authorization services that you want to use User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for images or other content, Analytics, and more)
    Allow unauthenticated logins? (Provides scoped down permissions that you can control via AWS IAM) Yes
    Do you want to enable 3rd party authentication providers in your identity pool? No
    Build Command npm run-script build
    Start command npm run-script start
    Do you want to use an AWS profile? Yes
    How do you want users to be able to sign in? Email
    Do you want to add User Pool Groups? No
    Multifactor authentication (MFA) user login options OFF
    Email based user registration/forgot password Enabled (Requires per-user email entry at registration)
    Please specify an email verification subject Your verification code
    Please specify an email verification message Your verification code is {####}
    Do you want to override the default password policy for this User Pool? No
    What attributes are required for signing up? Email
    Specify the app’s refresh token expiration period (in days) 30
    Do you want to specify the user attributes this app can read and write? No
    Do you want to use an OAuth flow? No
    Do you want to configure Lambda Triggers for Cognito? No
  3. Push the changes.

     amplify push
    
  4. Install the Amplify package. This package differs from the CLI we previously installed - it supplies run-time support for connecting to AWS services, among other things. The code in this package will deploy with your application.

     npm install aws-amplify
    
  5. Open your project’s src/index.js file and add the following to the top of file:

     import Amplify, { Auth } from 'aws-amplify';
     import awsconfig from './aws-exports';
     Amplify.configure(awsconfig);
    
  6. After configuring Amplify, you may now use other Amplify categories that require authentication (i.e storage, predictions). Though it’s less straightforward, you may alternatively use the credentials returned from Amplify directly in AWS SDK:

     Auth.currentCredentials().then((credentials) => {
         const polly = new AWS.Polly({ credentials, region: 'us-west-2' });
         polly.synthesizeSpeech(...);
     });
    

Now you know how to publish your own web application to the cloud.

Make sure to check out these related tutorials:

Back to Tutorials

© 2019 Amazon Web Services, Inc or its affiliates. All rights reserved.