Setting up the Expo Project
Refer the below video👇
If you open the default app you can observe that the package.json file looks like:
If you open the default app you can observe that the app.json file looks like
Integrating the project aws amplify
The first step would be to create an app to work with. Since I’ve already created an app, I’ll skip to the part where we initialize AWS Amplify.
| amplify init |
Next, all we need to do is select all the default settings that are thrown at us. Pick a name for your project, a name for the environment , the default editor and the type of app that we’re building. Then it will ask you the JavaScript Framework we’re using, whether you want to create a source directory path, a distribution directory path, the build command and the start command.
Here are my settings:
Next, it will ask you to answer a few more questions that are pretty straightforward but if you get confused, just select the default options they provide and you’ll be able to proceed without any hiccups.
Once complete, you should see the following message:
Adding API
Now we will run the following command to add the API:
| amplify add api |
This will present you with another set of questions that are pretty easy to answer. When selecting the authorization type, you can either select API Key or Amazon Cognito User Pool. I prefer the latter because it makes protected requests, which means that you can only make calls to POST if you’re logged in with your cognito username.
Here are my settings for this step:
When you navigate to the src/amplify/ you can see the following:
Once you save the schema, run amplify push to Host the GraphQL API so that we can make requests to and from it.
To deploy this backend, run the push command:
amplify push| ? Are you sure you want to continue? Y # You will be walked through the following questions for GraphQL code generation ? Do you want to generate code for your newly created GraphQL API? Y ? Choose the code generation language target: javascript ? Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/**/*.js ? Do you want to generate/update all possible GraphQL operations – queries, mutations and subscriptions? Y ? Enter maximum statement depth [increase from default if your schema is deeply nested]: 2 |
Next, run the following command to check Amplify’s status:
amplify statusThis will give us the current status of the Amplify project, including the current environment, any categories that have been created, and what state those categories are in. It should look similar to this:
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | ----------------- |
| Api | myapi | No Change | awscloudformation |Authentication Setup
The next feature you will be adding is authentication.
Authentication with Amplify
| amplify add auth ?Do you want to use the default authentication and security configuration? Default configuration ? How do you want users to be able to sign in? Username ? Do you want to configure advanced settings? No, I am done. |
To deploy the service, run the push command:
amplify pushUse amplify push once again to push the changes. You should look at the All resources are updated in the cloud message, which means the operation has completed successfully.
Now, the authentication service has been deployed and you can start using it. To view the deployed services in your project at any time, go to Amplify Console by running the following command:
amplify consoleWhen you navigate to the src/amplify/auth/ you can see the following:
Deploy and host app
You’ve successfully built your first app with Amplify! Now that you’ve built something, it’s time to deploy it to the web with Amplify Console!
Publish your app
Run the following command to publish your app.
amplify publishđź‘Ź Congratulations, your app is online!
After publishing, your terminal will display your app URL hosted on a amplifyapp.com domain. Whenever you have additional changes to publish, just re-run the amplify publish command.
🎉 Congratulations! Your app is built, with a realtime backend.