Deploying the App With Admin Console

All of the work we have done so far has been awesome… but the app is running locally on our machine or cloud9. In this section, you will deploy your app to production by using the Amplify Console via the Amplify CLI. You can learn more about the various Hosting capabilities of the Amplify console here.

Deploying with the Amplify CLI

From your cloud9 terminal in the graphql-real-time-race/ directory, run the following commands:

amplify add hosting

Choose these options:

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

then

amplify publish

The amplify CLI creates a production build of the React app and publishes using Amplify Console.

You can click on the amplifyapp.com link and pick up with your app right where you left off. Sign in to see the events and the ones your starred!

Since you are deploying a Single Page Application (SPA) with multiple pages supported with React Router, you need to set up redirects so that users can directly navigate to the pages. From the terminal, type

amplify console

and select Amplify Console. Click on Rewrites and redirects, and add this rule:

Source address* Target address* Type*
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/> /index.html 200 (Rewrite)
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

The rule redirect any request that is not for a well known static asset to the /index.html page.