November 19th, 2020

Creating Mobile Applications with Azure Cosmos DB and React Native

Jason Amos
Senior Software Engineer

Cosmos DB and React Native

Building a mobile application with Azure Cosmos DB and React Native is simple… let’s give it the old college try :$. First, let’s set up our environment. I use a Mac, so adjust accordingly. To setup up our environment, we need a few things React Native, Expo, Yarn, snack (optional), and Azure Cosmos DB keys.

Image Screen Shot 2020 11 18 at 6 00 48 AM

Prerequisites

Step 1: Installing Node and Watchman

The official guide suggests using Homebrew to install Node and Watchman. First things first run the below command to install Homebrew

/bin/bash – c “$(curl –fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)”

 

Run the following commands to install Node and Watchman.

brew install node
brew install watchman

Step 2: Creating a new Application

Now all the dependencies are installed, and we can create our new Application. Run this command to create a new React Native App

Expo

npm install --global expo-cli
expo init cosmosdb-react-native

React Native

npx react-native init cosmosdb-react-native

This command creates a new project named cosmosdb-react-native. If you’ve used “gem” to install CocoaPods, you will also need to run the pod command to install all the dependencies.

Running apps using the command line

  • First, navigate to the project folder. cd cosmosdb-react-native then execute this command to run the app in simulator next react-native run-ios
  • Running app with Xcode
  • Locate your app folder, then go to the iOS or Android folder. You will see a file named cosmosdb-react-native.xcworkspace.
  • Open the workspace file. Select an iOS or Android simulator and run your app. Tadaaa!! 🎉 🎊

Step 3: Install Azure Cosmos DB package

https://github.com/Azure/azure-sdk-for-js/tree/master/sdk/cosmosdb/cosmos

NodeJS

Npm comes preinstalled with NodeJS. You should be using Node v10 or above.

npm install --save @azure/cosmos@latest
npm install --save isomorphic-webcrypto
npm install --save react-native-crypto
npm install --save react-native-get-random-values
npm install --save randombytes

Get Account Credentials

You will need your Azure Cosmos DB account endpoint and key. You will find these in the Azure portal or use the Azure CLI snippet below.

This snippet is formatted for the Bash shell.

az cosmosdb show --resource-group <your-resource-group> --name <your-account-name> --query documentEndpoint --output tsv
az cosmosdb list-keys --resource-group <your-resource-group> --name <your-account-name> --query documentEndpoint --output tsv

Create an instance of CosmosClient

Interaction with Azure Cosmos DB starts with an instance of the CosmosClient class. Make sure to follow best practices to securely retrieve your endpoint and master key.

const CosmosClient = require('@azure/cosmos').CosmosClient 
const endpoint = //securely get your endpoint string here
const authOrResourceToken = //securely get your auth or resource token string here from a token broker server-side
const databaseId = 'ToDoList'const containerId = 'Items' 
const client = new CosmosClient({ endpoint, authOrResourceToken })

Create the query spec

const querySpec = {
     query: 'SELECT * from c'
};

Create an instance of CosmosClient

      const response = client
            .database(databaseId)
            .container(containerId)
             .items.query(querySpec)
             .fetchAll()

Source

https://github.com/jay-most/cosmosdb-react-native

https://github.com/jay-most?tab=repositories

Author

Jason Amos
Senior Software Engineer

1 comment

Discussion is closed. Login to edit/delete existing comments.

  • Rich Mercer

    Call me crazy, but I feel really uncomfortable about exposing my DB directly to the internet, and having an app talking to it. At least if there’s anything sensitive in there, and most apps do.