Setup Webhosting

Add Web Hosting

Hosting with Amplify allows to deploy and host your app using either Amplify Console or Amazon CloudFront/S3. The Amplify Console offers fully managed hosting with features such as instant cache invalidation and atomic deploys. For more control with setting up a CDN and hosting buckets, use CloudFront and S3.

  1. Run this command to setup hosting:
amplify hosting add

We are going to use Hosting with Amplify Console and Manual Deployment:

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

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

  1. After hosting is enabled, publish Frontend code:
amplify publish

Confirm your decision, when prompted:

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name       | Operation | Provider plugin   |
| -------- | ------------------- | --------- | ----------------- |
| Hosting  | amplifyhosting      | Create    | awscloudformation |
| Auth     | traveldealsXXXXXXXX | No Change | awscloudformation |
| Api      | traveldeals         | No Change | awscloudformation |
? Are you sure you want to continue? Yes
...
✔ Deployment complete!
https://dev.XXXXXXXXXXXXXX.amplifyapp.com

Update Amplify Hosting Rewrite rules

Most SPA frameworks support HTML5 history.pushState() to change browser location without triggering a server request. This works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page. Setup following redirects:

  • Using regular expressions, set up a 200 rewrite for all files to index.html except for the specific file extensions specified in the regular expression.
  • To avoid a broken link message when a user enters a bad URL and to point requests to nonexistent pages of a web app to its index.html page for handling by a client-side router function, add 404 redirect to index.html, if address does not exist.

To do this:

  1. Open the Amplify Console.
  2. Choose the app that you want to modify, e.g. traveldeals
  3. In the navigation page choose Rewrites and redirects.
  4. Choose Add rewrites and redirects.
  5. Add two separete rools using these values:
Source address Target address Type Country code
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> /index.html 200 (Rewrite) KEEP BLANK
/<*> /index.html 404 (Redirect) KEEP BLANK
  1. Choose Save.

Result will look like this:

Rewrites and redirects in Amplify Console

Accessing Deployed application

To get the URL of the deployment go to Amplify Console and use Domain value:

Getting Web Application URL in Amplify Console

Or you can run a Amplify CLI command:

amplify status

Output will contain list of added categories and URLs of published resources.

Current Environment: dev

| Category | Resource name       | Operation | Provider plugin   |
| -------- | ------------------- | --------- | ----------------- |
| Auth     | traveldealsXXXXXXXX | No Change | awscloudformation |
| Api      | traveldeals         | No Change | awscloudformation |
| Hosting  | amplifyhosting      | No Change |                   |

GraphQL endpoint: https://XXXXXXXXXXXXXXXXXXXXXXXXXX.appsync-api.us-west-2.amazonaws.com/graphql

Amplify hosting urls: 
┌──────────────┬───────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                    │
├──────────────┼───────────────────────────────────────────┤
│ dev          │ https://dev.XXXXXXXXXXXXXX.amplifyapp.com │
└──────────────┴───────────────────────────────────────────┘