Stay Connected, Even Without a Connection
In today’s always-on world, it’s easy to take for granted the constant availability of mobile internet. But the reality is, even in a bustling city like Stuttgart, Germany, there are still pockets of no connectivity. What do you do when you’re stuck without a signal?
The Solution: Offline Capabilities with DataStore
Fortunately, with the DataStore library, part of the Amplify serverless framework for frontend developers, you can now add offline capabilities to your mobile apps with just a few lines of code. In this article, we’ll explore how to integrate AWS Amplify into a React project, enabling offline capabilities and synchronization with a cloud backend on AWS.
Getting Started
Before we dive in, make sure you have the AWS CLI set up correctly, along with Node.js version 12 and NPM version 6. You can use the Cloud9 IDE, which comes pre-installed with these tools.
Setting Up the Project
First, install the create-react-app and amplify CLIs. Create-react-app allows you to set up React apps with a Service Worker easily, which is required to show the app in the browser when offline. Amplify simplifies the connection of your frontend to backend services with a JavaScript library.
Configuring the Project
To initialize a React project and add Amplify services, use the following command. Amplify’s init command will ask you a few questions, which you can answer with the defaults, except for the environment command, where you can use “dev”.
Adding Backend Services
You’ll need two backend services: auth and api. These will allow users to log in and handle synchronization, ensuring user data doesn’t stay on their devices.
Authentication
Add authentication by adding the auth category to your Amplify project. This will create infrastructure as code in the form of CloudFormation templates.
GraphQL API
Add a sync-enabled GraphQL API with the Amplify CLI. Choose “GraphQL” and give the API a name, such as “grocerize”. Use “Amazon Cognito User Pool” as the default authorization type.
Generating Data Models
Update the GraphQL schema and generate models for the DataStore library using Amplify’s code generator.
Deploying Backend Services
Deploy the backend services using the following command. This will take a few minutes to complete, after which you’ll have a fully-fledged AWS powered serverless backend.
Connecting the Frontend
Install the Amplify JavaScript libraries and generate models from your GraphQL code. Update the frontend code to implement the actual frontend logic.
The Result
With just a few CLI commands, you now have a serverless backend with offline capabilities and synchronization. The programming model is simple, and all the heavy lifting is done by DataStore in the background. You can create a grocery list app that works even without an internet connection, and syncs seamlessly when the connection returns.
The Power of AWS Amplify
AWS Amplify is a powerful tool for frontend developers, and the new DataStore with its offline and synchronization capabilities makes it even more pleasant to work with. With Amplify, you can create a serverless backend with everything the average mobile app needs, and its versatility and future-proof design make it an ideal choice for your next project.