Standardizing Mobile Apps with AWS Amplify and React Native

Standardizing mobile apps with AWS Amplify and React Native

Getting Started Building Mobile Applications Has Never Been Simpler

In the world of tech today there appear to be about a gazillion ways of doing things, and it’s easy to get lost amid all the buzzwords floating around. This situation can be particularly painful if you’re working for an organisation that has several ongoing projects, with multiple teams having multiple ways of working. It’s hard to promote consistency between projects and foster a shared knowledge base among your engineers.

This post is a (technical) suggestion of how to alleviate some of these woes, leveraging well-established modern technologies such as AWS Amplify and React Native, with a shameless plug at the end into our very first, recently published open-source project at Concentrix Catalyst: Tigerbud.

Side note: React Native is in fashion these days and seems to be here to stay. Without getting into the whole native vs. hybrid app debate that RN kinda tries to eclipse (there are enough online discussions to follow along), more and more people and companies are adopting RN as a real alternative to “traditional” native apps.

There are plenty of resources to help you navigate the intricacies of the setup with Amplify and React Native (including Amplify’s own tutorial). React Native tooling can be especially tricky; a small price to pay for the awesomeness you end up with.

What I really want to shine a light on is yet another example of AWS brilliance. That’s Amplify’s subtle but powerful idea behind the –app flag of the amplify init command: with it you can take any project hosted on GitHub and, via a single command, make it a template, a blueprint for further development. But I’m getting ahead of myself.

First, let’s quickly walk through the simplest of examples. Again, there are a ton of resources to help you with installing dependencies and troubleshooting any issues with them, so I’ll just assume you already have a recent version of Node (and NPM), as well as the Amplify CLI, ready to go. We’ll be using create-react-native-app to bootstrap a React Native sample application. Navigate on your terminal to a folder of your choosing and run:

npx create-react-native-app –use-npm

Enter y if you’re prompted to install the create-react-native-app package (also, make sure your project path doesn’t include spaces or slashes in folder names, as that may cause weird errors). Then choose a name for your app and the default template. Your output should look like this (my app name is how-great-is-amplify-rn):

If you want to have a peak at your sample application in the browser, go ahead and run npm run web, entering y if you’re prompted to install the Expo CLI.

Now, this point is when you would add all the common parts, either new or existing — custom styles, custom components, etc. — for building mobile apps and that you want all of your projects to share.

Turning into the infrastructure side, let’s initialise the AWS connection with:

amplify init

Give your project a name (I went with HowGreatIsAmplifyRN), accept the default configuration and authenticate with the AWS profile you should’ve previously set up during the Amplify installation. This will initialise the Amplify project in AWS, setting up a few CloudFormation stacks with some IAM roles and an S3 bucket for deployments.

From here, you can add cloud functionality as you see fit. For example, most apps require some sort of authentication, which you can easily add with the amplify add auth command. They also normally connect to a backend API, for which there is amplify add api. Follow the respective guides for how to wire up the services in your app code.

Note that most AWS Amplify infrastructure service resources (e.g. Cognito user pools, AppSync GraphQL APIs, Lambda functions, etc.) are serverless and follow the pay-as-you-go pricing model. As long as you don’t start bombarding your system with many requests, you can remain under the free umbrella. One less reason not to give all of it a try.

Setting the Standard

Let’s go back to the standardization idea. Once you have the foundation you want all your projects to be built from, you can store that foundation in a GitHub repository. After that, you can start taking advantage of Amplify’s templating capability, introduced a couple of years ago. It’s really as simple as a single command:

amplify init –app [your-GitHub-project-url]

This command will download your foundation, automatically configure an Amplify environment that mirrors all of its cloud resources, and connect the mobile application to those resources. In sum, all the heavy lifting is pretty much taken care of, and you end up with a ready-to-roll copy of your centralised project which you can begin tailoring to specific requirements.

Go ahead and run amplify console, select the Amplify console option and marvel at your AWS resources. That’s that!

Just beware of a couple of considerations:

Think about maintainability. Although it’s simple enough to add and remove components, either on the FE or BE, a number of the involved technologies (e.g. the Amplify CLI) are being updated at breakneck speed, so keep an eye out for breaking changes.

There is a clear limitation: at the moment there is no easy way to introduce new features of your template in a project after it has been initialized. You can hone those features over time but they can only be applied from the start of new projects, not backfilled into previous ones.

Ok, I Get the Idea…But Where Do I Go From Here?

Depending on your (or your team’s) technical prowess, you may or may not have the capability to build the app components I talked about, or to link them to the infrastructure apparatus.

If you do, you could argue that all you ended up with is a glorified template. I would counter that to do so in virtually no time and in a way that is repeatable is no mean feat.

If you don’t, you might be a bit overwhelmed and thinking “heck, it would be nice if there was an off-the-shelf template with some pre-built UI and AWS resources”. Personally, I haven’t found many. And that’s the gap we’re trying to fill with the Tigerbud starter.

Instead of bits of this and that, with the magic command I mentioned above — amplify init —-app https://github.com/tigerspike/tigerbud-starter — you get a full set of (customizable) app components already linked to some sample BE services. Easier than ever to get started! Make sure you check out the repo for many more details.

In any case, granted: all the above only represents about the first 10 kms of the marathon, so to speak. At Concentrix Catalyst we are looking at using this sort of technique to standardise and expedite project preparation, cutting down time, effort and costs. On top of that, we have the expertise to transform this “glorified template” into an actual product, following best practices both at the UX/UI level as well as the AWS cloud and mobile engineering.

Whether you’re a beginner or seasoned veteran, part of a small company or a large enterprise, reach out to us and we can help you with those 30 odd kms left to go.

Feel free to leave any suggestions either on the comments below or by opening an issue on Tigerbud’s GitHub. Thanks for reading.

Learn more about our partnership with AWS.