How to deploy a production React Native Amplify front-end to App Store with amplify_outputs.json

@Jaffer Mustafa

How did you go about this? I am going through the same questions in my head

    When deploying a React Native app with AWS Amplify to the App Store, you need to properly handle the connection between your frontend and backend. While amplify_outputs.json is excluded from git repositories by default for security reasons, there are proper approaches to handle this for production deployments.

    For a production React Native app using Amplify, you should:

    1. **Generate a production configuration file**: Instead of directly using amplify_outputs.json in your production build, you should create environment-specific configurations. For Amplify Gen 2, you would download the amplify_outputs.json from your deployed backend resources and place it in your app's repository root during the build process.

    2. **Automate the configuration**: You can set up your CI/CD pipeline to automatically download and include the latest amplify_outputs.json during the build process. This ensures your production app always connects to the correct backend resources.

    3. **Configure Amplify in your app**: In your React Native app's initialization code (typically in App.js or similar), you need to import and configure Amplify with your backend configuration:
    ```
    import Amplify from 'aws-amplify';
    import aws_exports from './amplify_outputs.json'; // or your config path
    Amplify.configure(aws_exports);
    ```

    4. **Build for production**: When building your app for App Store submission, ensure the build process includes the proper configuration file. For Expo builds, you can use EAS Build or the traditional expo build process, making sure the amplify_outputs.json is included in the build.

    5. **Create a signed build**: Generate a production-ready, signed build of your app that includes all necessary configurations.

    6. **Test thoroughly**: Before submission to the App Store, test your production build to ensure it correctly connects to your Amplify backend services.

    This approach ensures your production app can securely connect to your Amplify backend while maintaining proper security practices by not committing sensitive configuration to your source code repository.
  

Sources
Fullstack TypeScript: Reintroducing AWS Amplify | Front-End Web & Mobile
Get Started - AWS Mobile Hub
Working with AWS AppSync Events: Serverless WebSockets for Pub/Sub | Front-End Web & Mobile
How to launch the app after completing the Frontend and Backend using amplify | AWS re:Post