Search code examples
react-nativedeploymentgithub-actionsaws-amplifycicd

How do I connect a React Native Amplify project's backend to my frontend hosted on the mobile stores?

I am working on a Gen1 V6 React Native application with AWS cli that utilizes Amplify with Cognito and the built-in UI for authentication that Amplify provides. Eventually will be including AWS Chime for Video Conferencing/Messaging functionality.

If I want to release to the mobile stores, how would I connect the frontend to my backend in Amplify? Do I need to also deploy my frontend to Amplify in order to do this or can I keep backend only in Amplify and frontend hosted on Google Playstore and Apple Store?

So far I have a dev, test and prod env setup in my Amplify backend and they all have Cognito through Amplify Auth and the UI that comes with it. I have associated branches in Github but I'm not sure if I need to link them to the backend resources from Github or if my application code can handle routing to the correct backend resources.

Solution

  • Flow: App Frontend (Mobile Stores) -> Amplify Backend (Cognito, AWS Chime) [Environment-based routing]

    To connect your React Native Amplify project's backend to your frontend hosted on mobile stores (e.g., Google Play Store, Apple App Store), follow these steps:

    1. Deploy your backend: ensure to deploy amplify backend to desired environment (dev, test, prod). This step includes Cognito setup and any other backend resources.

      To deploy backend resources: amplify push To check the status of backend resources: amplify status

    2. Integrate Amplify SDK: install Amplify libs and config them to connect to your deployed backend. This includes configuring Amplify Auth for user auth.

      To install Amplify libraries: npm install aws-amplify To configure Amplify in your app: amplify configure

    3. Deploy your frontend:
      you can deploy your frontend to Amplify, but it's not must for connecting to the backend. Deploying the frontend to Amplify can simplify the cd process. To deploy frontend to Amplify: amplify publish

    4. Link frontend to backend: Your code should handle routing to the correct backend resources based on the env (dev, test, prod). Use .env file to specify the backend URLs for each environment.

    5. Release your app: Once your frontend is integrated with Amplify backend and tested, you can release your app to the mobile stores. Ensure that your app is configured to use the correct backend environment (dev, test, prod) based on the store release.