# Frontend Component using AWS Amplify Geo and Amazon Location Service

This frontend is using AWS Amplify Geo and Amazon Location Service to display a
map, search for pizza places, and render a real-time location update of your
pizza delivery.

## Structure

This `frontend/` folder contains a partial Amplify app. Use the instructions below to generate the missing pieces.

* `public/` contains an files that will directly be publicly served.
* `src/` contains frontend application code.

## Requirements

Run these commands to install NodeJS packages and Amplify CLI:

* `npm install`
* `npm install -g @aws-amplify/cli` (tested with v7.6.12)

## Initialize new Amplify app

Use this shell snippet to initialize a new Amplify app:

```shell
AMPLIFY=$(cat << EOF
{
  "projectName": "PizzaDeliveryTracker",
  "envName": "dev",
  "defaultEditor": "none"
}
EOF
)

AWSCLOUDFORMATIONCONFIG=$(cat << EOF
{
  "configLevel": "project",
  "useProfile": true,
  "profileName": "pizza"
}
EOF
)

PROVIDERS=$(cat << EOF
{
  "awscloudformation": ${AWSCLOUDFORMATIONCONFIG}
}
EOF
)

amplify init \
  --amplify ${AMPLIFY} \
  --providers ${PROVIDERS} \
  --yes
```

At the end, you should see this success message:

`Your project has been successfully initialized and connected to the cloud!`

### Add auth resources

Run this command to add auth resources and choose the selections as shown: `amplify add auth`

```
Do you want to use the default authentication and security configuration? Default configuration
How do you want users to be able to sign in? Email
Do you want to configure advanced settings? No, I am done.
```

At the end, you should see this success message:

`✅ Successfully added auth resource pizzadeliverytrackerSAMPLE123 locally`

### Add Map resource

Run this command to add a map and choose the selections as shown: `amplify add geo`

```
? Select which capability you want to add: Map (visualize the geospatial data)
✔ Provide a name for the Map: · PizzaDeliveryTrackerMap
✔ Who can access this Map? · Authorized and Guest users
✔ Do you want to configure advanced settings? (y/N) · no
```

At the end, you should see this success message:

```
✅ Successfully updated auth resource locally.
✅ Successfully added resource PizzaDeliveryTrackerMap locally.
```

### Add Location Search / Place Index resource

Run this command to add a location search and choose the selections as shown: `amplify add geo`

```
? Select which capability you want to add: Location search (search by places, addresses, coordinates)
✔ Provide a name for the location search index (place index): · PizzaDeliveryTrackerPlaceIndex
✔ Who can access this search index? · Authorized and Guest users
✔ Do you want to configure advanced settings? (y/N) · no
```

At the end, you should see this success message:

`✅ Successfully added resource PizzaDeliveryTrackerPlaceIndex locally.`

### Add Hosting

Run this command to add a hosting option: `amplify hosting add`

```
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual deployment
```

At the end, you should see this success message:

`You can now publish your app using the following command: amplify publish`

### Configure App Runner as API endpoint

Configure your App Runner default domain in `src/backend-exports.js`

### Build and publish frontend

Run this command to build and publish the frontend code: `amplify publish`

At the end, you should see this success message:

```
✔ Deployment complete!
https://staging.SAMPLE-APP-ID.amplifyapp.com
```

You can now browse to this link and explore the Pizza Delivery Tracker app - Have Fun!

## Local Development

Run these commands:

* `npm install`
* `npm start`

This will compile and package all resources and start a local development server.

### Clean up

Run these commands:

* `amplify delete`

Amplify retains an S3 bucket with deployment artifacts. You can delete them
manually if no longer needed.

## Security Considerations

This component uses Amazon Cognito with default configuration generated by
Amplify. Following the outlined instructions will create a publicly accessible
user pool, allowing unauthenticated guest users can access your site. If
you need to restrict access, consider switching to the advanced settings when
generating the Amplify auth resources.