1. Application Configuration

Fix the application configuration

We received a tip from one of the remaining UnicornGames developers that a certain config file is an important piece of the Alien Attack application. If it’s not properly configured, the application will not run.

What are we fixing? The config file for the downloaded application is missing some critical information about your AWS backend.

Hint: Click here to see a diagram of your broken architecture.

Solution Guidance

In the Cloud9 Console, open the file aws-alien-attack/application/resources/js/awsconfig.js. It should look something like this:

const DEBUG = true;
const AWS_CONFIG = {
    "region" : "<region where the env is deployed>",
    "API_ENDPOINT" : "<API Gateway invoke URL>/v1/",
    "APPNAME" : "<name of the application>"
}

You need to replace the <> fields with values related to the Alien Attack environment that you have just deployed using the AWS CDK. These values are the same ones you just copied over from the Outputs section when you ran cdk deploy. If you need to find them again, follow the instructions below:

  1. Find the API Endpoint for your API_ENDPOINT field:

    1. Open the Amazon API Gateway Console in a new browser tab. This is where you’ll find the API being used for Alien Attack. If you see the API Gateway landing page, click Get Started to navigate past this. Make sure you are still in the region you chose at the beginning of this workshop.
    2. Select the API that has the Environment Name you chose during Environment Setup.
    3. Select Stages and then select prod to visit the production version of your API.
    4. Towards the top right of your screen you will see an Invoke URL with the format https://API-ID.execute-api.REGION.amazonaws.com/prod. Copy this Invoke URL and paste it into the API_ENDPOINT field inside of awsconfig.js. Add /v1/ to the end of that API_ENDPOINT value that you just pasted in.

  2. Find the region for your region field: The region will be the same region you’ve been working in for this workshop. You can extract the region name from your API Endpoint. It will look something like “us-west-2”, varying based on which region you are working out of.

  3. Find the Application Name for your APPNAME field: This one is easy. Simply copy the value that you have selected for YourEnvironmentName, but make sure to convert this value to UPPERCASE. For example, if your environment name was alien123456789012, then the value for this field would be ALIEN123456789012.

If you entered everything correctly, your aws_config.js file will look something like this:

const DEBUG = true;
const AWS_CONFIG = {
    "region" : "us-west-2",
    "API_ENDPOINT" : " https://x22cd4aa99.execute-api.us-west-2.amazonaws.com/prod/v1/",
    "APPNAME" : "ALIEN123456789012"
}
Stuck? Click here for a Fast Fix

If you’re developing with a local terminal and IDE, be sure to save the config file using UTF-8 (pure text). Avoid editors that save the files with special characters. Don’t forget to maintain the quotes in the config file’s fields. e.g. “region” : “us-west-2”. Always remember to use uppercase for the value of the field APPNAME.