Skip to content

Create the web UI

Time Estimate: 20 - 25 minutes

In this module, we will download some sample source code for a Vue.js frontend web UI that will use our REST API as its backend. We'll hook this frontend up with our FeedbackSvc API and then test it from our Cloud9 development environment. In doing so, you'll see how a real application might interact with our API.

Download the code

In your Cloud9 terminal, download the source code for our frontend web UI by running the following commands:

  aws s3 cp s3://workshop.reinforce.awsdemo.me/feedback-src.tar.gz /tmp/
  cd ~/environment/
  tar xvfz /tmp/feedback-src.tar.gz

Build the code

Now build the front-end code with the following commands:

cd feedback-ui
npm install
npm run build

Run the app inside Cloud9

To run the app locally within Cloud9, run:

npm run serve

Make sure you don't have any compile errors.

Preview the application

Select Preview > Preview Running Application. You will get an error. To fix that, copy the URL from your preview window (without https:// or /), e.g. xxxxxxx.vfs.cloud9.us-east-1.amazonaws.com. Use that to update the URL in the file vue.config.js under the feedback-ui directory.

Cloud9 preview

Refresh the preview window, you should have a web page displayed. If you still have problems, stop npm and run npm run serve again.

Not all features are working yet. Additional configuration is needed from the following steps.

Configure Cognito for authentication

Now, we need to do some additional configuration in Cognito so that users can sign-in via Cognito from our new frontend. Go back to your Cognito user pool and in App client settings, do the following:

  • Enable Cognito User Pool for webapp (mark the checkbox under Enabled Identity Providers)
  • Enter the entire Cloud9 preview URL with /callback appended as the callback URL. For example:

    https://02b97ba28ee44121bc0e2ed09a4e6e99.vfs.cloud9.us-east-1.amazonaws.com/callback

  • Enable Implict grant with openid and profile in Allowed OAuth scopes

  • Confirm your selections look like the below and save changes

App client settings

Now, select Domain name on the left panel, type in a name in the Your domain name field. You can use any valid name as long as it's unique. (for example: feedback-users-shenx). Click Save changes.

Make a note of this domain name, for example: https://feedback-users-shenx.auth.us-east-1.amazoncognito.com

Update UI configuration

Now, we need to update our frontend to use your unique resources. Go back to your Cloud9 editor and open the env.js file under the src directory. Update it with your unique domain URL, client ID, API GW endpoint, and API Key. For example:

export default {
  'AWS_COGNITO_USER_POOL_DOMAIN': 'feedback-users-shenx.auth.us-east-1.amazoncognito.com',
  'AWS_COGNITO_CLIENT_ID': '4ea782m3eaupr6jrv84m031qo2',
  'API_BASE_URL': 'https://tzr1eokf4k.execute-api.us-east-1.amazonaws.com/prod',
  'API_KEY': 'your-api-key-here'
}

Refresh your preview window and you should see the web page.

Configure API gateway for CORS

Now, to successfuly integrate our app with API Gateway, we need to enable cross-origin resource sharing (CORS) for our API. CORS is a browser security feature that restricts cross-origin HTTP requests that are initiated from scripts running in the browser.

Go to API Gateway, select the API we created, and do the following:

  • Select the resource /feedback and open the Actions dropdown.

API Gateway - actions

  • Select Enable CORS and click the button Enable CORS and replace existing CORS headers.

  • A new method OPTIONS has been created. Select it, then click Method Response.

API Gateway - method reponse

  • Make sure you have the following:

API Gateway - status 200

  • Click the link <-Method Execution to return to the previous page

API Gateway - back

  • Under Integration Response, expand the line by clicking the black arrow.

  • Make sure you have the folllowing Header Mappings under the '200' response:

Response header Mapping value
Access-Control-Allow-Headers 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
Access-Control-Allow-Methods 'POST,GET,OPTIONS'
Access-Control-Allow-Origin '*'
  • It should look like the following:

API Gateway - header

  • Click the Actions button again. Select Deploy API, choose the prod stage and click Deploy.

  • Stop and start the app again.

Test from Cloud9

Back in your Cloud9 preview window, try signing into the app and posting some new feedback. If all is configured properly, it should now work.

Use the credentials you created in the previous step, e.g. firstuser/AWS@dmin12345

Warning

If you get an error when you try to sign in from the Cloud9 preview window, you may have to pop out the preview into a new window on your browser by clicking on the button highlighted below: Preview sign in error