Deploying React Native Apps in the Cloud

Rate this content
Bookmark

Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.


Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.


In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.

Cecelia Martinez
Cecelia Martinez
88 min
23 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Welcome to the Workshop on AppFlow and Setup! This workshop covers the setup and prerequisites for AppFlow, including debug builds, native cloud builds, and app store deployment. It also explains how to connect your app to AppFlow, initiate builds, and manage build stacks and test devices. The workshop covers code signing for iOS and Android, generating signing certificates and upload keys, and deploying apps to the App Store and Google Play. It also provides insights into app testing, releases, and submission processes, as well as resources for further information and support.

Available in Español

1. Introduction to AppFlow and Setup

Short description:

Welcome, Praeten. I'm a developer advocate for AppFlow, a platform for building cross-platform applications. Connect with me on Twitter and GitHub. Let's get started with the setup and prerequisites. We'll cover debug builds, native cloud builds, and app store deployment. Fork the provided repo if you don't have a react native app. You'll need Xcode and Android Studio for generating signing credentials.

Please welcome Praeten. Praeten. Let's get started. Welcome, Praeten.

Just to get started, a little bit about me. I'm a developer advocate for AppFlow. AppFlow is a platform for building cross-platform applications similar to React Native. But AppFlow works with all types of apps. So you can build Ionic apps, React Native apps, Swift apps, Kotlin apps. So it's really built for any type of development. But it works really well with cross-platforms specifically, which is why we're going to be talking about React Native apps today. You can feel free to connect with me on Twitter and GitHub. My username is at Cecilia Creates. You can also feel free to email me, Cecilia at ionic.io.

My background is actually in web development. I was a web developer, I also previously worked at Cypress, which is a testing framework and RePlay, which is a debugging tool. Both are open source dev tools just like Ionic. So I really have a passion for open source dev tools and working with those, and working with developers. So as we go along, if you end up with any testing or debugging questions, I can probably help with those as well.

So, yeah, that will leave me. Like I said, we can keep things casual today as we go through the agenda. So the first thing that we're going to do is we're going to make sure that we're all set up with the apps that we need to build. So we'll talk about the setup and the prerequisites that we'll need. As I go through the prerequisites, if you don't have all the accounts, that's okay. You can still get something from this presentation, and we'll also be sharing the slides and all the resources that you can take those with you and work on your own apps if you don't have everything that you need today.

Then we're going to get started with debug builds. So debug builds are kind of quick and easy ways to quickly build your app for debugging purposes. After that, we'll probably take a little bit of a break, and we'll see how we're doing on time. And then we'll go into native cloud builds. So that's how you can build your application for iOS and Android natively, using the cloud service Outflow. And then we'll also walk through an app store deployment. So we're going to be deploying to... We have a couple of options. I have Google Play internal test tracks, and we also have iOS test flight. So depending on what you prefer, I'm probably going to go with test flight, because most people prefer to do iOS. So we'll get started with that, and I'll share the instructions for the other platform as well.

So yeah, so let's get started with our setup. So ideally, you already have a git repo of a react native app with no existing CICD infrastructure. If you do not, I'm going to go ahead and share a repo in the chat that you can fork. And this is just an initial react-native-vanilla react-native-cli kind of app. That initial commit, I just made sure that automatic signing was enabled in Xcode and, you know, kind of, like, made a little bit of change to, like, the text in the background. So it's a really, you know, very out-of-the-box basic app that—if you need one to use. And so you can go ahead and fork this and use this for building. Later on, you will need to update the bundle identifiers, and we'll talk about that as we go through if you use this one. So I'll give a few minutes for people to get that set up, if they need to, if they need to fork, as I walk through the rest of the prerequisites. So you will also need Xcode and Android Studio. Now, you need these, if you want to actually go through the process of generating, like, your— well, yeah, your sign, certificate, and everything, to get to, like, the native build part. That's because you will need to use Xcode and Android Studio to generate the signing credentials, for the most part. You can get away with it. There's some other, like, paths that you can use to get your signing credentials.

2. AppFlow Setup and Debug Builds

Short description:

To get started, make sure you have Xcode and Android Studio installed. We'll create an AppFlow account, which is free and comes with native iOS and Android builds. If you want to deploy to the App stores, you'll need an Apple developer account and an App Store Connect account. For Google Play deployment, you'll need a Google Play Console account. We'll start with debug builds, which are quick and don't require full configuration. On Android, debug and release builds are available, while on iOS, debug builds refer to simulator builds. We'll also set up our GitHub repo and create an account on nxio.com, where we'll deploy our applications and create Cloud data builds.

But Xcode and Android Studio is the easiest way. So if you don't have those installed on your machine, let me know. I'm happy to share some instructions for how you can generate those credentials in a different way. We may just not cover that together.

And we'll also be creating an AppFlow account as part of the workshop today. It's a free account. It comes with native iOS and Android builds to get you started. And then we will also, if you would like to go through the process of connecting and actually deploying to the App stores, you do need an Apple developer account. If you want to create any kind of iOS build outside of simulator builds, an Apple developer account, there is a cost associated with it. It's like $99 per year. So again, I can demonstrate all of this functionality without you having to walk through it. And I'll share those resources. You may, for example, have a company account that you would use at work, but you don't want to use it today. And so that's something that I can just walk through and share the screen for. You'll also need an App Store Connect account. If you want to deploy to TestFlight, into the App store. Those are two separate accounts, Apple Developer Account and App Store Connect, but they are joined by the same App ID, Apple Store ID. And then you also, there's a Google Play Console account if you want to be able to deploy to Google Play for test track deployment.

We'll go ahead and then start get started with with debug build. So I want to talk about debug build. What I'm referring to is that there's specific build types, when you come and it comes to native applications. When you're building for the web, like you just have a build and maybe you have like a test build or a staging build, and then you have a production build. But you kind of decide that yourself as a developer when you're deploying your application. For mobile applications, there are very specific build types that you need to choose. And we talked about build types for Android, we have debug and release builds. Debug is essentially a quick build. It doesn't have to be fully configured that you can then share with like your testers, internal stakeholders. Release builds are required for deploying to Google Play. On the iOS side, when I'm talking about debug builds, I'm really referring to a simulator build. So a simulator build can run on a simulator, it does not need to be signed, which makes it easier to build to get right out of the gate within a build. You also have development builds which can be run on device, typically locally that one that's connected to your computer. And then you have ad hoc app store and enterprise builds, which are used for kind of distributing to other users. So I'm talking about the debug builds, I'm primarily referring to Android debug builds. But you can also think of simulator builds as a debug build.

The first thing that we'll do is make sure that we have our GitHub repo set up. Does anyone need more time to get a fork or a repo ready to go? Feel free to just raise your hand or pop in the chat if you need some more time.

Ok, cool. Alright, so we're going to go to this, I'll pop this in the chat. It's just, um, nxio.com. And we're going to go ahead and create an account. This will allow us to walk through the process of deploying our applications and creating Cloud data builds. So just click this, like, get started free button. Um, it's going to prompt you to create an account. Ah, it's a free account. Don't need to put in a credit card or anything like that, you can get started with free apps. So, I'll give a couple minutes here, you can either create an account with GitHub if you like, or you can create an account with an email and password. And then, uh, once you have created an account, um, you will, you'll end up at a dashboard. It kind of looks like this, um, I have a lot of apps in there already because I'm using my account, ah, but yours will, you'll be able to kind of see a sidebar here and you'll have some blocks, um, in the middle here, with, um, with a kind of like a welcome message. This is our AppFlow dashboard. The AppFlow dashboard essentially is where you're, uh, we'll import your apps and you can initiate builds.

Watch more workshops on topic

Introducing FlashList: Let's build a performant React Native list all together
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
How to Build an Interactive “Wheel of Fortune” Animation with React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
Build and Deploy a Backend With Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
Effective Detox Testing
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
Josh Justice
Josh Justice
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
Learn more about how to leverage the default features of npm workspaces to help you manage your monorepo project while also checking out some of the new npm cli features.
Automating All the Code & Testing Things with GitHub Actions
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
Fine-tuning DevOps for People over Perfection
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Top Content
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
Why is CI so Damn Slow?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
The Zen of Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.
Raising the Bar: Our Journey Making React Native a Preferred Choice
React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.