diff --git a/generatePathMap.cjs.js b/generatePathMap.cjs.js index d1562163a0a..dd57d679000 100644 --- a/generatePathMap.cjs.js +++ b/generatePathMap.cjs.js @@ -1,153 +1,156 @@ // eslint-disable-next-line @typescript-eslint/no-var-requires -const fs = require("fs"); +const fs = require('fs'); function generatePathMap( obj, pathMap = { - "/": { - page: "/", + '/': { + page: '/' }, - "/404": { - page: "/404", + '/404': { + page: '/404' }, - "/start": { - page: "/start", + '/start': { + page: '/start' }, - "/start/q/integration/js": { - page: "/start/q/integration/[integration]", + '/start/q/integration/js': { + page: '/start/q/integration/[integration]' }, - "/start/q/integration/react": { - page: "/start/q/integration/[integration]", + '/start/q/integration/react': { + page: '/start/q/integration/[integration]' }, - "/start/q/integration/angular": { - page: "/start/q/integration/[integration]", + '/start/q/integration/angular': { + page: '/start/q/integration/[integration]' }, - "/start/q/integration/vue": { - page: "/start/q/integration/[integration]", + '/start/q/integration/vue': { + page: '/start/q/integration/[integration]' }, - "/start/q/integration/next": { - page: "/start/q/integration/[integration]", + '/start/q/integration/next': { + page: '/start/q/integration/[integration]' }, - "/start/q/integration/android": { - page: "/start/q/integration/[integration]", + '/start/q/integration/android': { + page: '/start/q/integration/[integration]' }, - "/start/q/integration/react-native": { - page: "/start/q/integration/[integration]", + '/start/q/integration/react-native': { + page: '/start/q/integration/[integration]' }, - "/start/q/integration/ionic": { - page: "/start/q/integration/[integration]", + '/start/q/integration/ionic': { + page: '/start/q/integration/[integration]' }, - "/start/q/integration/ios": { - page: "/start/q/integration/[integration]", + '/start/q/integration/ios': { + page: '/start/q/integration/[integration]' }, - "/start/q/integration/flutter": { - page: "/start/q/integration/[integration]", + '/start/q/integration/flutter': { + page: '/start/q/integration/[integration]' }, - "/lib/q/platform/flutter": { - page: "/lib/q/platform/[platform]", + '/lib/q/platform/flutter': { + page: '/lib/q/platform/[platform]' }, - "/lib/q/platform/android": { - page: "/lib/q/platform/[platform]", + '/lib/q/platform/android': { + page: '/lib/q/platform/[platform]' }, - "/lib/q/platform/ios": { - page: "/lib/q/platform/[platform]", + '/lib/q/platform/ios': { + page: '/lib/q/platform/[platform]' }, - "/lib/q/platform/js": { - page: "/lib/q/platform/[platform]", + '/lib/q/platform/js': { + page: '/lib/q/platform/[platform]' }, - "/ui/q/framework/react": { - page: "/ui/q/framework/[framework]", + '/lib/q/platform/react-native': { + page: '/lib/q/platform/[platform]' }, - "/ui/q/framework/react-native": { - page: "/ui/q/framework/[framework]", + '/ui/q/framework/react': { + page: '/ui/q/framework/[framework]' }, - "/ui/q/framework/angular": { - page: "/ui/q/framework/[framework]", + '/ui/q/framework/react-native': { + page: '/ui/q/framework/[framework]' }, - "/ui/q/framework/vue": { - page: "/ui/q/framework/[framework]", + '/ui/q/framework/angular': { + page: '/ui/q/framework/[framework]' }, - "/ui/q/framework/ionic": { - page: "/ui/q/framework/[framework]", + '/ui/q/framework/vue': { + page: '/ui/q/framework/[framework]' }, - "/ui/q/framework/flutter": { - page: "/ui/q/framework/[framework]", + '/ui/q/framework/ionic': { + page: '/ui/q/framework/[framework]' }, - "/ui/q/framework/next": { - page: "/ui/q/framework/[framework]", + '/ui/q/framework/flutter': { + page: '/ui/q/framework/[framework]' }, - "/ui-legacy/q/framework/react": { - page: "/ui-legacy/q/framework/[framework]", + '/ui/q/framework/next': { + page: '/ui/q/framework/[framework]' }, - "/ui-legacy/q/framework/react-native": { - page: "/ui-legacy/q/framework/[framework]", + '/ui-legacy/q/framework/react': { + page: '/ui-legacy/q/framework/[framework]' }, - "/ui-legacy/q/framework/angular": { - page: "/ui-legacy/q/framework/[framework]", + '/ui-legacy/q/framework/react-native': { + page: '/ui-legacy/q/framework/[framework]' }, - "/ui-legacy/q/framework/vue": { - page: "/ui-legacy/q/framework/[framework]", + '/ui-legacy/q/framework/angular': { + page: '/ui-legacy/q/framework/[framework]' }, - "/ui-legacy/q/framework/ionic": { - page: "/ui-legacy/q/framework/[framework]", + '/ui-legacy/q/framework/vue': { + page: '/ui-legacy/q/framework/[framework]' }, - "/ui-legacy/q/framework/next": { - page: "/ui-legacy/q/framework/[framework]", + '/ui-legacy/q/framework/ionic': { + page: '/ui-legacy/q/framework/[framework]' }, - "/sdk/q/platform/js": { - page: "/sdk/q/platform/[platform]", + '/ui-legacy/q/framework/next': { + page: '/ui-legacy/q/framework/[framework]' }, - "/sdk/q/platform/android": { - page: "/sdk/q/platform/[platform]", + '/sdk/q/platform/js': { + page: '/sdk/q/platform/[platform]' }, - "/sdk/q/platform/ios": { - page: "/sdk/q/platform/[platform]", + '/sdk/q/platform/android': { + page: '/sdk/q/platform/[platform]' }, - "/sdk/q/platform/flutter": { - page: "/sdk/q/platform/[platform]", + '/sdk/q/platform/ios': { + page: '/sdk/q/platform/[platform]' }, - "/console": { - page: "/console", + '/sdk/q/platform/flutter': { + page: '/sdk/q/platform/[platform]' }, - "/cli": { - page: "/cli", + '/console': { + page: '/console' }, - "/cli/function": { - page: "/cli/function", + '/cli': { + page: '/cli' }, - }, + '/cli/function': { + page: '/cli/function' + } + } ) { for (const [_, value] of Object.entries(obj)) { - const {items, filters, route, productRoot} = value; + const { items, filters, route, productRoot } = value; if (productRoot) { - const {route} = productRoot; + const { route } = productRoot; - let filterKind = ""; - if (route.startsWith("/cli") || route.startsWith("/console")) { - filterKind = ""; - } else if (route.startsWith("/lib")) { - filterKind = "platform"; - } else if (route.startsWith("/sdk")) { - filterKind = "platform"; - } else if (route.startsWith("/ui")) { - filterKind = "framework"; - } else if (route.startsWith("/guides")) { - filterKind = "platform"; - } else if (route.startsWith("/start")) { - filterKind = "integration"; + let filterKind = ''; + if (route.startsWith('/cli') || route.startsWith('/console')) { + filterKind = ''; + } else if (route.startsWith('/lib')) { + filterKind = 'platform'; + } else if (route.startsWith('/sdk')) { + filterKind = 'platform'; + } else if (route.startsWith('/ui')) { + filterKind = 'framework'; + } else if (route.startsWith('/guides')) { + filterKind = 'platform'; + } else if (route.startsWith('/start')) { + filterKind = 'integration'; } - if (filterKind !== "") { - const aOrAn = "aeiou".includes(filterKind[0]) ? "an" : "a"; + if (filterKind !== '') { + const aOrAn = 'aeiou'.includes(filterKind[0]) ? 'an' : 'a'; pathMap[route] = { - page: "/ChooseFilterPage", + page: '/ChooseFilterPage', query: { address: route, - directoryPath: "/ChooseFilterPage", + directoryPath: '/ChooseFilterPage', filterKind: filterKind, - message: `Choose ${aOrAn} ${filterKind}:`, - }, + message: `Choose ${aOrAn} ${filterKind}:` + } }; } } @@ -157,12 +160,12 @@ function generatePathMap( } if (!filters || !filters.length) { - let page = ""; + let page = ''; const mdxSrc = `${route}.mdx`; const tsxSrc = `${route}.tsx`; - const maybeMDXFile = "./src/pages" + mdxSrc; - const maybeTSXFile = "./src/pages" + tsxSrc; + const maybeMDXFile = './src/pages' + mdxSrc; + const maybeTSXFile = './src/pages' + tsxSrc; if (fs.existsSync(maybeTSXFile)) { page = tsxSrc; @@ -172,18 +175,18 @@ function generatePathMap( if (page.length) { pathMap[route] = { - page: route, + page: route }; } continue; } - let page = ""; - let routeType = ""; - ["platform", "framework", "integration"].forEach((type) => { + let page = ''; + let routeType = ''; + ['platform', 'framework', 'integration'].forEach((type) => { const src = `${route}/q/${type}/[${type}].mdx`; - const maybeFile = "./src/pages" + src; + const maybeFile = './src/pages' + src; if (fs.existsSync(maybeFile)) { page = src; routeType = type; @@ -197,35 +200,35 @@ function generatePathMap( // generate for _all_ filters -- unsupported filters will just generate ChooseFilterPages, which is what we want // ideally misspellings would also map to a ChooseFilterPage, but this doesn't work with SSG let allFilters = filters; - if (routeType !== "") { + if (routeType !== '') { allFilters = [ - "js", - "android", - "ios", - "flutter", - "react", - "react-native", - "angular", - "vue", - "ionic", - "next", + 'js', + 'android', + 'ios', + 'flutter', + 'react', + 'react-native', + 'angular', + 'vue', + 'ionic', + 'next' ]; } allFilters.forEach((filter) => { - pathMap[route + "/q/" + routeType + "/" + filter] = { - page: `${route}/q/${routeType}/[${routeType}]`, + pathMap[route + '/q/' + routeType + '/' + filter] = { + page: `${route}/q/${routeType}/[${routeType}]` }; }); - const aOrAn = "aeiou".includes(routeType[0]) ? "an" : "a"; + const aOrAn = 'aeiou'.includes(routeType[0]) ? 'an' : 'a'; pathMap[route] = { - page: "/ChooseFilterPage", + page: '/ChooseFilterPage', query: { address: route, - directoryPath: "/ChooseFilterPage", + directoryPath: '/ChooseFilterPage', filterKind: routeType, filters: filters, - message: `Choose ${aOrAn} ${routeType}:`, - }, + message: `Choose ${aOrAn} ${routeType}:` + } }; } return pathMap; diff --git a/src/directory/directory.js b/src/directory/directory.js index acb4b225c80..7bbbab8dca2 100644 --- a/src/directory/directory.js +++ b/src/directory/directory.js @@ -21,12 +21,12 @@ const directory = { { title: 'Prerequisites', route: '/lib/project-setup/prereq', - filters: ['android', 'ios', 'flutter'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Create your application', route: '/lib/project-setup/create-application', - filters: ['android', 'ios', 'flutter'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Null safety', @@ -76,37 +76,52 @@ const directory = { { title: 'Getting started', route: '/lib/analytics/getting-started', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Record events', route: '/lib/analytics/record', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] + }, + { + title: 'Update Endpoint', + route: '/lib/analytics/update-endpoint', + filters: ['js', 'react-native'] }, { title: 'Automatically track sessions', route: '/lib/analytics/autotrack', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] + }, + { + title: 'Enable/Disable Analytics', + route: '/lib/analytics/enable-disable', + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Identify user', route: '/lib/analytics/identifyuser', - filters: ['android', 'flutter', 'ios'] + filters: ['android', 'flutter', 'ios', 'react-native', 'js'] }, { title: 'Streaming analytics data', route: '/lib/analytics/streaming', - filters: ['js'] + filters: ['js', 'react-native'] + }, + { + title: 'Create a custom analytics plugin', + route: '/lib/analytics/create-custom-plugin', + filters: ['js', 'react-native'] }, { title: 'Storing analytics data', route: '/lib/analytics/storing', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Personalized recommendations', route: '/lib/analytics/personalize', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Escape hatch', @@ -116,7 +131,7 @@ const directory = { { title: 'Use existing AWS resources', route: '/lib/analytics/existing-resources', - filters: ['android', 'flutter', 'ios'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] } ] }, @@ -126,62 +141,57 @@ const directory = { { title: 'Getting started', route: '/lib/graphqlapi/getting-started', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Concepts', route: '/lib/graphqlapi/concepts', - filters: ['android', 'flutter', 'ios', 'js'] - }, - { - title: 'Create or re-use existing backend', - route: '/lib/graphqlapi/create-or-re-use-existing-backend', - filters: ['js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Configure authorization modes', route: '/lib/graphqlapi/authz', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Create, update, delete data', route: '/lib/graphqlapi/mutate-data', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Fetch data', route: '/lib/graphqlapi/query-data', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Subscribe to data', route: '/lib/graphqlapi/subscribe-data', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Cancel API requests', route: '/lib/graphqlapi/cancel-request', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Offline scenarios', route: '/lib/graphqlapi/offline', - filters: ['js'] + filters: ['js', 'react-native', 'flutter', 'android', 'ios'] }, { title: 'GraphQL from NodeJS', route: '/lib/graphqlapi/graphql-from-nodejs', - filters: ['js'] + filters: ['js', 'react-native', 'react-native'] }, { title: 'Advanced Workflows', route: '/lib/graphqlapi/advanced-workflows', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Use existing AWS resources', route: '/lib/graphqlapi/existing-resources', - filters: ['android', 'flutter', 'ios'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] } ] }, @@ -191,32 +201,32 @@ const directory = { { title: 'Getting started', route: '/lib/restapi/getting-started', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Fetching data', route: '/lib/restapi/fetch', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Updating data', route: '/lib/restapi/update', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Deleting data', route: '/lib/restapi/delete', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Cancel API requests', route: '/lib/restapi/cancel', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Define authorization rules', route: '/lib/restapi/authz', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Use existing AWS resources', @@ -231,47 +241,47 @@ const directory = { { title: 'Getting started', route: '/lib/auth/getting-started', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Create or re-use existing backend', route: '/lib/auth/start', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Sign up, Sign in & Sign out', route: '/lib/auth/emailpassword', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Social sign-in (OAuth)', route: '/lib/auth/social', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Multi-factor authentication', route: '/lib/auth/mfa', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Password & user management', route: '/lib/auth/manageusers', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Switching authentication flows', route: '/lib/auth/switch-auth', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Customize UI components', route: '/lib/auth/customui', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Advanced workflows', route: '/lib/auth/advanced', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Sign in', @@ -311,7 +321,7 @@ const directory = { { title: 'Auth events', route: '/lib/auth/auth-events', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'User attributes', @@ -321,7 +331,7 @@ const directory = { { title: 'Remember a device', route: '/lib/auth/device_features', - filters: ['android', 'ios', 'js', 'flutter'] + filters: ['android', 'ios', 'js', 'flutter', 'react-native'] }, { title: 'Password management', @@ -346,7 +356,7 @@ const directory = { { title: 'Delete user', route: '/lib/auth/delete_user', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Escape hatch', @@ -356,7 +366,7 @@ const directory = { { title: 'Under the hood', route: '/lib/auth/overview', - filters: ['android', 'ios', 'js'] + filters: ['android', 'ios', 'js', 'react-native'] }, { title: 'Use existing Amazon Cognito resources', @@ -371,62 +381,62 @@ const directory = { { title: 'Getting started', route: '/lib/datastore/getting-started', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Manipulating data', route: '/lib/datastore/data-access', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Relational models', route: '/lib/datastore/relational', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Syncing data to cloud', route: '/lib/datastore/sync', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Setup authorization rules', route: '/lib/datastore/setup-auth-rules', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Conflict resolution', route: '/lib/datastore/conflict', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Real time', route: '/lib/datastore/real-time', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'DataStore Events', route: '/lib/datastore/datastore-events', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Other methods', route: '/lib/datastore/other-methods', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Schema updates', route: '/lib/datastore/schema-updates', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'How it works', route: '/lib/datastore/how-it-works', - filters: ['android', 'flutter', 'ios', 'js'] + filters: ['android', 'flutter', 'ios', 'js', 'react-native'] }, { title: 'Examples', route: '/lib/datastore/examples', - filters: ['js'] + filters: ['js', 'react-native'] } ] }, @@ -476,57 +486,57 @@ const directory = { { title: 'Overview', route: '/lib/in-app-messaging/overview', - filters: ['js'] + filters: ['react-native'] }, { title: 'Prerequisites', route: '/lib/in-app-messaging/prerequisites', - filters: ['js'] + filters: ['react-native'] }, { title: 'Create an In-App Messaging campaign', route: '/lib/in-app-messaging/create-campaign', - filters: ['js'] + filters: ['react-native'] }, { title: 'Getting started', route: '/lib/in-app-messaging/getting-started', - filters: ['js'] + filters: ['react-native'] }, { title: 'Sync messages', route: '/lib/in-app-messaging/sync-messages', - filters: ['js'] + filters: ['react-native'] }, { title: 'Display message', route: '/lib/in-app-messaging/display-message', - filters: ['js'] + filters: ['react-native'] }, { title: 'Clear messages', route: '/lib/in-app-messaging/clear-messages', - filters: ['js'] + filters: ['react-native'] }, { title: 'Customize your UI', route: '/lib/in-app-messaging/customize', - filters: ['js'] + filters: ['react-native'] }, { title: 'Identify a user', route: '/lib/in-app-messaging/identify-user', - filters: ['js'] + filters: ['react-native'] }, { title: 'Respond to interaction events', route: '/lib/in-app-messaging/respond-interaction-events', - filters: ['js'] + filters: ['react-native'] }, { title: 'Resolving conflicts', route: '/lib/in-app-messaging/resolve-conflicts', - filters: ['js'] + filters: ['react-native'] } ] }, @@ -536,62 +546,63 @@ const directory = { { title: 'Getting started', route: '/lib/interactions/getting-started', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Interact with bots', route: '/lib/interactions/chatbot', - filters: ['js'] + filters: ['js', 'react-native'] } ] }, predictions: { title: 'Predictions', items: [ + // TODO Rewrite why do we have an intro for RN and JS and not iOS/Android? { title: 'Overview', route: '/lib/predictions/intro', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Getting started', route: '/lib/predictions/getting-started', - filters: ['android', 'ios', 'js'] + filters: ['android', 'ios', 'js', 'react-native'] }, { title: 'Text to speech', route: '/lib/predictions/text-speech', - filters: ['android', 'ios', 'js'] + filters: ['android', 'ios', 'js', 'react-native'] }, { title: 'Transcribe audio to text', route: '/lib/predictions/transcribe', - filters: ['ios', 'js'] + filters: ['ios', 'js', 'react-native'] }, { title: 'Translate language', route: '/lib/predictions/translate', - filters: ['android', 'ios', 'js'] + filters: ['android', 'ios', 'js', 'react-native'] }, { title: 'Identify text', route: '/lib/predictions/identify-text', - filters: ['android', 'ios', 'js'] + filters: ['android', 'ios', 'js', 'react-native'] }, { title: 'Identify entities from images', route: '/lib/predictions/identify-entity', - filters: ['android', 'ios', 'js'] + filters: ['android', 'ios', 'js', 'react-native'] }, { title: 'Label objects in image', route: '/lib/predictions/label-image', - filters: ['android', 'ios', 'js'] + filters: ['android', 'ios', 'js', 'react-native'] }, { title: 'Interpret sentiment', route: '/lib/predictions/interpret', - filters: ['android', 'ios', 'js'] + filters: ['android', 'ios', 'js', 'react-native'] }, { title: 'Escape hatch', @@ -601,7 +612,7 @@ const directory = { { title: 'Example', route: '/lib/predictions/sample', - filters: ['js'] + filters: ['js', 'react-native'] } ] }, @@ -611,14 +622,18 @@ const directory = { { title: 'Getting started', route: '/lib/pubsub/getting-started', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Subscribe & Unsubscribe', route: '/lib/pubsub/subunsub', - filters: ['js'] + filters: ['js', 'react-native'] }, - { title: 'Publish', route: '/lib/pubsub/publish', filters: ['js'] } + { + title: 'Publish', + route: '/lib/pubsub/publish', + filters: ['js', 'react-native'] + } ] }, 'push-notifications': { @@ -627,22 +642,22 @@ const directory = { { title: 'Overview', route: '/lib/push-notifications/overview', - filters: ['js'] + filters: ['react-native'] }, { title: 'Getting started', route: '/lib/push-notifications/getting-started', - filters: ['js'] + filters: ['react-native'] }, { title: 'Working with API', route: '/lib/push-notifications/working-with-api', - filters: ['js'] + filters: ['react-native'] }, { title: 'Testing', route: '/lib/push-notifications/testing', - filters: ['js'] + filters: ['react-native'] } ] }, @@ -652,57 +667,62 @@ const directory = { { title: 'Getting started', route: '/lib/storage/getting-started', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Concepts', route: '/lib/storage/overview', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Upload files', route: '/lib/storage/upload', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Download files', route: '/lib/storage/download', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'List files', route: '/lib/storage/list', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Copy files', route: '/lib/storage/copy', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Remove files', route: '/lib/storage/remove', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { title: 'Cancel requests', route: '/lib/storage/cancel-requests', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'File access levels', route: '/lib/storage/configureaccess', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] }, { - title: 'Automatically track events', + title: 'Automatically track Storage events', route: '/lib/storage/autotrack', - filters: ['js'] + filters: ['js', 'react-native'] }, { title: 'Lambda triggers', route: '/lib/storage/triggers', - filters: ['android', 'ios', 'flutter', 'js'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] + }, + { + title: 'Custom Plugin', + route: '/lib/storage/custom-plugin', + filters: ['js', 'react-native'] }, { title: 'Escape hatch', @@ -712,7 +732,7 @@ const directory = { { title: 'Use existing AWS resources', route: '/lib/storage/existing-resources', - filters: ['android', 'ios', 'flutter'] + filters: ['android', 'ios', 'flutter', 'js', 'react-native'] } ] }, @@ -724,25 +744,38 @@ const directory = { route: '/lib/xr/getting-started', filters: ['js'] }, - { title: 'Scene API', route: '/lib/xr/sceneapi', filters: ['js'] } + { + title: 'Scene API', + route: '/lib/xr/sceneapi', + filters: ['js'] + } ] }, utilities: { title: 'Utilities', items: [ + // TODO Rewrite do we have service workers for React native? { title: 'Service Worker', route: '/lib/utilities/serviceworker', filters: ['js'] }, { title: 'Cache', route: '/lib/utilities/cache', filters: ['js'] }, - { title: 'Hub', route: '/lib/utilities/hub', filters: ['android', 'ios', 'js'] }, + { + title: 'Hub', + route: '/lib/utilities/hub', + filters: ['android', 'ios', 'js', 'react-native'] + }, { title: 'Internationalization', route: '/lib/utilities/i18n', - filters: ['js'] + filters: ['js', 'react-native'] }, - { title: 'Logger', route: '/lib/utilities/logger', filters: ['js'] } + { + title: 'Logger', + route: '/lib/utilities/logger', + filters: ['js', 'react-native'] + } ] }, 'client-configuration': { @@ -751,7 +784,7 @@ const directory = { { title: 'Configuring Amplify Categories', route: '/lib/client-configuration/configuring-amplify-categories', - filters: ['js'] + filters: ['js', 'react-native'] } ] }, @@ -796,12 +829,12 @@ const directory = { { title: 'Upgrading Amplify packages', route: '/lib/troubleshooting/upgrading', - filters: ['flutter', 'js'] + filters: ['flutter', 'js', 'react-native'] }, { title: 'TypeScript strict mode', route: '/lib/troubleshooting/strict-mode', - filters: ['js'] + filters: ['js', 'react-native'] } ] } @@ -1759,8 +1792,8 @@ const directory = { route: '/console/uibuilder/collections' }, { - title: 'Component slots', - route: '/console/uibuilder/slots' + title: 'Component slots', + route: '/console/uibuilder/slots' }, { title: 'Theming', @@ -2054,4 +2087,4 @@ const directory = { } }; -module.exports = directory; \ No newline at end of file +module.exports = directory; diff --git a/src/fragments/lib/analytics/android/enable-disable/disable.mdx b/src/fragments/lib/analytics/android/enable-disable/disable.mdx new file mode 100644 index 00000000000..01efae27a7b --- /dev/null +++ b/src/fragments/lib/analytics/android/enable-disable/disable.mdx @@ -0,0 +1,23 @@ + + + +```java +Amplify.Analytics.disable(); +``` + + + + +```kotlin +Amplify.Analytics.disable() +``` + + + + +```java +RxAmplify.Analytics.disable(); +``` + + + \ No newline at end of file diff --git a/src/fragments/lib/analytics/android/enable-disable/enable.mdx b/src/fragments/lib/analytics/android/enable-disable/enable.mdx new file mode 100644 index 00000000000..688a3611dac --- /dev/null +++ b/src/fragments/lib/analytics/android/enable-disable/enable.mdx @@ -0,0 +1,23 @@ + + + +```java +Amplify.Analytics.enable(); +``` + + + + +```kotlin +Amplify.Analytics.enable() +``` + + + + +```java +RxAmplify.Analytics.enable(); +``` + + + \ No newline at end of file diff --git a/src/fragments/lib/analytics/existing-resources.mdx b/src/fragments/lib/analytics/android/existing-resources.mdx similarity index 98% rename from src/fragments/lib/analytics/existing-resources.mdx rename to src/fragments/lib/analytics/android/existing-resources.mdx index 4a965220e83..47df86825f1 100644 --- a/src/fragments/lib/analytics/existing-resources.mdx +++ b/src/fragments/lib/analytics/android/existing-resources.mdx @@ -1,6 +1,6 @@ Existing Amazon Pinpoint resources can be used with the Amplify Libraries by referencing your **Application ID** and **Region** in your `amplifyconfiguration.json` file. -```dart +```json { "analytics": { "plugins": { @@ -24,4 +24,4 @@ Existing Amazon Pinpoint resources can be used with the Amplify Libraries by ref - **pinpointTargeting** - **region**: AWS Region where the resources are provisioned (e.g. `us-east-1`) -Note that before you can add an AWS resource to your application, the application must have the Amplify libraries installed. If you need to perform this step, see [Install Amplify Libraries](/lib/project-setup/create-application#n2-install-amplify-libraries). +Note that before you can add an AWS resource to your application, the application must have the Amplify libraries installed. If you need to perform this step, see [Install Amplify Libraries](/lib/project-setup/create-application#n2-install-amplify-libraries). diff --git a/src/fragments/lib/analytics/android/record.mdx b/src/fragments/lib/analytics/android/record.mdx index 9306f3b8824..ff3413eac0d 100644 --- a/src/fragments/lib/analytics/android/record.mdx +++ b/src/fragments/lib/analytics/android/record.mdx @@ -162,61 +162,4 @@ RxAmplify.Analytics.unregisterGlobalProperties("AppStyle", "OtherProperty"); ``` - - -## Disable Analytics - -To disable analytics, call: - - - - -```java -Amplify.Analytics.disable(); -``` - - - - -```kotlin -Amplify.Analytics.disable() -``` - - - - -```java -RxAmplify.Analytics.disable(); -``` - - - - -## Enable Analytics - -To re-enable, call: - - - - -```java -Amplify.Analytics.enable(); -``` - - - - -```kotlin -Amplify.Analytics.enable() -``` - - - - -```java -RxAmplify.Analytics.enable(); -``` - - - - + \ No newline at end of file diff --git a/src/fragments/lib/analytics/flutter/enable-disable/disable.mdx b/src/fragments/lib/analytics/flutter/enable-disable/disable.mdx new file mode 100644 index 00000000000..b2a99161630 --- /dev/null +++ b/src/fragments/lib/analytics/flutter/enable-disable/disable.mdx @@ -0,0 +1,3 @@ +```dart +Amplify.Analytics.disable(); +``` diff --git a/src/fragments/lib/analytics/flutter/enable-disable/enable.mdx b/src/fragments/lib/analytics/flutter/enable-disable/enable.mdx new file mode 100644 index 00000000000..6eb1405d78f --- /dev/null +++ b/src/fragments/lib/analytics/flutter/enable-disable/enable.mdx @@ -0,0 +1,3 @@ +```dart +Amplify.Analytics.enable(); +``` diff --git a/src/fragments/lib/analytics/flutter/existing-resources.mdx b/src/fragments/lib/analytics/flutter/existing-resources.mdx new file mode 100644 index 00000000000..7c52ceac435 --- /dev/null +++ b/src/fragments/lib/analytics/flutter/existing-resources.mdx @@ -0,0 +1,27 @@ +Existing Amazon Pinpoint resources can be used with the Amplify Libraries by referencing your **Application ID** and **Region** in your `amplifyconfiguration.dart` file. + +```dart +{ + "analytics": { + "plugins": { + "awsPinpointAnalyticsPlugin": { + "pinpointAnalytics": { + "appId": "[APP ID]", + "region": "[REGION]" + }, + "pinpointTargeting": { + "region": "[REGION]" + } + } + } + } +} +``` + +- **pinpointAnalytics** + - **appId**: Amazon Pinpoint application ID + - **region**: AWS Region where the resources are provisioned (e.g. `us-east-1`) +- **pinpointTargeting** + - **region**: AWS Region where the resources are provisioned (e.g. `us-east-1`) + +Note that before you can add an AWS resource to your application, the application must have the Amplify libraries installed. If you need to perform this step, see [Install Amplify Libraries](/lib/project-setup/create-application#n2-install-amplify-libraries). diff --git a/src/fragments/lib/analytics/flutter/record.mdx b/src/fragments/lib/analytics/flutter/record.mdx index 17dccdcb498..b3ce7c3e8e2 100644 --- a/src/fragments/lib/analytics/flutter/record.mdx +++ b/src/fragments/lib/analytics/flutter/record.mdx @@ -24,22 +24,22 @@ Events have default configuration to flush out to the network every 30 seconds. ```json { - "UserAgent": "aws-amplify-cli/2.0", - "Version": "1.0", - "analytics": { - "plugins": { - "awsPinpointAnalyticsPlugin": { - "pinpointAnalytics": { - "appId": "AppID", - "region": "Region" - }, - "pinpointTargeting": { - "region": "Region" - }, - "autoFlushEventsInterval": 10000 - } - } + "UserAgent": "aws-amplify-cli/2.0", + "Version": "1.0", + "analytics": { + "plugins": { + "awsPinpointAnalyticsPlugin": { + "pinpointAnalytics": { + "appId": "AppID", + "region": "Region" + }, + "pinpointTargeting": { + "region": "Region" + }, + "autoFlushEventsInterval": 10000 + } } + } } ``` @@ -70,20 +70,3 @@ Future unregisterGlobalProperties() async { ); } ``` - -## Disable Analytics - -To disable analytics, call: - -```dart -Amplify.Analytics.disable(); -``` - -## Enable Analytics - -To re-enable, call: - -```dart -Amplify.Analytics.enable(); -``` - diff --git a/src/fragments/lib/analytics/ios/enable-disable/disable.mdx b/src/fragments/lib/analytics/ios/enable-disable/disable.mdx new file mode 100644 index 00000000000..6a4e3fb69a7 --- /dev/null +++ b/src/fragments/lib/analytics/ios/enable-disable/disable.mdx @@ -0,0 +1,3 @@ +```swift +Amplify.Analytics.disable() +``` diff --git a/src/fragments/lib/analytics/ios/enable-disable/enable.mdx b/src/fragments/lib/analytics/ios/enable-disable/enable.mdx new file mode 100644 index 00000000000..eb0ac5acabe --- /dev/null +++ b/src/fragments/lib/analytics/ios/enable-disable/enable.mdx @@ -0,0 +1,3 @@ +```swift +Amplify.Analytics.enable() +``` diff --git a/src/fragments/lib/analytics/ios/existing-resources.mdx b/src/fragments/lib/analytics/ios/existing-resources.mdx new file mode 100644 index 00000000000..49b1e4f24fb --- /dev/null +++ b/src/fragments/lib/analytics/ios/existing-resources.mdx @@ -0,0 +1,29 @@ +Existing Amazon Pinpoint resources can be used with the Amplify Libraries by referencing your **Application ID** and **Region** in your `amplifyconfiguration.json` file. + + + +```json +{ + "analytics": { + "plugins": { + "awsPinpointAnalyticsPlugin": { + "pinpointAnalytics": { + "appId": "[APP ID]", + "region": "[REGION]" + }, + "pinpointTargeting": { + "region": "[REGION]" + } + } + } + } +} +``` + +- **pinpointAnalytics** + - **appId**: Amazon Pinpoint application ID + - **region**: AWS Region where the resources are provisioned (e.g. `us-east-1`) +- **pinpointTargeting** + - **region**: AWS Region where the resources are provisioned (e.g. `us-east-1`) + +Note that before you can add an AWS resource to your application, the application must have the Amplify libraries installed. If you need to perform this step, see [Install Amplify Libraries](/lib/project-setup/create-application#n2-install-amplify-libraries). diff --git a/src/fragments/lib/analytics/ios/record.mdx b/src/fragments/lib/analytics/ios/record.mdx index 4d99feb7355..08c46250aa8 100644 --- a/src/fragments/lib/analytics/ios/record.mdx +++ b/src/fragments/lib/analytics/ios/record.mdx @@ -21,22 +21,22 @@ Events have default configuration to flush out to the network every 60 seconds. ```json { - "UserAgent": "aws-amplify-cli/2.0", - "Version": "1.0", - "analytics": { - "plugins": { - "awsPinpointAnalyticsPlugin": { - "pinpointAnalytics": { - "appId": "AppID", - "region": "Region" - }, - "pinpointTargeting": { - "region": "Region" - }, - "autoFlushEventsInterval": 60 - } - } + "UserAgent": "aws-amplify-cli/2.0", + "Version": "1.0", + "analytics": { + "plugins": { + "awsPinpointAnalyticsPlugin": { + "pinpointAnalytics": { + "appId": "AppID", + "region": "Region" + }, + "pinpointTargeting": { + "region": "Region" + }, + "autoFlushEventsInterval": 60 + } } + } } ``` @@ -60,19 +60,3 @@ Amplify.Analytics.unregisterGlobalProperties() // or you can specify properties to unregister Amplify.Analytics.unregisterGlobalProperties(["globalPropertyKey1", "globalPropertyKey2"]) ``` - -## Disable Analytics - -Analytics are sent to the backend automatically (i.e. it's enabled by default). To disable it call: - -```swift -Amplify.Analytics.disable() -``` - -## Enable Analytics - -To re-enable it call: - -```swift -Amplify.Analytics.enable() -``` diff --git a/src/fragments/lib/analytics/js/autotrack.mdx b/src/fragments/lib/analytics/js/autotrack.mdx deleted file mode 100644 index ab2a9f7ca2e..00000000000 --- a/src/fragments/lib/analytics/js/autotrack.mdx +++ /dev/null @@ -1,157 +0,0 @@ -Analytics Auto Tracking helps you to automatically track user behaviors like sessions start/stop, page view change and web events like clicking, mouseover. - -## Session Tracking - -You can track the session both in a web app or a React Native app by using Analytics. A web session can be defined in different ways. To keep it simple we define that the web session is active when the page is not hidden and inactive when the page is hidden. -A session in the React Native app is active when the app is in the foreground and inactive when the app is in the background. - -For example: -```javascript -Analytics.autoTrack('session', { - // REQUIRED, turn on/off the auto tracking - enable: true, - // OPTIONAL, the attributes of the event, you can either pass an object or a function - // which allows you to define dynamic attributes - attributes: { - attr: 'attr' - }, - // when using function - // attributes: () => { - // const attr = somewhere(); - // return { - // myAttr: attr - // } - // }, - // OPTIONAL, the service provider, by default is the Amazon Pinpoint - provider: 'AWSPinpoint' -}); -``` - -When the page is loaded, the Analytics module will send an event to the Amazon Pinpoint Service. -```javascript -{ - eventType: '_session_start', - attributes: { - attr: 'attr' - } -} -``` - -To keep backward compatibility, the auto tracking of the session is enabled by default. You can turn it off by: -```javascript -Analytics.configure({ - // OPTIONAL - Allow recording session events. Default is true. - autoSessionRecord: false, -}); -``` -or -```javascript -Analytics.autoTrack('session', { - enable: false -}); - -// Note: this must be called before Amplify.configure() or Analytics.configure() to cancel the session_start event -``` - -## Page View Tracking - -If you want to track which page/url in your webapp is the most frequently viewed one, you can use this feature. It will automatically send events containing url information when the page is visited. - -To turn it on: -```javascript -Analytics.autoTrack('pageView', { - // REQUIRED, turn on/off the auto tracking - enable: true, - // OPTIONAL, the event name, by default is 'pageView' - eventName: 'pageView', - // OPTIONAL, the attributes of the event, you can either pass an object or a function - // which allows you to define dynamic attributes - attributes: { - attr: 'attr' - }, - // when using function - // attributes: () => { - // const attr = somewhere(); - // return { - // myAttr: attr - // } - // }, - // OPTIONAL, by default is 'multiPageApp' - // you need to change it to 'SPA' if your app is a single-page app like React - type: 'multiPageApp', - // OPTIONAL, the service provider, by default is the Amazon Pinpoint - provider: 'AWSPinpoint', - // OPTIONAL, to get the current page url - getUrl: () => { - // the default function - return window.location.origin + window.location.pathname; - } -}); -``` -Note: This is not supported in React Native. - -## Page Event Tracking - -If you want to track user interactions with elements on the page, you can use this feature. All you need to do is attach the specified selectors to your dom element and turn on the auto tracking. - -To turn it on: -```javascript -Analytics.autoTrack('event', { - // REQUIRED, turn on/off the auto tracking - enable: true, - // OPTIONAL, events you want to track, by default is 'click' - events: ['click'], - // OPTIONAL, the prefix of the selectors, by default is 'data-amplify-analytics-' - // in order to avoid collision with the user agent, according to https://www.w3schools.com/tags/att_global_data.asp - // always put 'data' as the first prefix - selectorPrefix: 'data-amplify-analytics-', - // OPTIONAL, the service provider, by default is the Amazon Pinpoint - provider: 'AWSPinpoint', - // OPTIONAL, the default attributes of the event, you can either pass an object or a function - // which allows you to define dynamic attributes - attributes: { - attr: 'attr' - } - // when using function - // attributes: () => { - // const attr = somewhere(); - // return { - // myAttr: attr - // } - // } -}); -``` - -For example: -```html - - + + +``` + + + + +## Option 2: Call Authentication APIs manually \ No newline at end of file diff --git a/src/fragments/lib/auth/js/getting-started-steps-basic-auth-react-native.mdx b/src/fragments/lib/auth/js/getting-started-steps-basic-auth-react-native.mdx new file mode 100644 index 00000000000..7901120580a --- /dev/null +++ b/src/fragments/lib/auth/js/getting-started-steps-basic-auth-react-native.mdx @@ -0,0 +1,25 @@ + + + +Install the necessary dependencies by running the following command: + +```sh +npm install aws-amplify amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage +``` + +You will also need to install the pod dependencies for iOS: + +```sh +npx pod-install +``` + + + +Install the necessary dependencies by running the following command: + +```sh +npm install aws-amplify @react-native-community/netinfo @react-native-async-storage/async-storage +``` + + + diff --git a/src/fragments/lib/auth/js/getting-started-steps-basic-auth.mdx b/src/fragments/lib/auth/js/getting-started-steps-basic-auth.mdx index 3d6a17980a5..70c37cfdafd 100644 --- a/src/fragments/lib/auth/js/getting-started-steps-basic-auth.mdx +++ b/src/fragments/lib/auth/js/getting-started-steps-basic-auth.mdx @@ -1,34 +1,5 @@ - - - Install the necessary dependencies by running the following command: ```sh npm install aws-amplify ``` - - - - -Install the necessary dependencies by running the following command: - -```sh -npm install aws-amplify amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage -``` - -You will also need to install the pod dependencies for iOS: - -```sh -npx pod-install -``` - - - -Install the necessary dependencies by running the following command: - -```sh -npm install aws-amplify @react-native-community/netinfo @react-native-async-storage/async-storage -``` - - - diff --git a/src/fragments/lib/auth/js/getting-started.mdx b/src/fragments/lib/auth/js/getting-started.mdx index 97d2d1d435f..9cf777f3fac 100644 --- a/src/fragments/lib/auth/js/getting-started.mdx +++ b/src/fragments/lib/auth/js/getting-started.mdx @@ -5,6 +5,7 @@ The Amplify Framework uses [Amazon Cognito](https://aws.amazon.com/cognito/) as the main authentication provider. Amazon Cognito is a robust user directory service that handles user registration, authentication, account recovery & other operations. In this tutorial, you'll learn how to add authentication to your application using Amazon Cognito and username/password login. ## Create authentication service + To start from scratch, run the following command in your project's root folder: > If you want to re-use an existing authentication resource from AWS (e.g. Amazon Cognito UserPool or Identity Pool) refer to [this section](/lib/auth/start#re-use-existing-authentication-resource). @@ -33,13 +34,15 @@ amplify console ## Configure your application -Add Amplify to your app: +import js0 from '/src/fragments/lib/auth/js/getting-started-steps-basic-auth.mdx'; + + -import all0 from "/src/fragments/lib/auth/js/getting-started-steps-basic-auth.mdx"; +import reactnative0 from '/src/fragments/lib/auth/js/getting-started-steps-basic-auth-react-native.mdx'; - + -In your app's entry point (i.e. __App.js__, __index.js__, or __main.js__), import and load the configuration file: +In your app's entry point (i.e. **App.js**, **index.js**, or **main.js**), import and load the configuration file: ```javascript import { Amplify, Auth } from 'aws-amplify'; @@ -49,174 +52,9 @@ Amplify.configure(awsconfig); ## Enable sign-up, sign-in, and sign-out -There are two ways to add authentication capabilities to your application. - -1. [Use pre-built UI components](#option-1-use-pre-built-ui-components) - -2. [Call Authentication APIs manually](#option-2-call-authentication-apis-manually) - -## Option 1: Use pre-built UI components - -Creating the login flow can be quite difficult and time consuming to get right. Amplify Framework has authentication UI components you can use that will provide the entire authentication flow for you, using your configuration specified in your __aws-exports.js__ file. - -Amplify has pre-built UI components for React, Vue, Angular and React Native. - - - - -First, install the `@aws-amplify/ui-react` library as well as `aws-amplify` if you have not already: - -```sh -npm install aws-amplify @aws-amplify/ui-react -``` - -Next, open __src/App.js__ and add the `withAuthenticator` component. - -**withAuthenticator** - -import all1 from "/src/fragments/ui/auth/react/withauthenticator.mdx"; - - - - - - -First, install the `@aws-amplify/ui-vue` library as well as `aws-amplify` if you have not already: - -```bash -npm install aws-amplify @aws-amplify/ui-vue -``` - -Next, open __src/App.js__ and add the `Authenticator` component. - -**Authenticator** - -The `Authenticator` component offers a simple way to add authentication flows into your app. This component encapsulates an authentication workflow in the framework of your choice and is backed by the cloud resources set up in your Auth cloud resources. You’ll also notice that `user` and `signOut` are passed to the inner template. - -```html - - - -``` - - - - -First, install the `@aws-amplify/ui-components` library as well as `aws-amplify` if you have not already: - -```bash -npm install aws-amplify @aws-amplify/ui-components -``` - -Now open __src/main.js__ and add the following below your last import: - -```js -import '@aws-amplify/ui-components'; -import { - applyPolyfills, - defineCustomElements, -} from '@aws-amplify/ui-components/loader'; -import Vue from 'vue'; - -Vue.config.ignoredElements = [/amplify-\w*/]; - - -applyPolyfills().then(() => { - defineCustomElements(window); -}); -``` - -Next, open __src/App.js__ and add the `amplify-authenticator` component. - -**amplify-authenticator** - -The `amplify-authenticator` component offers a simple way to add authentication flows into your app. This component encapsulates an authentication workflow in the framework of your choice and is backed by the cloud resources set up in your Auth cloud resources. You’ll also notice the `amplify-sign-out` component. This is an optional component if you’d like to render a sign out button. - -```html - -``` - - - - -First, install the `@aws-amplify/ui-angular` library as well as `aws-amplify` if you have not already: - -```bash -npm install aws-amplify @aws-amplify/ui-angular -``` - -Now open __app.module.ts__ and add the Amplify imports and configuration: - -```js -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser';; -import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular'; - -import { AppComponent } from './app.component'; -import awsconfig from '../aws-exports'; - -Amplify.configure(awsconfig); - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, AmplifyAuthenticatorModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -Next, import the default theme inside __styles.css__: - -```css -@import '~@aws-amplify/ui-angular/theme.css'; -```` - -Next, open __app.component.html__ and add the `amplify-authenticator` component. - -**amplify-authenticator** - -The `amplify-authenticator` component offers a simple way to add authentication flows into your app. This component encapsulates an authentication workflow in the framework of your choice and is backed by the cloud resources set up in your Auth cloud resources. You’ll also notice that `user` and `signOut` are provided to the inner template. - -```html - - -

Welcome {{ user.username }}!

- - - -``` - - - +import js1 from '/src/fragments/lib/auth/js/enable_sign_in_sign_up.mdx'; -## Option 2: Call Authentication APIs manually + Follow the instructions in the [Sign in, Sign up and Sign out](/lib/auth/emailpassword) to learn about how to integrate these authentication flows in your application with the Auth APIs. diff --git a/src/fragments/lib/datastore/android/getting-started/30_platformIntegration.mdx b/src/fragments/lib/datastore/android/getting-started/30_platformIntegration.mdx new file mode 100644 index 00000000000..9dee930778e --- /dev/null +++ b/src/fragments/lib/datastore/android/getting-started/30_platformIntegration.mdx @@ -0,0 +1 @@ +Coming Soon. Please use [Option #2](/lib/datastore/getting-started#option-2-use-amplify-cli). for now. diff --git a/src/fragments/lib/datastore/js/examples-react-native.mdx b/src/fragments/lib/datastore/js/examples-react-native.mdx new file mode 100644 index 00000000000..3def9517ef5 --- /dev/null +++ b/src/fragments/lib/datastore/js/examples-react-native.mdx @@ -0,0 +1,129 @@ +```jsx +/** + * React Native DataStore Sample App + */ + +import React, { Component } from 'react'; +import { Text, StyleSheet, ScrollView } from 'react-native'; + +import { Amplify, DataStore, Predicates } from 'aws-amplify'; +import { Post, PostStatus, Comment } from './src/models'; + +import awsConfig from './aws-exports'; +Amplify.configure(awsConfig); +let subscription; + +class App extends Component { + constructor(props) { + super(props); + this.state = { + posts: [] + }; + } + + componentDidMount() { + this.onQuery(); + subscription = DataStore.observe(Post).subscribe((msg) => { + console.log('SUBSCRIPTION_UPDATE', msg); + this.onQuery(); + }); + } + + componentWillUnmount() { + subscription.unsubscribe(); + } + + onCreatePost() { + DataStore.save( + new Post({ + title: `New Post ${Date.now()}`, + rating: (function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + // The maximum is exclusive and the minimum is inclusive + return Math.floor(Math.random() * (max - min)) + min; + })(5, 10), + status: PostStatus.ACTIVE + }) + ); + } + + async onCreatePostAndComments() { + const post = new Post({ + title: `New Post with comments ${Date.now()}`, + rating: 5, + status: PostStatus.ACTIVE + }); + + await DataStore.save(post); + + for (let i = 0; i < 2; i++) { + DataStore.save( + new Comment({ + content: `New comment ${Date.now()}`, + post + }) + ); + } + } + + onQuery = async () => { + const posts = await DataStore.query(Post, (c) => c.rating('gt', 2)); + console.log('QUERY_POSTS_RESULT', posts); + const comments = await DataStore.query(Comment); + this.setState({ posts }); + console.log('QUERY_COMMENTS_RESULT', comments); + }; + + onDelete = async () => { + const deletedPosts = await DataStore.delete(Post, Predicates.ALL); + console.log('DELETE_RESULT', deletedPosts); + }; + + render() { + return ( + + + Create Post + + + Create Post & Comments + + + Query Posts + + + Delete All Posts + + {this.state.posts.map((post, i) => ( + {`${post.title} ${post.rating}`} + ))} + + ); + } +} + +const styles = StyleSheet.create({ + scrollview: { + paddingTop: 40, + flex: 1 + }, + container: { + alignItems: 'center' + }, + text: { + fontSize: 20, + textAlign: 'center', + margin: 10 + } +}); + +export default App; +``` + +## API Reference + +For the complete API documentation for DataStore, visit our [API Reference](https://aws-amplify.github.io/amplify-js/api/classes/datastore.html) diff --git a/src/fragments/lib/datastore/js/examples.mdx b/src/fragments/lib/datastore/js/examples.mdx index 3162c3eb2db..c8e1ae2ae5c 100644 --- a/src/fragments/lib/datastore/js/examples.mdx +++ b/src/fragments/lib/datastore/js/examples.mdx @@ -194,134 +194,6 @@ export default { ``` - - -```jsx -/** - * React Native DataStore Sample App - */ - -import React, { Component } from "react"; -import { Text, StyleSheet, ScrollView } from "react-native"; - -import { Amplify, DataStore, Predicates } from "aws-amplify"; -import { Post, PostStatus, Comment } from "./src/models"; - -import awsConfig from "./aws-exports"; -Amplify.configure(awsConfig); -let subscription; - -class App extends Component { - constructor(props) { - super(props); - this.state = { - posts: [], - }; - } - - componentDidMount() { - this.onQuery(); - subscription = DataStore.observe(Post).subscribe((msg) => { - console.log("SUBSCRIPTION_UPDATE", msg); - this.onQuery(); - }); - } - - componentWillUnmount() { - subscription.unsubscribe(); - } - - onCreatePost() { - DataStore.save( - new Post({ - title: `New Post ${Date.now()}`, - rating: (function getRandomInt(min, max) { - min = Math.ceil(min); - max = Math.floor(max); - // The maximum is exclusive and the minimum is inclusive - return Math.floor(Math.random() * (max - min)) + min; - })(5, 10), - status: PostStatus.ACTIVE, - }) - ); - } - - async onCreatePostAndComments() { - const post = new Post({ - title: `New Post with comments ${Date.now()}`, - rating: 5, - status: PostStatus.ACTIVE, - }); - - await DataStore.save(post); - - for (let i = 0; i < 2; i++) { - DataStore.save( - new Comment({ - content: `New comment ${Date.now()}`, - post, - }) - ); - } - } - - onQuery = async () => { - const posts = await DataStore.query(Post, (c) => c.rating("gt", 2)); - console.log("QUERY_POSTS_RESULT", posts); - const comments = await DataStore.query(Comment); - this.setState({ posts }); - console.log("QUERY_COMMENTS_RESULT", comments); - }; - - onDelete = async () => { - const deletedPosts = await DataStore.delete(Post, Predicates.ALL); - console.log("DELETE_RESULT", deletedPosts); - }; - - render() { - return ( - - - Create Post - - - Create Post & Comments - - - Query Posts - - - Delete All Posts - - {this.state.posts.map((post, i) => ( - {`${post.title} ${post.rating}`} - ))} - - ); - } -} - -const styles = StyleSheet.create({ - scrollview: { - paddingTop: 40, - flex: 1, - }, - container: { - alignItems: "center", - }, - text: { - fontSize: 20, - textAlign: "center", - margin: 10, - }, -}); - -export default App; -``` - ## API Reference diff --git a/src/fragments/lib/datastore/js/getting-started/10_preReq.mdx b/src/fragments/lib/datastore/js/getting-started/10_preReq.mdx index f50081ddc48..64f7debe43f 100644 --- a/src/fragments/lib/datastore/js/getting-started/10_preReq.mdx +++ b/src/fragments/lib/datastore/js/getting-started/10_preReq.mdx @@ -1,5 +1,5 @@ -* Install [Amplify CLI](/cli) version 4.21.0 or later by running: +- Install [Amplify CLI](/cli) version 4.21.0 or later by running: -import all0 from "/src/fragments/cli-install-block.mdx"; +import all0 from '/src/fragments/cli-install-block.mdx'; - + diff --git a/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx b/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx index 0c96a187c3c..45a6c98fc73 100644 --- a/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx +++ b/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx @@ -1,10 +1,12 @@ The fastest way to get started is using the `amplify-app` npx script. - -
- - - + +
Start with [Create React app](https://create-react-app.dev): @@ -12,86 +14,4 @@ Start with [Create React app](https://create-react-app.dev): npx create-react-app amplify-datastore --use-npm cd amplify-datastore npx amplify-app@latest -``` - - - - -Start with the [React Native CLI](https://reactnative.dev/docs/getting-started): - -```bash -npx react-native init AmplifyDataStoreRN -cd AmplifyDataStoreRN -npx amplify-app@latest -npm install aws-amplify @react-native-community/netinfo @react-native-async-storage/async-storage -``` - -You will also need to install the pod dependencies for iOS: - -```sh -npx pod-install -``` - -**Use SQLite for enhanced performance (optional)** - -React Native CLI apps can now use SQLite with DataStore. SQLite offers considerable performance advantages over the default "AsyncStorage" database. - -To enable SQLite with DataStore for enhanced local database performance, follow the steps below: - -```sh -npx react-native init AmplifyDataStoreRN -cd AmplifyDataStoreRN -npx amplify-app@latest -npm install aws-amplify @aws-amplify/datastore-storage-adapter react-native-sqlite-storage @react-native-community/netinfo @react-native-async-storage/async-storage -npx pod-install -``` - -Then configure the SQLite storage adapter with DataStore in your app: - -```js -import { DataStore } from 'aws-amplify'; -import { SQLiteAdapter } from '@aws-amplify/datastore-storage-adapter/SQLiteAdapter'; - -DataStore.configure({ - storageAdapter: SQLiteAdapter -}); -``` - - - - -Start with the [Expo](https://docs.expo.dev/): - -```bash -expo init AmplifyDataStoreExpo -cd AmplifyDataStoreExpo -npx amplify-app@latest -expo install aws-amplify @react-native-community/netinfo @react-native-async-storage/async-storage -``` - -**Use SQLite for enhanced performance (optional)** - -Expo built apps can now use SQLite with DataStore. SQLite offers considerable performance advantages over the default "AsyncStorage" database. - -To enable SQLite with DataStore for enhanced local database performance, follow the steps below: - -```sh -expo init AmplifyDataStoreExpo -cd AmplifyDataStoreExpo -npx amplify-app@latest -expo install aws-amplify @aws-amplify/datastore-storage-adapter expo-sqlite expo-file-system @react-native-community/netinfo @react-native-async-storage/async-storage ``` - -Then configure the SQLite storage adapter with DataStore in your app: - -```js -import { DataStore } from 'aws-amplify'; -import { ExpoSQLiteAdapter } from '@aws-amplify/datastore-storage-adapter/ExpoSQLiteAdapter'; - -DataStore.configure({ - storageAdapter: ExpoSQLiteAdapter -}); -``` - - - diff --git a/src/fragments/lib/datastore/native_common/conflict.mdx b/src/fragments/lib/datastore/native_common/conflict.mdx index df38998fb2c..fcd891b8040 100644 --- a/src/fragments/lib/datastore/native_common/conflict.mdx +++ b/src/fragments/lib/datastore/native_common/conflict.mdx @@ -1,20 +1,19 @@ - If data synchronization is enabled via [AppSync](https://aws.amazon.com/appsync/), there can be different versions of the same object on the client and server. Multiple clients may have updated their respective copies of an object. DataStore will converge different object versions by applying conflict detection and resolution strategies. The default resolution is called `Auto Merge`. This strategy allows collections to grow, and prefers server-side versions of single-field data. Other strategies include `Optimistic Concurrency` control and `Custom Lambda` functions. For more information, see the [AWS AppSync documentation on conflict handling](https://docs.aws.amazon.com/appsync/latest/devguide/conflict-detection-and-sync.html). ## Custom conflict resolution -To select a different conflict resolution strategy, navigate into your project from a terminal and run `amplify update api`. Choose *Conflict resolution strategy* to change the conflict detection and resolution strategies. +To select a different conflict resolution strategy, navigate into your project from a terminal and run `amplify update api`. Choose _Conflict resolution strategy_ to change the conflict detection and resolution strategies. ```console -? Please select from one of the below mentioned services: +? Please select from one of the below mentioned services: `GraphQL` ... -? Select a setting to edit +? Select a setting to edit `Conflict resolution strategy` ? Select the default resolution strategy - Auto Merge -❯ Optimistic Concurrency - Custom Lambda + Auto Merge +❯ Optimistic Concurrency + Custom Lambda Learn More ``` @@ -24,31 +23,35 @@ Note that this flow will also allow you to change the strategy on each individua ``` ? Do you want to override default per model settings? Yes -? Select the models from below: +? Select the models from below: ❯◉ Post ◯ PostEditor ◯ User ? Select the resolution strategy for Post model Custom Lambda ? Select from the options below (Use arrow keys) -❯ Create a new Lambda Function - Existing Lambda Function +❯ Create a new Lambda Function + Existing Lambda Function ``` ## Custom configuration -import js0 from "/src/fragments/lib/datastore/js/conflict.mdx"; +import js0 from '/src/fragments/lib/datastore/js/conflict.mdx'; + + + +import reactnative0 from '/src/fragments/lib/datastore/js/conflict.mdx'; - + -import ios1 from "/src/fragments/lib/datastore/ios/conflict.mdx"; +import ios1 from '/src/fragments/lib/datastore/ios/conflict.mdx'; - + -import android2 from "/src/fragments/lib/datastore/android/conflict.mdx"; +import android2 from '/src/fragments/lib/datastore/android/conflict.mdx'; - + -import flutter3 from "/src/fragments/lib/datastore/flutter/conflict.mdx"; +import flutter3 from '/src/fragments/lib/datastore/flutter/conflict.mdx'; - + diff --git a/src/fragments/lib/datastore/native_common/data-access.mdx b/src/fragments/lib/datastore/native_common/data-access.mdx index 5871065ae0c..5264181f306 100644 --- a/src/fragments/lib/datastore/native_common/data-access.mdx +++ b/src/fragments/lib/datastore/native_common/data-access.mdx @@ -1,7 +1,13 @@ + + import js0 from "/src/fragments/lib/datastore/js/data-access/importing-datastore-snippet.mdx"; +import reactnative0 from "/src/fragments/lib/datastore/js/data-access/importing-datastore-snippet.mdx"; + + + ## Create and update To write data to the DataStore, pass an instance of a model to `Amplify.DataStore.save()`: @@ -10,6 +16,10 @@ import js1 from "/src/fragments/lib/datastore/js/data-access/save-snippet.mdx"; +import reactnative1 from "/src/fragments/lib/datastore/js/data-access/save-snippet.mdx"; + + + import ios2 from "/src/fragments/lib/datastore/ios/data-access/save-snippet.mdx"; @@ -40,6 +50,8 @@ import flutter8 from "/src/fragments/lib/datastore/flutter/data-access/update-sn + + **Avoid working with stale data!** @@ -52,6 +64,10 @@ import js_observe_update from "/src/fragments/lib/datastore/js/data-access/obser +import reactnative2 from "/src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx"; + + + import ios_observe_update from "/src/fragments/lib/datastore/ios/data-access/observe-update-snippet.mdx"; @@ -72,6 +88,10 @@ import js9 from "/src/fragments/lib/datastore/js/data-access/delete-snippet.mdx" +import reactnative3 from "/src/fragments/lib/datastore/js/data-access/delete-snippet.mdx"; + + + import ios10 from "/src/fragments/lib/datastore/ios/data-access/delete-snippet.mdx"; @@ -94,6 +114,10 @@ import js13 from "/src/fragments/lib/datastore/js/data-access/query-basic-snippe +import reactnative4 from "/src/fragments/lib/datastore/js/data-access/query-basic-snippet.mdx"; + + + import ios14 from "/src/fragments/lib/datastore/ios/data-access/query-basic-snippet.mdx"; @@ -126,6 +150,10 @@ import js18 from "/src/fragments/lib/datastore/js/data-access/query-predicate-sn +import reactnative5 from "/src/fragments/lib/datastore/js/data-access/query-predicate-snippet.mdx"; + + + import ios19 from "/src/fragments/lib/datastore/ios/data-access/query-predicate-snippet.mdx"; @@ -144,6 +172,10 @@ import js22 from "/src/fragments/lib/datastore/js/data-access/query-predicate-mu +import reactnative6 from "/src/fragments/lib/datastore/js/data-access/query-predicate-multiple-snippet.mdx"; + + + import ios23 from "/src/fragments/lib/datastore/ios/data-access/query-predicate-multiple-snippet.mdx"; @@ -162,6 +194,10 @@ import js26 from "/src/fragments/lib/datastore/js/data-access/query-predicate-or +import reactnative7 from "/src/fragments/lib/datastore/js/data-access/query-predicate-or-snippet.mdx"; + + + import ios27 from "/src/fragments/lib/datastore/ios/data-access/query-predicate-or-snippet.mdx"; @@ -198,6 +234,10 @@ import js34 from "/src/fragments/lib/datastore/js/data-access/query-pagination-s +import reactnative8 from "/src/fragments/lib/datastore/js/data-access/query-pagination-snippet.mdx"; + + + import ios35 from "/src/fragments/lib/datastore/ios/data-access/query-pagination-snippet.mdx"; diff --git a/src/fragments/lib/datastore/native_common/getting-started.mdx b/src/fragments/lib/datastore/native_common/getting-started.mdx index 0b18443817b..53332891a5f 100644 --- a/src/fragments/lib/datastore/native_common/getting-started.mdx +++ b/src/fragments/lib/datastore/native_common/getting-started.mdx @@ -18,6 +18,10 @@ import js0 from "/src/fragments/lib/datastore/js/getting-started/10_preReq.mdx"; +import reactnative0 from "/src/fragments/lib/datastore/js/getting-started/10_preReq.mdx"; + + + import ios1 from "/src/fragments/lib/datastore/ios/getting-started/10_preReq.mdx"; @@ -48,6 +52,10 @@ import js7 from "/src/fragments/lib/datastore/native_common/setup-env.mdx"; +import reactnative1 from "/src/fragments/lib/datastore/native_common/setup-env.mdx"; + + + import ios8 from "/src/fragments/lib/datastore/ios/getting-started/30_setupEnv.mdx"; @@ -99,6 +107,10 @@ import js11 from "/src/fragments/lib/datastore/js/getting-started/40_codegen.mdx +import reactnative2 from "/src/fragments/lib/datastore/js/getting-started/40_codegen.mdx"; + + + import ios12 from "/src/fragments/lib/datastore/ios/getting-started/40_codegen.mdx"; @@ -117,6 +129,10 @@ import js15 from "/src/fragments/lib/datastore/native_common/codegen.mdx"; +import reactnative3 from "/src/fragments/lib/datastore/native_common/codegen.mdx"; + + + import ios16 from "/src/fragments/lib/datastore/native_common/codegen.mdx"; @@ -135,6 +151,10 @@ import js19 from "/src/fragments/lib/datastore/js/getting-started/50_initDataSto +import reactnative4 from "/src/fragments/lib/datastore/js/getting-started/50_initDataStore.mdx"; + + + import ios20 from "/src/fragments/lib/datastore/ios/getting-started/50_initDataStore.mdx"; @@ -161,6 +181,10 @@ import js23 from "/src/fragments/lib/datastore/js/getting-started/60_saveSnippet +import reactnative5 from "/src/fragments/lib/datastore/js/getting-started/60_saveSnippet.mdx"; + + + import ios24 from "/src/fragments/lib/datastore/ios/getting-started/60_saveSnippet.mdx"; @@ -181,6 +205,10 @@ import js27 from "/src/fragments/lib/datastore/js/getting-started/70_querySnippe +import reactnative6 from "/src/fragments/lib/datastore/js/getting-started/70_querySnippet.mdx"; + + + import ios28 from "/src/fragments/lib/datastore/ios/getting-started/70_querySnippet.mdx"; diff --git a/src/fragments/lib/datastore/native_common/real-time.mdx b/src/fragments/lib/datastore/native_common/real-time.mdx index f4d4ad9c010..568a3c0564a 100644 --- a/src/fragments/lib/datastore/native_common/real-time.mdx +++ b/src/fragments/lib/datastore/native_common/real-time.mdx @@ -2,21 +2,25 @@ You can subscribe to changes on your Models. This reacts dynamically to updates of data to the underlying Storage Engine, which could be the result of GraphQL Subscriptions as well as Queries or Mutations that run against the backing AppSync API if you are synchronizing with the cloud. -import js0 from "/src/fragments/lib/datastore/js/real-time/observe-snippet.mdx"; +import js0 from '/src/fragments/lib/datastore/js/real-time/observe-snippet.mdx'; - + -import ios1 from "/src/fragments/lib/datastore/ios/real-time/observe-snippet.mdx"; +import reactnative0 from '/src/fragments/lib/datastore/js/real-time/observe-snippet.mdx'; - + -import android2 from "/src/fragments/lib/datastore/android/real-time/observe-snippet.mdx"; +import ios1 from '/src/fragments/lib/datastore/ios/real-time/observe-snippet.mdx'; - + -import flutter3 from "/src/fragments/lib/datastore/flutter/real-time/observe-snippet.mdx"; +import android2 from '/src/fragments/lib/datastore/android/real-time/observe-snippet.mdx'; - + + +import flutter3 from '/src/fragments/lib/datastore/flutter/real-time/observe-snippet.mdx'; + + ## Observe query results in real-time @@ -24,24 +28,28 @@ import flutter3 from "/src/fragments/lib/datastore/flutter/real-time/observe-sni The first snapshot returned from `observeQuery` will contain the same results as calling `query` directly on your Model - a collection of all the locally-available records. Subsequent snapshots will be emitted as updates to the dataset are received in the local store. -While data is syncing from the cloud, snapshots will contain all of the items synced so far and an `isSynced` status of `false`. When the sync process is complete, a snapshot will be emitted with all the records in the local store and an `isSynced` status of `true`. +While data is syncing from the cloud, snapshots will contain all of the items synced so far and an `isSynced` status of `false`. When the sync process is complete, a snapshot will be emitted with all the records in the local store and an `isSynced` status of `true`. In addition to typical real-time use cases, `observeQuery` can be used on app launch to show your customers an initial data set from the local store while new data is being synced from cloud. `observeQuery` also accepts the same [predicates](/lib/datastore/data-access#predicates) and [sorting](/lib/datastore/data-access#sort) options as `query`. -import js1 from "/src/fragments/lib/datastore/js/real-time/observe-query-snippet.mdx"; +import js1 from '/src/fragments/lib/datastore/js/real-time/observe-query-snippet.mdx'; + + + +import reactnative1 from '/src/fragments/lib/datastore/js/real-time/observe-query-snippet.mdx'; - + -import ios2 from "/src/fragments/lib/datastore/ios/real-time/observe-query-snippet.mdx"; +import ios2 from '/src/fragments/lib/datastore/ios/real-time/observe-query-snippet.mdx'; - + -import android3 from "/src/fragments/lib/datastore/android/real-time/observe-query-snippet.mdx"; +import android3 from '/src/fragments/lib/datastore/android/real-time/observe-query-snippet.mdx'; - + -import flutter4 from "/src/fragments/lib/datastore/flutter/real-time/observe-query-snippet.mdx"; +import flutter4 from '/src/fragments/lib/datastore/flutter/real-time/observe-query-snippet.mdx'; - + diff --git a/src/fragments/lib/datastore/native_common/relational.mdx b/src/fragments/lib/datastore/native_common/relational.mdx index 1624983c219..660620fb03c 100644 --- a/src/fragments/lib/datastore/native_common/relational.mdx +++ b/src/fragments/lib/datastore/native_common/relational.mdx @@ -13,6 +13,10 @@ import js0 from "/src/fragments/lib/datastore/js/relational/updated-schema.mdx"; +import reactnative0 from "/src/fragments/lib/datastore/js/relational/updated-schema.mdx"; + + + import ios1 from "/src/fragments/lib/datastore/ios/relational/updated-schema.mdx"; @@ -33,6 +37,10 @@ import js4 from "/src/fragments/lib/datastore/js/relational/save-snippet.mdx"; +import reactnative1 from "/src/fragments/lib/datastore/js/relational/save-snippet.mdx"; + + + import ios5 from "/src/fragments/lib/datastore/ios/relational/save-snippet.mdx"; @@ -51,6 +59,10 @@ import js8 from "/src/fragments/lib/datastore/js/relational/query-snippet.mdx"; +import reactnative2 from "/src/fragments/lib/datastore/js/relational/query-snippet.mdx"; + + + import ios9 from "/src/fragments/lib/datastore/ios/relational/query-snippet.mdx"; @@ -71,6 +83,10 @@ import js12 from "/src/fragments/lib/datastore/js/relational/delete-snippet.mdx" +import reactnative4 from "/src/fragments/lib/datastore/js/relational/delete-snippet.mdx"; + + + import ios13 from "/src/fragments/lib/datastore/ios/relational/delete-snippet.mdx"; @@ -114,6 +130,10 @@ import js16 from "/src/fragments/lib/datastore/js/relational/save-many-snippet.m +import reactnative5 from "/src/fragments/lib/datastore/js/relational/save-many-snippet.mdx"; + + + import ios17 from "/src/fragments/lib/datastore/ios/relational/save-many-snippet.mdx"; @@ -128,4 +148,8 @@ import flutter19 from "/src/fragments/lib/datastore/flutter/relational/save-many import js20 from "/src/fragments/lib/datastore/js/relational/query-many-snippet.mdx"; - \ No newline at end of file + + +import reactnative6 from "/src/fragments/lib/datastore/js/relational/query-many-snippet.mdx"; + + \ No newline at end of file diff --git a/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx b/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx index ed22fc33d54..4b52602b043 100644 --- a/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx +++ b/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx @@ -2,13 +2,13 @@ Amplify gives you the ability to limit which individuals or groups should have a Here's a high-level overview of the authorization scenarios we support in the Amplify libraries. Each scenario has options you can tune to fit the needs of your application. -* [**Owner Based Authorization**](#owner-based-authorization): Limit a model instance's access to an "owner" and defines authorization rules for those owners. Backed by Cognito User Pool. -* [**Static Group Authorization**](#static-group-authorization): Limit a model instance's access to a specific group of users and define authorization rules for that group. Backend by Cognito User Pool. -* [**Owner and Static Group Combined**](#owner-and-static-group-combined): Uses a combination of both *Owner Based Authorization* and *Static Group Authorization* to control ownership and access. -* [**Public Authorization**](#public-authorization): Allow public access to your model instances. Backed by an API Key or IAM. -* [**Private Authorization**](#private-authorization): Allow any signed-in user to access your model instances. Backed by IAM or Cognito User Pool. -* [**Owner based Authorization with OIDC provider**](#owner-based-authorization-with-oidc-provider): Use a 3rd party OIDC Provider to achieve *Owner based authorization*. -* [**Static Group Authorization with OIDC provider**](#static-group-authorization-with-oidc-provider): Use a 3rd party OIDC Provider to achieve *Static group authorization* using a custom `groupClaim`. +- [**Owner Based Authorization**](#owner-based-authorization): Limit a model instance's access to an "owner" and defines authorization rules for those owners. Backed by Cognito User Pool. +- [**Static Group Authorization**](#static-group-authorization): Limit a model instance's access to a specific group of users and define authorization rules for that group. Backend by Cognito User Pool. +- [**Owner and Static Group Combined**](#owner-and-static-group-combined): Uses a combination of both _Owner Based Authorization_ and _Static Group Authorization_ to control ownership and access. +- [**Public Authorization**](#public-authorization): Allow public access to your model instances. Backed by an API Key or IAM. +- [**Private Authorization**](#private-authorization): Allow any signed-in user to access your model instances. Backed by IAM or Cognito User Pool. +- [**Owner based Authorization with OIDC provider**](#owner-based-authorization-with-oidc-provider): Use a 3rd party OIDC Provider to achieve _Owner based authorization_. +- [**Static Group Authorization with OIDC provider**](#static-group-authorization-with-oidc-provider): Use a 3rd party OIDC Provider to achieve _Static group authorization_ using a custom `groupClaim`. import datastoreClearCallout from '/src/fragments/lib/datastore/native_common/callout/datastore-clear-with-auth.mdx'; @@ -18,16 +18,18 @@ import datastoreClearCallout from '/src/fragments/lib/datastore/native_common/ca ### Per User / Owner Based Data Access -The following are commonly used patterns for owner based authorization. For more information on how to tune these examples, please see the [CLI documentation on owner based authorization](/cli/graphql/authorization-rules/#per-user--owner-based-data-access). +The following are commonly used patterns for owner based authorization. For more information on how to tune these examples, please see the [CLI documentation on owner based authorization](/cli/graphql/authorization-rules/#per-user--owner-based-data-access). + +- Create/Read/Update/Delete mutations are private to the owner. -* Create/Read/Update/Delete mutations are private to the owner. ```graphql type YourModel @model @auth(rules: [{ allow: owner }]) { ... } ``` -* Owners can create and delete; other signed-in users can read and update. +- Owners can create and delete; other signed-in users can read and update. + ```graphql type YourModel @model @@ -42,9 +44,11 @@ type YourModel ``` ### Static Group Authorization -The following are commonly used patterns for static group authorization. For more information on how to tune these examples, please see the [CLI documentation on static group authorization](/cli/graphql/authorization-rules/#user-group-based-data-access). -* Users belonging to the "Admin" group can CRUD (create, read, update, and delete), others cannot access anything. +The following are commonly used patterns for static group authorization. For more information on how to tune these examples, please see the [CLI documentation on static group authorization](/cli/graphql/authorization-rules/#user-group-based-data-access). + +- Users belonging to the "Admin" group can CRUD (create, read, update, and delete), others cannot access anything. + ```graphql type YourModel @model @auth(rules: [{ allow: groups, groups: ["Admin"] }]) { @@ -52,7 +56,8 @@ type YourModel @model @auth(rules: [{ allow: groups, } ``` -* Users belonging to the "Admin" group can create and delete, other signed users can read and update. +- Users belonging to the "Admin" group can create and delete, other signed users can read and update. + ```graphql type YourModel @model @@ -67,9 +72,11 @@ type YourModel ``` ### Owner and Static Group Combined -The following are commonly used patterns for combining owner and static group authorization. For more information on how to tune these examples, please see the [CLI documentation on static group authorization](/cli/graphql/authorization-rules#static-group-authorization). -* Users have their own data, but users who belong to the `Admin` group have access to their data and anyone else in that group. Users in the `Admin` group have the ability to make mutation on behalf of users not in the `Admin` group +The following are commonly used patterns for combining owner and static group authorization. For more information on how to tune these examples, please see the [CLI documentation on static group authorization](/cli/graphql/authorization-rules#static-group-authorization). + +- Users have their own data, but users who belong to the `Admin` group have access to their data and anyone else in that group. Users in the `Admin` group have the ability to make mutation on behalf of users not in the `Admin` group + ```graphql type YourModel @model @@ -79,16 +86,19 @@ type YourModel ``` ### Public Data Access -The following are commonly used patterns to grant everyone access. For more information on how to tune these examples, please see the [CLI documentation on public data access](/cli/graphql/authorization-rules/#public-data-access). -* Auth provider is API Key +The following are commonly used patterns to grant everyone access. For more information on how to tune these examples, please see the [CLI documentation on public data access](/cli/graphql/authorization-rules/#public-data-access). + +- Auth provider is API Key + ```graphql type YourModel @model @auth(rules: [{ allow: public }]) { ... } ``` -* Auth provider is IAM +- Auth provider is IAM + ```graphql type YourModel @model @auth(rules: [{ allow: public, provider: iam }]) { ... @@ -96,15 +106,19 @@ type YourModel @model @auth(rules: [{ allow: public, provider: iam }]) { ``` ### Signed-in User Data Access + The following are commonly used patterns for private authorization. For more information on how to tune these examples, please see the [CLI documentation on signed-in user data access](https://docs.amplify.aws/cli/graphql/authorization-rules/#signed-in-user-data-access). -* Cognito user pool authenticated users can CRUD all posts, regardless of who created it. Guest users do not have access. +- Cognito user pool authenticated users can CRUD all posts, regardless of who created it. Guest users do not have access. + ```graphql type YourModel @model @auth(rules: [{ allow: private }]) { ... } ``` -* IAM authenticated users can CRUD all posts, regardless of who created it. Guest users do not have access: + +- IAM authenticated users can CRUD all posts, regardless of who created it. Guest users do not have access: + ```graphql type YourModel @model @auth(rules: [{ allow: private, provider: iam }]) { ... @@ -112,9 +126,11 @@ type YourModel @model @auth(rules: [{ allow: private, provider: iam }]) { ``` ### Owner based Authorization with OIDC provider + The following are commonly used patterns for owner based authorization using a 3rd party OIDC provider (e.g. Facebook, Google, etc...). For more information on how to tune these examples, please see the [CLI documentation on using an oidc authorization provider](/cli/graphql/authorization-rules/#using-oidc-authorization-provider). -* Using a 3rd party OIDC provider to achieve owner based authorization. +- Using a 3rd party OIDC provider to achieve owner based authorization. + ```graphql type YourModel @model @@ -123,22 +139,24 @@ type YourModel } ``` -import android0 from "/src/fragments/lib/datastore/android/setup-auth-rules/owner_based_auth_oidc.mdx"; +import android0 from '/src/fragments/lib/datastore/android/setup-auth-rules/owner_based_auth_oidc.mdx'; - + -import ios1 from "/src/fragments/lib/datastore/ios/setup-auth-rules/owner_based_auth_oidc.mdx"; +import ios1 from '/src/fragments/lib/datastore/ios/setup-auth-rules/owner_based_auth_oidc.mdx'; - + -import flutterOidc from "/src/fragments/lib/datastore/flutter/setup-auth-rules/owner_based_auth_oidc.mdx"; +import flutterOidc from '/src/fragments/lib/datastore/flutter/setup-auth-rules/owner_based_auth_oidc.mdx'; - + ### Static Group Authorization with OIDC provider + The following are commonly used patterns for using `groupClaims` to achieve group based authorization using a 3rd party OIDC provider. For more information on how to tune these examples, please see the [CLI documentation on static group authorization](/cli/graphql/authorization-rules#custom-claims). -* Using a custom value for `groupClaim` to achieve static group authorization with a 3rd party OIDC provider. +- Using a custom value for `groupClaim` to achieve static group authorization with a 3rd party OIDC provider. + ```graphql type YourModel @model @@ -164,21 +182,25 @@ By default, DataStore uses your API's default authorization type specified in th To enable DataStore to use multiple authorization types based on the model's `@auth` rules, run `amplify update api` to configure additional auth types and deploy by running `amplify push`. Then, configure the "auth mode strategy" when initializing DataStore: -import ios2 from "/src/fragments/lib/datastore/ios/setup-auth-rules/10_multiauth-snippet.mdx"; +import ios2 from '/src/fragments/lib/datastore/ios/setup-auth-rules/10_multiauth-snippet.mdx'; - + -import android3 from "/src/fragments/lib/datastore/android/setup-auth-rules/10_multiauth-snippet.mdx"; +import android3 from '/src/fragments/lib/datastore/android/setup-auth-rules/10_multiauth-snippet.mdx'; - + -import js4 from "/src/fragments/lib/datastore/js/setup-auth-rules/10_multiauth-snippet.mdx"; +import js4 from '/src/fragments/lib/datastore/js/setup-auth-rules/10_multiauth-snippet.mdx'; - + -import flutterMultiAuth from "/src/fragments/lib/datastore/flutter/setup-auth-rules/10_multiauth-snippet.mdx"; +import reactnative0 from '/src/fragments/lib/datastore/js/setup-auth-rules/10_multiauth-snippet.mdx'; - + + +import flutterMultiAuth from '/src/fragments/lib/datastore/flutter/setup-auth-rules/10_multiauth-snippet.mdx'; + + This configuration enables DataStore to synchronize data using the model's `@auth` rule provider for each model. @@ -186,22 +208,22 @@ This configuration enables DataStore to synchronize data using the model's `@aut If there are multiple `@auth` rules on a model, the rules will be ranked by priority (see below), and DataStore will attempt the synchronization with each authorization type until one succeeds (or they all fail). -| Priority | `allow`: AuthStrategy | `provider` | -|:----------|:-----:|:------:| -| 1 | `owner` | `userPools` | -| 2 | `owner` | `oidc` | -| 3 | `group` | `userPools` | -| 4 | `group` | `oidc` | -| 5 | `private` | `userPools` | -| 6 | `private` | `iam` | -| 7 | `public` | `iam` | -| 8 | `public` | `apiKey` | +| Priority | `allow`: AuthStrategy | `provider` | +| :------- | :-------------------: | :---------: | +| 1 | `owner` | `userPools` | +| 2 | `owner` | `oidc` | +| 3 | `group` | `userPools` | +| 4 | `group` | `oidc` | +| 5 | `private` | `userPools` | +| 6 | `private` | `iam` | +| 7 | `public` | `iam` | +| 8 | `public` | `apiKey` | If there is **not** an authenticated user session, DataStore will only attempt `public` rules. If a model has no auth rules defined, DataStore will continue to use the default authorization type from `amplifyconfiguration.json`/`.dart`. -#### Example with multiple authorization types +#### Example with multiple authorization types ```graphql type YourModel @@ -215,8 +237,13 @@ type YourModel ... } ``` + DataStore will attempt to use owner-based authorization first when synchronizing data if there is an authenticated user. If that request fails for some reason, DataStore will attempt the request again with public authorization. If there is **no** authenticated user, public authorization will be used. -import js5 from "/src/fragments/lib/datastore/js/setup-auth-rules/20_function-auth-snippet.mdx"; +import js5 from '/src/fragments/lib/datastore/js/setup-auth-rules/20_function-auth-snippet.mdx'; + + + +import reactnative1 from '/src/fragments/lib/datastore/js/setup-auth-rules/20_function-auth-snippet.mdx'; - \ No newline at end of file + diff --git a/src/fragments/lib/datastore/native_common/setup-env.mdx b/src/fragments/lib/datastore/native_common/setup-env.mdx index 95a2106eab2..83921a1bfd6 100644 --- a/src/fragments/lib/datastore/native_common/setup-env.mdx +++ b/src/fragments/lib/datastore/native_common/setup-env.mdx @@ -2,18 +2,28 @@ In order to setup your local development environment, you have two options. ### Option 1: Platform integration -import js1 from "/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx"; + - +import js1 from '/src/fragments/lib/datastore/js/getting-started/30_platformIntegration.mdx'; -import flutter3 from "/src/fragments/lib/datastore/flutter/getting-started/30_platformIntegration.mdx"; + - +import reactnative0 from '/src/fragments/lib/datastore/react-native/getting-started/30_platformIntegration.mdx'; + + + +import android2 from '/src/fragments/lib/datastore/android/getting-started/30_platformIntegration.mdx'; + + + +import flutter3 from '/src/fragments/lib/datastore/flutter/getting-started/30_platformIntegration.mdx'; + + ### Option 2: Use Amplify CLI Instead of using the platform integration, you can alternatively use the Amplify CLI on its own. This option is particularly **useful for existing projects** where Amplify is already configured and you want to add DataStore to it. -import all0 from "/src/fragments/lib/datastore/native_common/setup-env-cli.mdx"; +import all0 from '/src/fragments/lib/datastore/native_common/setup-env-cli.mdx'; - \ No newline at end of file + diff --git a/src/fragments/lib/datastore/native_common/sync.mdx b/src/fragments/lib/datastore/native_common/sync.mdx index a2c38a49cc7..eb99183d56f 100644 --- a/src/fragments/lib/datastore/native_common/sync.mdx +++ b/src/fragments/lib/datastore/native_common/sync.mdx @@ -93,6 +93,10 @@ import js6 from "/src/fragments/lib/datastore/js/sync/40-clear.mdx"; +import reactnative0 from "/src/fragments/lib/datastore/js/sync/40-clear.mdx"; + + + import ios7 from "/src/fragments/lib/datastore/ios/sync/40-clear.mdx"; @@ -111,6 +115,10 @@ import js10 from "/src/fragments/lib/datastore/js/sync/50-selectiveSync.mdx"; +import reactnative1 from "/src/fragments/lib/datastore/js/sync/50-selectiveSync.mdx"; + + + import android11 from "/src/fragments/lib/datastore/android/sync/50-selectiveSync.mdx"; diff --git a/src/fragments/lib/datastore/react-native/getting-started/30_platformIntegration.mdx b/src/fragments/lib/datastore/react-native/getting-started/30_platformIntegration.mdx new file mode 100644 index 00000000000..53096656661 --- /dev/null +++ b/src/fragments/lib/datastore/react-native/getting-started/30_platformIntegration.mdx @@ -0,0 +1,86 @@ +The fastest way to get started is using the `amplify-app` npx script. + + +
+ + + + +Start with the [React Native CLI](https://reactnative.dev/docs/getting-started): + +```bash +npx react-native@0.68.2 init AmplifyDataStoreRN --version 0.68.2 +cd AmplifyDataStoreRN +npx amplify-app@latest +npm install aws-amplify @react-native-community/netinfo @react-native-async-storage/async-storage +``` + +You will also need to install the pod dependencies for iOS: + +```sh +npx pod-install +``` + +**Use SQLite for enhanced performance (optional)** + +React Native CLI apps can now use SQLite with DataStore. SQLite offers considerable performance advantages over the default "AsyncStorage" database. + +To enable SQLite with DataStore for enhanced local database performance, follow the steps below: + +```sh +npx react-native@0.68.2 init AmplifyDataStoreRN --version 0.68.2 +cd AmplifyDataStoreRN +npx amplify-app@latest +npm install aws-amplify @aws-amplify/datastore-storage-adapter react-native-sqlite-storage @react-native-community/netinfo @react-native-async-storage/async-storage +npx pod-install +``` + +Then configure the SQLite storage adapter with DataStore in your app: + +```js +import { DataStore } from 'aws-amplify'; +import { SQLiteAdapter } from '@aws-amplify/datastore-storage-adapter/SQLiteAdapter'; + +DataStore.configure({ + storageAdapter: SQLiteAdapter +}); +``` + + + + +Start with the [Expo CLI](https://docs.expo.dev/): + +```bash +expo init AmplifyDataStoreExpo +cd AmplifyDataStoreExpo +npx amplify-app@latest +expo install aws-amplify @react-native-community/netinfo @react-native-async-storage/async-storage +``` + +**Use SQLite for enhanced performance (optional)** + +Expo built apps can now use SQLite with DataStore. SQLite offers considerable performance advantages over the default "AsyncStorage" database. + +To enable SQLite with DataStore for enhanced local database performance, follow the steps below: + +```sh +expo init AmplifyDataStoreExpo +cd AmplifyDataStoreExpo +npx amplify-app@latest +expo install aws-amplify @aws-amplify/datastore-storage-adapter expo-sqlite expo-file-system @react-native-community/netinfo @react-native-async-storage/async-storage +``` + +Then configure the SQLite storage adapter with DataStore in your app: + +```js +import { DataStore } from 'aws-amplify'; +import { ExpoSQLiteAdapter } from '@aws-amplify/datastore-storage-adapter/ExpoSQLiteAdapter'; + +DataStore.configure({ + storageAdapter: ExpoSQLiteAdapter +}); +``` + + + diff --git a/src/fragments/lib/graphqlapi/js/complex-objects.mdx b/src/fragments/lib/graphqlapi/js/complex-objects.mdx index 0594a09e7db..7e88dce2ce5 100644 --- a/src/fragments/lib/graphqlapi/js/complex-objects.mdx +++ b/src/fragments/lib/graphqlapi/js/complex-objects.mdx @@ -1,4 +1,7 @@ + + ## Complex objects + Many times you might want to create logical objects that have more complex data, such as images or videos, as part of their structure. For example, you might create a Person type with a profile picture or a Post type that has an associated image. With AWS AppSync, you can model these as GraphQL types, referred to as complex objects. If any of your mutations have a variable with bucket, key, region, mimeType and localUri fields, the SDK uploads the file to Amazon S3 for you. For a complete working example of this feature, see [aws-amplify-graphql](https://github.com/aws-samples/aws-amplify-graphql) on GitHub. @@ -12,18 +15,19 @@ amplify add api #Select Cognito User Pool for authorization type ``` When prompted, use the following schema: + ```graphql type Todo @model { - id: ID! - name: String! - description: String! - file: S3Object + id: ID! + name: String! + description: String! + file: S3Object } type S3Object { - bucket: String! - key: String! - region: String! + bucket: String! + key: String! + region: String! } input CreateTodoInput { @@ -33,9 +37,10 @@ input CreateTodoInput { file: S3ObjectInput # This input type will be generated for you } ``` + Save and run `amplify push` to deploy changes. -To use complex objects you need AWS Identity and Access Management credentials for reading and writing to Amazon S3 which `amplify add auth` configured in the default setting along with a Cognito user pool. These can be separate from the other auth credentials you use in your AWS AppSync client. Credentials for complex objects are set using the `complexObjectsCredentials` parameter, which you can use with AWS Amplify and the complex objects feature like so: +To use complex objects you need AWS Identity and Access Management credentials for reading and writing to Amazon S3 which `amplify add auth` configures in the default setting along with a Cognito user pool. These can be separate from the other auth credentials you use in your AWS AppSync client. Credentials for complex objects are set using the `complexObjectsCredentials` parameter, which you can use with AWS Amplify and the complex objects feature like so: ```javascript const client = new AWSAppSyncClient({ @@ -56,7 +61,7 @@ const client = new AWSAppSyncClient({ const region = aws_config.aws_user_files_s3_bucket_region; const visibility = 'private'; const { identityId } = await Auth.currentCredentials(); - + const key = `${visibility}/${identityId}/${uuid()}${extension && '.'}${extension}`; file = { @@ -82,4 +87,4 @@ const client = new AWSAppSyncClient({ })(); ``` -When you run the above mutation a record will be in a DynamoDB table for your AppSync API as well as the corresponding file in an S3 bucket. \ No newline at end of file +When you run the above mutation, a record will be in a DynamoDB table for your AppSync API as well as the corresponding file in an S3 bucket. diff --git a/src/fragments/lib/graphqlapi/js/create-or-re-use-existing-backend.mdx b/src/fragments/lib/graphqlapi/js/existing-resources.mdx similarity index 51% rename from src/fragments/lib/graphqlapi/js/create-or-re-use-existing-backend.mdx rename to src/fragments/lib/graphqlapi/js/existing-resources.mdx index da5eb5c2795..763cab2c436 100644 --- a/src/fragments/lib/graphqlapi/js/create-or-re-use-existing-backend.mdx +++ b/src/fragments/lib/graphqlapi/js/existing-resources.mdx @@ -1,29 +1,3 @@ -## Create new AppSync GraphQL API - -To create a new GraphQL API, you can use the Amplify CLI `api` category: - -```bash -amplify add api -``` - -When prompted, select **GraphQL**. - -The CLI prompts will help you to customize the options for your GraphQL API. With the provided options, you can: -- Choose the API name -- Choose the default authorization type -- If using an API key as the authorization type, choose the expiration date for the API key -- Configure additional authorization types -- Enable conflict detection (for use with [DataStore](/lib/datastore/getting-started)) -- Choose to either reference an existing GraphQL schema or be given starter GraphQL schema boilerplates - -After configuring your GraphQL API options, update your backend: - -```bash -amplify push -``` - -The `aws-exports.js` configuration file will be updated with the new API details, - ## Re-use existing AppSync GraphQL API As an alternative to automatic configuration, you can manually enter AWS AppSync configuration parameters in your app. Authentication type options are `API_KEY`, `AWS_IAM`, `AMAZON_COGNITO_USER_POOLS` and `OPENID_CONNECT`. @@ -32,13 +6,14 @@ As an alternative to automatic configuration, you can manually enter AWS AppSync ```javascript const myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'API_KEY', - 'aws_appsync_apiKey': 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx', - // ... -} + // ... + aws_appsync_graphqlEndpoint: + 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'API_KEY', + aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx' + // ... +}; Amplify.configure(myAppConfig); ``` @@ -47,12 +22,13 @@ Amplify.configure(myAppConfig); ```javascript const myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'AWS_IAM', - // ... -} + // ... + aws_appsync_graphqlEndpoint: + 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'AWS_IAM' + // ... +}; Amplify.configure(myAppConfig); ``` @@ -61,12 +37,13 @@ Amplify.configure(myAppConfig); ```javascript const myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'AMAZON_COGNITO_USER_POOLS', // You have configured Auth with Amazon Cognito User Pool ID and Web Client Id - // ... -} + // ... + aws_appsync_graphqlEndpoint: + 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS' // You have configured Auth with Amazon Cognito User Pool ID and Web Client Id + // ... +}; Amplify.configure(myAppConfig); ``` @@ -75,12 +52,13 @@ Amplify.configure(myAppConfig); ```javascript const myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'OPENID_CONNECT', // Before calling API.graphql(...) is required to do Auth.federatedSignIn(...) check authentication guide for details. - // ... -} + // ... + aws_appsync_graphqlEndpoint: + 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'OPENID_CONNECT' // Before calling API.graphql(...) is required to do Auth.federatedSignIn(...) check authentication guide for details. + // ... +}; Amplify.configure(myAppConfig); ``` @@ -91,17 +69,16 @@ Amplify.configure(myAppConfig); ```javascript const myAppConfig = { - // ... - 'aws_appsync_graphqlEndpoint': 'https://api.yourdomain.com/graphql', - 'aws_appsync_region': 'us-east-1', - 'aws_appsync_authenticationType': 'API_KEY' // All auth modes are supported - // ... -} + // ... + aws_appsync_graphqlEndpoint: 'https://api.yourdomain.com/graphql', + aws_appsync_region: 'us-east-1', + aws_appsync_authenticationType: 'API_KEY' // All auth modes are supported + // ... +}; Amplify.configure(myAppConfig); ``` - ## Using a non-AppSync GraphQL Server To access a non-AppSync GraphQL API with your app, you need to configure the endpoint URL in your app’s configuration. Add the following line to your setup: @@ -109,8 +86,8 @@ To access a non-AppSync GraphQL API with your app, you need to configure the end ```js import { Amplify, API } from 'aws-amplify'; import awsconfig from './aws-exports'; - -// Considering you have an existing aws-exports.js configuration file + +// Considering you have an existing aws-exports.js configuration file Amplify.configure(awsconfig); // Configure a custom GraphQL endpoint @@ -129,7 +106,7 @@ When working with a non-AppSync GraphQL endpoint, you may need to set request he Amplify.configure({ API: { graphql_headers: async () => ({ - 'My-Custom-Header': 'my value' + 'My-Custom-Header': 'my value' }) } }); diff --git a/src/fragments/lib/graphqlapi/js/subscribe-data.mdx b/src/fragments/lib/graphqlapi/js/subscribe-data.mdx index 05f6c4e511f..9a9875c082d 100644 --- a/src/fragments/lib/graphqlapi/js/subscribe-data.mdx +++ b/src/fragments/lib/graphqlapi/js/subscribe-data.mdx @@ -1,3 +1,5 @@ + + ## Using Amplify GraphQL client Subscriptions is a GraphQL feature allowing the server to send data to its clients when a specific event happens. You can enable real-time data integration in your app with a subscription. diff --git a/src/fragments/lib/ios.mdx b/src/fragments/lib/ios.mdx index e852c6567df..4fc22e12257 100644 --- a/src/fragments/lib/ios.mdx +++ b/src/fragments/lib/ios.mdx @@ -1,5 +1,7 @@ If you already have existing resources to add to your application and want to bypass the tutorial, see [Use existing AWS resources](/lib/project-setup/use-existing-resources). + + **Amplify libraries should be used for all new cloud connected applications.** If you are currently using the AWS Mobile SDK for iOS, you can access the documentation [here](/sdk). diff --git a/src/fragments/lib/js.mdx b/src/fragments/lib/js.mdx index 65e12ac14c9..1cdf7a0f8dd 100644 --- a/src/fragments/lib/js.mdx +++ b/src/fragments/lib/js.mdx @@ -11,6 +11,5 @@ What's next? Here are some things you can add to your app: - [Serverless APIs](/lib/graphqlapi/getting-started) - [Analytics](/lib/analytics/getting-started) - [AI/ML](/lib/predictions/getting-started) -- [Push Notification](/lib/push-notifications/getting-started) - [PubSub](/lib/pubsub/getting-started) - [AR/VR](/lib/xr/getting-started) diff --git a/src/fragments/lib/project-setup/js/getting-started.mdx b/src/fragments/lib/project-setup/js/getting-started.mdx new file mode 100644 index 00000000000..464828a1f4e --- /dev/null +++ b/src/fragments/lib/project-setup/js/getting-started.mdx @@ -0,0 +1,48 @@ +import js0 from '/src/fragments/start/getting-started/angular/setup.mdx'; +import js1 from '/src/fragments/start/getting-started/ionic/setup.mdx'; +import js2 from '/src/fragments/start/getting-started/react/setup.mdx'; +import js3 from '/src/fragments/start/getting-started/vue/setup.mdx'; +import js5 from '/src/fragments/start/getting-started/next/setup.mdx'; +import js6 from '/src/fragments/start/getting-started/vanillajs/setup.mdx'; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/fragments/lib/pubsub/js/getting-started.mdx b/src/fragments/lib/pubsub/js/getting-started.mdx index ccada3076b1..855806abeff 100644 --- a/src/fragments/lib/pubsub/js/getting-started.mdx +++ b/src/fragments/lib/pubsub/js/getting-started.mdx @@ -1,14 +1,17 @@ The AWS Amplify PubSub category provides connectivity with cloud-based message-oriented middleware. You can use PubSub to pass messages between your app instances and your app's backend creating real-time interactive experiences. -PubSub is available with **AWS IoT** and **Generic MQTT Over WebSocket Providers**. +PubSub is available with **AWS IoT** and **Generic MQTT Over WebSocket Providers**. + + + -With AWS IoT, AWS Amplify's PubSub automatically signs your HTTP requests when sending your messages. + With AWS IoT, AWS Amplify's PubSub automatically signs your HTTP requests when sending your messages. ## AWS IoT -When used with `AWSIoTProvider`, PubSub is capable of signing request according to [Signature Version 4](https://docs.aws.amazon.com/general/latest/gr/signature-version-4.html). +When used with `AWSIoTProvider`, PubSub is capable of signing request according to [Signature Version 4](https://docs.aws.amazon.com/general/latest/gr/signature-version-4.html). To use in your app, import `AWSIoTProvider`: @@ -21,34 +24,38 @@ Define your endpoint and region in your configuration: ```javascript // Apply plugin with configuration -Amplify.addPluggable(new AWSIoTProvider({ - aws_pubsub_region: '', - aws_pubsub_endpoint: 'wss://xxxxxxxxxxxxx.iot..amazonaws.com/mqtt', - })); +Amplify.addPluggable( + new AWSIoTProvider({ + aws_pubsub_region: '', + aws_pubsub_endpoint: + 'wss://xxxxxxxxxxxxx.iot..amazonaws.com/mqtt' + }) +); ``` -Find your `aws_pubsub_endpoint` by logging onto your **AWS Console**, choose **IoT Core** from the list of services, then choose *Settings* from the left navigation pane. +Find your `aws_pubsub_endpoint` by logging onto your **AWS Console**, choosing **IoT Core** from the list of services and then choosing _Settings_ from the left navigation pane. ### Step 1: Create IAM policies for AWS IoT -To use PubSub with AWS IoT, you will need to create the necessary IAM policies in the AWS IoT Console, and attach them to your Amazon Cognito Identity. +To use PubSub with AWS IoT, you will need to create the necessary IAM policies in the AWS IoT Console, and attach them to your Amazon Cognito Identity. -Go to IoT Core and choose *Secure* from the left navigation pane, and then *Policies* from the dropdown menu. Next, click *Create*. The following `myIoTPolicy` policy will allow full access to all the topics. +Go to IoT Core and choose _Secure_ from the left navigation pane, and then _Policies_ from the dropdown menu. Next, click _Create_. The following `myIoTPolicy` policy will allow full access to all the topics. ![Alt text](/images/create-iot-policy.png) ### Step 2: Attach your policy to your Amazon Cognito Identity -The next step is attaching the policy to your *Cognito Identity*. +The next step is attaching the policy to your _Cognito Identity_. You can retrieve the `Cognito Identity Id` of a logged in user with Auth Module: + ```javascript - Auth.currentCredentials().then((info) => { - const cognitoIdentityId = info.identityId; - }); +Auth.currentCredentials().then((info) => { + const cognitoIdentityId = info.identityId; +}); ``` -Then, you need to send your *Cognito Identity Id* to the AWS backend and attach `myIoTPolicy`. You can do this with the following [AWS CLI](https://aws.amazon.com/cli/) command: +Then, you need to send your _Cognito Identity Id_ to the AWS backend and attach `myIoTPolicy`. You can do this with the following [AWS CLI](https://aws.amazon.com/cli/) command: ```bash aws iot attach-policy --policy-name 'myIoTPolicy' --target '' @@ -59,10 +66,10 @@ aws iot attach-policy --policy-name 'myIoTPolicy' --target '-`. Select the **Resources** tab and tap on `AuthRole` **Physical ID**. -The IAM console will be opened in a new tab. Once there, tap on the button **Attach Policies**, then search `AWSIoTDataAccess` and `AWSIoTConfigAccess`, select them and tap on **Attach policy**. +The IAM console will be opened in a new tab. Once there, tap on the button **Attach Policies**, then search `AWSIoTDataAccess` and `AWSIoTConfigAccess`, select them and tap on **Attach policy**. + +If you are using Cognito Groups, the IAM role associated with that group also need the `AWSIoTDataAccess` and `AWSIoTConfigAccess` policies attached to it. -If you are using Cognito Groups the IAM role associated with that group also need the `AWSIoTDataAccess` and `AWSIoTConfigAccess` policies attached to it. - > Failing to grant IoT related permissions to the Cognito Authenticated Role will result in errors similar to the following in your browser console: `errorCode: 8, errorMessage: AMQJS0008I Socket closed.` ## Third Party MQTT Providers @@ -71,15 +78,18 @@ Import PubSub module and related service provider plugin to your app: ```javascript import { PubSub } from 'aws-amplify'; -import { MqttOverWSProvider } from "@aws-amplify/pubsub/lib/Providers"; +import { MqttOverWSProvider } from '@aws-amplify/pubsub/lib/Providers'; ``` To configure your service provider with a service endpoint, add following code: + ```javascript // Apply plugin with configuration -Amplify.addPluggable(new MqttOverWSProvider({ - aws_pubsub_endpoint: 'wss://iot.eclipse.org:443/mqtt', -})); +Amplify.addPluggable( + new MqttOverWSProvider({ + aws_pubsub_endpoint: 'wss://iot.eclipse.org:443/mqtt' + }) +); ``` You can integrate any MQTT Over WebSocket provider with your app. Click [here](https://docs.aws.amazon.com/iot/latest/developerguide/protocols.html#mqtt-ws) to learn more about MQTT Over WebSocket. @@ -95,18 +105,23 @@ import { AWSIoTProvider } from '@aws-amplify/pubsub'; const pubsub = new PubSub({}); // Apply plugin with configuration -pubsub.addPluggable(new AWSIoTProvider({ - aws_pubsub_region: '', - aws_pubsub_endpoint: 'wss://xxxxxxxxxxxxx.iot..amazonaws.com/mqtt', -})); +pubsub.addPluggable( + new AWSIoTProvider({ + aws_pubsub_region: '', + aws_pubsub_endpoint: + 'wss://xxxxxxxxxxxxx.iot..amazonaws.com/mqtt' + }) +); // Remove plugin using the provider name pubsub.removePluggable('AWSIoTProvider'); // Apply plugin with new configuration -pubsub.addPluggable(new AWSIoTProvider({ - aws_pubsub_region: '', - aws_pubsub_endpoint: 'wss://xxxxxxxxxxxxx.iot..amazonaws.com/mqtt', -})); - +pubsub.addPluggable( + new AWSIoTProvider({ + aws_pubsub_region: '', + aws_pubsub_endpoint: + 'wss://xxxxxxxxxxxxx.iot..amazonaws.com/mqtt' + }) +); ``` diff --git a/src/fragments/lib/push-notifications/js/reactnative.mdx b/src/fragments/lib/push-notifications/js/reactnative.mdx deleted file mode 100644 index 8dafee77010..00000000000 --- a/src/fragments/lib/push-notifications/js/reactnative.mdx +++ /dev/null @@ -1,5 +0,0 @@ - - -Push Notifications are currently supported only for **React Native**. For handling Web Push Notifications with Service Workers, visit our [Service Workers Guide](/lib/utilities/serviceworker#handling-a-push-notification). - - diff --git a/src/fragments/lib/reactnative.mdx b/src/fragments/lib/reactnative.mdx new file mode 100644 index 00000000000..65e12ac14c9 --- /dev/null +++ b/src/fragments/lib/reactnative.mdx @@ -0,0 +1,16 @@ +## Amplify JavaScript + +The Amplify JavaScript libraries are supported for different web and mobile frameworks including React, React Native, Angular, Ionic, and Vue. It is recommended that you first complete the [Getting Started](https://docs.amplify.aws/start/q/integration/js/) guide for Amplify JavaScript. + +What's next? Here are some things you can add to your app: + +- [Authentication](/lib/auth/getting-started) +- [DataStore](/lib/datastore/getting-started) +- [User File Storage](/lib/storage/getting-started) +- [Geo](/lib/geo/getting-started) +- [Serverless APIs](/lib/graphqlapi/getting-started) +- [Analytics](/lib/analytics/getting-started) +- [AI/ML](/lib/predictions/getting-started) +- [Push Notification](/lib/push-notifications/getting-started) +- [PubSub](/lib/pubsub/getting-started) +- [AR/VR](/lib/xr/getting-started) diff --git a/src/fragments/lib/restapi/js/authz.mdx b/src/fragments/lib/restapi/js/authz.mdx index 3c6503d5d0c..7dd7870ed65 100644 --- a/src/fragments/lib/restapi/js/authz.mdx +++ b/src/fragments/lib/restapi/js/authz.mdx @@ -1,5 +1,3 @@ -## Request headers - When working with a REST endpoint, you may need to set request headers for authorization purposes. This is done by passing a `custom_header` function into the configuration: ```javascript @@ -7,10 +5,10 @@ Amplify.configure({ API: { endpoints: [ { - name: "sampleCloudApi", - endpoint: "https://xyz.execute-api.us-east-1.amazonaws.com/Development", - custom_header: async () => { - return { Authorization : 'token' } + name: 'sampleCloudApi', + endpoint: 'https://xyz.execute-api.us-east-1.amazonaws.com/Development', + custom_header: async () => { + return { Authorization: 'token' }; // Alternatively, with Cognito User Pools use this: // return { Authorization: `Bearer ${(await Auth.currentSession()).getAccessToken().getJwtToken()}` } // return { Authorization: `Bearer ${(await Auth.currentSession()).getIdToken().getJwtToken()}` } @@ -23,13 +21,13 @@ Amplify.configure({ ## Note related to use Access Token or ID Token -The ID Token contains claims about the identity of the authenticated user such as name, email, and phone_number. It could have custom claims as well, for example using [Amplify CLI](https://docs.amplify.aws/cli/usage/lambda-triggers#override-id-token-claims). On the Amplify Authentication category you can retrieve the Id Token using: +The ID Token contains claims about the identity of the authenticated user such as name, email, and phone_number. It could have custom claims as well, for example using [Amplify CLI](https://docs.amplify.aws/cli/usage/lambda-triggers#override-id-token-claims). On the Amplify Authentication category you can retrieve the Id Token using: ```javascript (await Auth.currentSession()).getIdToken().getJwtToken(); -``` +``` -The Access Token contains scopes and groups and is used to grant access to authorized resources. [This is a tutorial for enabling custom scopes.](https://aws.amazon.com/premiumsupport/knowledge-center/cognito-custom-scopes-api-gateway/). You can retrieve the Access Token using +The Access Token contains scopes and groups and is used to grant access to authorized resources. [This is a tutorial for enabling custom scopes.](https://aws.amazon.com/premiumsupport/knowledge-center/cognito-custom-scopes-api-gateway/). You can retrieve the Access Token using ```javascript (await Auth.currentSession()).getAccessToken().getJwtToken(); @@ -39,14 +37,14 @@ The Access Token contains scopes and groups and is used to grant access to autho To use custom headers on your HTTP request, you need to add these to Amazon API Gateway first. For more info about configuring headers, please visit [Amazon API Gateway Developer Guide](http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html) -If you have used Amplify CLI to create your API, you can enable custom headers by following above steps: +If you have used Amplify CLI to create your API, you can enable custom headers by following above steps: 1. Visit [Amazon API Gateway console](https://aws.amazon.com/api-gateway/). -3. On Amazon API Gateway console, click on the path you want to configure (e.g. /{proxy+}) -4. Then click the *Actions* dropdown menu and select **Enable CORS** -5. Add your custom header (e.g. my-custom-header) on the text field Access-Control-Allow-Headers, separated by commas, like: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,my-custom-header'. -6. Click on 'Enable CORS and replace existing CORS headers' and confirm. -7. Finally, similar to step 3, click the Actions drop-down menu and then select **Deploy API**. Select **Development** on deployment stage and then **Deploy**. (Deployment could take a couple of minutes). +2. On Amazon API Gateway console, click on the path you want to configure (e.g. /{proxy+}) +3. Then click the _Actions_ dropdown menu and select **Enable CORS** +4. Add your custom header (e.g. my-custom-header) on the text field Access-Control-Allow-Headers, separated by commas, like: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,my-custom-header'. +5. Click on 'Enable CORS and replace existing CORS headers' and confirm. +6. Finally, similar to step 3, click the Actions drop-down menu and then select **Deploy API**. Select **Development** on deployment stage and then **Deploy**. (Deployment could take a couple of minutes). ## Unauthenticated Requests @@ -57,16 +55,18 @@ You can use the API category to access API Gateway endpoints that don't require You can use the JWT token provided by the Authentication API to authenticate against API Gateway directly when using a custom authorizer. ```javascript -async function postData() { - const apiName = 'MyApiName'; - const path = '/path'; - const myInit = { - headers: { - Authorization: `Bearer ${(await Auth.currentSession()).getIdToken().getJwtToken()}`, - }, - }; - - return await API.post(apiName, path, myInit); +async function postData() { + const apiName = 'MyApiName'; + const path = '/path'; + const myInit = { + headers: { + Authorization: `Bearer ${(await Auth.currentSession()) + .getIdToken() + .getJwtToken()}` + } + }; + + return await API.post(apiName, path, myInit); } postData(); diff --git a/src/fragments/lib/restapi/js/cancel.mdx b/src/fragments/lib/restapi/js/cancel.mdx index 6c06bb40d84..68f36a4314b 100644 --- a/src/fragments/lib/restapi/js/cancel.mdx +++ b/src/fragments/lib/restapi/js/cancel.mdx @@ -1,5 +1,3 @@ -## CANCEL API requests - You may cancel any request made through API category by keeping a reference to the promise returned. ```javascript @@ -11,7 +9,8 @@ try { console.log(error); // If the error is because the request was cancelled we can confirm here. if(API.isCancel(error)) { - console.log(error.message); // "my message for cancellation" + // "my message for cancellation" + console.log(error.message); // handle user cancellation logic } } @@ -26,10 +25,10 @@ You need to ensure that the promise returned from `API.get()` or any other API c ```javascript async function makeAPICall() { - return API.get(myApiName, myPath, myInit); + return API.get(myApiName, myPath, myInit); } const promise = makeAPICall(); // The following will NOT cancel the request. -API.cancel(promise, "my error message"); +API.cancel(promise, 'my error message'); ``` diff --git a/src/fragments/lib/restapi/js/delete.mdx b/src/fragments/lib/restapi/js/delete.mdx index 74f8243c244..57fc04becf3 100644 --- a/src/fragments/lib/restapi/js/delete.mdx +++ b/src/fragments/lib/restapi/js/delete.mdx @@ -1,18 +1,19 @@ ## DELETE data + + ```javascript const apiName = 'MyApiName'; // replace this with your api name. const path = '/path'; //replace this with the path you have configured on your API -const myInit = { // OPTIONAL - headers: {}, // OPTIONAL +const myInit = { + headers: {} // OPTIONAL }; -API - .del(apiName, path, myInit) - .then(response => { +API.del(apiName, path, myInit) + .then((response) => { // Add your code here }) - .catch(error => { + .catch((error) => { console.log(error.response); }); ``` @@ -20,13 +21,13 @@ API Example with async/await ```javascript -async function deleteData() { - const apiName = 'MyApiName'; - const path = '/path'; - const myInit = { // OPTIONAL - headers: {} // OPTIONAL - } - return await API.del(apiName, path, myInit); +async function deleteData() { + const apiName = 'MyApiName'; + const path = '/path'; + const myInit = { + headers: {} // OPTIONAL + }; + return await API.del(apiName, path, myInit); } deleteData(); @@ -34,14 +35,16 @@ deleteData(); Access body in the Lambda function + + ```javascript // using a basic lambda handler exports.handler = (event, context) => { console.log('body: ', event.body); -} +}; // using serverless express app.delete('/myendpoint', function(req, res) { console.log('body: ', req.body); }); -``` \ No newline at end of file +``` diff --git a/src/fragments/lib/restapi/js/fetch.mdx b/src/fragments/lib/restapi/js/fetch.mdx index 8a408b9ffd4..0c4628c619a 100644 --- a/src/fragments/lib/restapi/js/fetch.mdx +++ b/src/fragments/lib/restapi/js/fetch.mdx @@ -4,39 +4,38 @@ To invoke an endpoint, you need to set `apiName`, `path` and `headers` parameter ```javascript const apiName = 'MyApiName'; -const path = '/path'; -const myInit = { // OPTIONAL - headers: {}, // OPTIONAL - response: true, // OPTIONAL (return the entire Axios response object instead of only response.data) - queryStringParameters: { // OPTIONAL - name: 'param', - }, +const path = '/path'; +const myInit = { + headers: {}, // OPTIONAL + response: true, // OPTIONAL (return the entire Axios response object instead of only response.data) + queryStringParameters: { + name: 'param' // OPTIONAL + } }; -API - .get(apiName, path, myInit) - .then(response => { +API.get(apiName, path, myInit) + .then((response) => { // Add your code here }) - .catch(error => { + .catch((error) => { console.log(error.response); - }); + }); ``` Example with async/await ```javascript -function getData() { +function getData() { const apiName = 'MyApiName'; const path = '/path'; - const myInit = { // OPTIONAL - headers: {}, // OPTIONAL + const myInit = { + headers: {} // OPTIONAL }; return API.get(apiName, path, myInit); } -(async function () { +(async function() { const response = await getData(); })(); ``` @@ -47,42 +46,42 @@ To use query parameters with `get` method, you can pass them in `queryStringPara ```javascript const items = await API.get('myCloudApi', '/items', { - 'queryStringParameters': { - 'order': 'byPrice' + queryStringParameters: { + order: 'byPrice' } }); ``` ## HEAD + + ```javascript const apiName = 'MyApiName'; // replace this with your api name. const path = '/path'; //replace this with the path you have configured on your API -const myInit = { // OPTIONAL - headers: {}, // OPTIONAL +const myInit = { + headers: {} // OPTIONAL }; -API - .head(apiName, path, myInit) - .then(response => { - // Add your code here - }); +API.head(apiName, path, myInit).then((response) => { + // Add your code here +}); ``` Example with async/await: ```javascript -function head() { +function head() { const apiName = 'MyApiName'; const path = '/path'; - const myInit = { // OPTIONAL - headers: {}, // OPTIONAL + const myInit = { + headers: {} // OPTIONAL }; return API.head(apiName, path, myInit); } -(async function () { +(async function() { const response = await head(); })(); ``` @@ -91,13 +90,13 @@ function head() { > To learn more about Lambda Proxy Integration, please visit [Amazon API Gateway Developer Guide](https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-create-api-as-simple-proxy-for-lambda.html). -If you are using a REST API which is generated with Amplify CLI, your backend is created with Lambda Proxy Integration, and you can access your query parameters & body within your Lambda function via the *event* object: +If you are using a REST API which is generated with Amplify CLI, your backend is created with Lambda Proxy Integration, and you can access your query parameters & body within your Lambda function via the _event_ object: ```javascript exports.handler = function(event, context, callback) { - console.log(event.queryStringParameters); - console.log('body: ', event.body); -} + console.log(event.queryStringParameters); + console.log('body: ', event.body); +}; ``` Alternatively, you can update your backend file which is located at `amplify/backend/function/[your-lambda-function]/app.js` with the middleware: @@ -135,7 +134,7 @@ By default, calling an API with AWS Amplify parses a JSON response. If you have ```javascript let file = await API.get('myCloudApi', '/items', { - 'responseType': 'blob', + responseType: 'blob' }); ``` diff --git a/src/fragments/lib/restapi/js/getting-started.mdx b/src/fragments/lib/restapi/js/getting-started.mdx index 2355a1f0d4f..9ecc99ae8c3 100644 --- a/src/fragments/lib/restapi/js/getting-started.mdx +++ b/src/fragments/lib/restapi/js/getting-started.mdx @@ -53,14 +53,10 @@ import { Amplify, API } from 'aws-amplify'; Amplify.configure({ // OPTIONAL - if your API requires authentication Auth: { - // REQUIRED - Amazon Cognito Identity Pool ID - identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', - // REQUIRED - Amazon Cognito Region - region: 'XX-XXXX-X', - // OPTIONAL - Amazon Cognito User Pool ID - userPoolId: 'XX-XXXX-X_abcd1234', - // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string) - userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3', + identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', // REQUIRED - Amazon Cognito Identity Pool ID + region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region + userPoolId: 'XX-XXXX-X_abcd1234', // OPTIONAL - Amazon Cognito User Pool ID + userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3', // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string) }, API: { endpoints: [ @@ -80,6 +76,8 @@ Amplify.configure({ ### AWS Regional Endpoints + + You can utilize regional endpoints by passing in the *service* and *region* information to the configuration. See [AWS Regions and Endpoints](https://docs.aws.amazon.com/general/latest/gr/rande.html). The example below defines a [Lambda invocation](https://docs.aws.amazon.com/lambda/latest/dg/API_Invoke.html) in the `us-east-1` region: ```javascript @@ -104,8 +102,4 @@ API: { **Configuring Amazon Cognito Regional Endpoints:** To call regional service endpoints, your Amazon Cognito role needs to be configured with appropriate access for the related service. See [AWS Cognito Documentation](https://docs.aws.amazon.com/cognito/latest/developerguide/iam-roles.html) for more details. - - -## API Reference - -For the complete API documentation for API module, visit our [API Reference](https://aws-amplify.github.io/amplify-js/api/classes/apiclass.html). + \ No newline at end of file diff --git a/src/fragments/lib/restapi/js/update.mdx b/src/fragments/lib/restapi/js/update.mdx index 21c00bf7975..985b42b4f8e 100644 --- a/src/fragments/lib/restapi/js/update.mdx +++ b/src/fragments/lib/restapi/js/update.mdx @@ -6,16 +6,15 @@ Posts data to the API endpoint: const apiName = 'MyApiName'; // replace this with your api name. const path = '/path'; //replace this with the path you have configured on your API const myInit = { - body: {}, // replace this with attributes you need - headers: {}, // OPTIONAL + body: {}, // replace this with attributes you need + headers: {} // OPTIONAL }; -API - .post(apiName, path, myInit) - .then(response => { +API.post(apiName, path, myInit) + .then((response) => { // Add your code here }) - .catch(error => { + .catch((error) => { console.log(error.response); }); ``` @@ -23,15 +22,15 @@ API Example with async/await ```javascript -async function postData() { - const apiName = 'MyApiName'; - const path = '/path'; - const myInit = { // OPTIONAL - body: {}, // replace this with attributes you need - headers: {}, // OPTIONAL - }; - - return await API.post(apiName, path, myInit); +async function postData() { + const apiName = 'MyApiName'; + const path = '/path'; + const myInit = { + body: {}, // replace this with attributes you need + headers: {} // OPTIONAL + }; + + return await API.post(apiName, path, myInit); } postData(); @@ -45,16 +44,15 @@ When used together with a REST API, `put()` method can be used to create or upda const apiName = 'MyApiName'; // replace this with your api name. const path = '/path'; // replace this with the path you have configured on your API const myInit = { - body: {}, // replace this with attributes you need - headers: {}, // OPTIONAL + body: {}, // replace this with attributes you need + headers: {} // OPTIONAL }; -API - .put(apiName, path, myInit) - .then(response => { +API.put(apiName, path, myInit) + .then((response) => { // Add your code here }) - .catch(error => { + .catch((error) => { console.log(error.response); }); ``` @@ -62,15 +60,15 @@ API Example with async/await: ```javascript -async function putData() { - const apiName = 'MyApiName'; - const path = '/path'; - const myInit = { // OPTIONAL - body: {}, // replace this with attributes you need - headers: {}, // OPTIONAL - }; - - return await API.put(apiName, path, myInit); +async function putData() { + const apiName = 'MyApiName'; + const path = '/path'; + const myInit = { + body: {}, // replace this with attributes you need + headers: {} // OPTIONAL + }; + + return await API.put(apiName, path, myInit); } putData(); @@ -82,7 +80,7 @@ Access body in the Lambda function // using a basic lambda handler exports.handler = (event, context) => { console.log('body: ', event.body); -} +}; // using serverless express app.put('/myendpoint', function(req, res) { @@ -94,10 +92,10 @@ Update a record: ```javascript const params = { - body: { - itemId: '12345', - itemDesc: ' update description' - }, + body: { + itemId: '12345', + itemDesc: ' update description' + } }; const apiResponse = await API.put('MyTableCRUD', '/manage-items', params); @@ -105,14 +103,16 @@ const apiResponse = await API.put('MyTableCRUD', '/manage-items', params); ## Access body in Lambda proxy function + + ```javascript // using a basic lambda handler exports.handler = (event, context) => { console.log('body: ', event.body); -} +}; // using serverless express app.post('/myendpoint', function(req, res) { console.log('body: ', req.body); }); -``` \ No newline at end of file +``` diff --git a/src/fragments/lib/storage/android/download.mdx b/src/fragments/lib/storage/android/download.mdx index 518d06f9c97..d1bb9e57bb0 100644 --- a/src/fragments/lib/storage/android/download.mdx +++ b/src/fragments/lib/storage/android/download.mdx @@ -1,5 +1,7 @@ ### Download to file + + If you uploaded the data using the key `ExampleKey`, you can retrieve the data using `Amplify.Storage.downloadFile`. diff --git a/src/fragments/lib/storage/existing-resources.mdx b/src/fragments/lib/storage/existing-resources.mdx index 6a05527ca20..cb7dce4bb0f 100644 --- a/src/fragments/lib/storage/existing-resources.mdx +++ b/src/fragments/lib/storage/existing-resources.mdx @@ -6,26 +6,27 @@ amplify import storage For more details, see how to [Use an existing S3 bucket or DynamoDB table](/cli/storage/import). -If you are not using the Amplify CLI, an existing Amazon S3 bucket can be used by referencing it in your `amplifyconfiguration.json` file. +If you are not using the Amplify CLI, an existing Amazon S3 bucket can be used by referencing it in your `amplifyconfiguration` file. -When you are not using Amplify CLI, adding existing Amazon S3 bucket to your application may require configuring bucket access permissions. e.g. Enabling read/write access to the cognito user pool that you are using with the Amplify Auth category. + When you are not using Amplify CLI, adding existing Amazon S3 bucket to your application may require configuring bucket access permissions. e.g. Enabling read/write access to the cognito user pool that you are using with the Amplify Auth category. ```json { - "storage": { - "plugins": { - "awsS3StoragePlugin": { - "bucket": "[BUCKET NAME]", - "region": "[REGION]" - } - } + "storage": { + "plugins": { + "awsS3StoragePlugin": { + "bucket": "[BUCKET NAME]", + "region": "[REGION]" + } } + } } ``` - **bucket**: Name of the bucket to use for storage -- **region**: AWS Region where the bucket is provisioned (e.g. *us-east-1*) +- **region**: AWS Region where the bucket is provisioned (e.g. _us-east-1_) + -Note that before you can add an AWS resource to your application, the application must have the Amplify libraries installed. If you need to perform this step, see [Install Amplify Libraries](/lib/project-setup/create-application#n2-install-amplify-libraries). \ No newline at end of file +Note that before you can add an AWS resource to your application, the application must have the Amplify libraries installed. If you need to perform this step, see [Install Amplify Libraries](/lib/project-setup/create-application#n2-install-amplify-libraries). diff --git a/src/fragments/lib/storage/js/browser-uploads.mdx b/src/fragments/lib/storage/js/browser-uploads.mdx new file mode 100644 index 00000000000..0db107cd016 --- /dev/null +++ b/src/fragments/lib/storage/js/browser-uploads.mdx @@ -0,0 +1,26 @@ +## Browser uploads + +Upload an image in the browser: + +```javascript +async function onChange(e) { + const file = e.target.files[0]; + try { + await Storage.put(file.name, file, { + contentType: "image/png", // contentType is optional + }); + } catch (error) { + console.log("Error uploading file: ", error); + } +} + +; +``` + + + +Note: 'contentType' is metadata (saved under the key 'Content-Type') for the S3 object and does not determine the 'Type' in the AWS S3 Console. If a file extension is not provided in the key of the uploaded object, the S3 console's 'Type' field will be emitted. Otherwise, the 'Type' will be populated to match the given extension of the key. The behavior of how the S3 object is treated will be based on 'contentType' in the metadata and not the 'Type'. + +For example: uploading a file with the key "example.jpg" will result in the 'Type' being set as "jpg", but the 'contentType' in metadata will determine it's behavior so setting it as "text/html" will result in the file being treated as an HTML file regardless of displayed 'Type' in the S3 console. + + \ No newline at end of file diff --git a/src/fragments/lib/storage/js/create-custom-plugin.mdx b/src/fragments/lib/storage/js/create-custom-plugin.mdx new file mode 100644 index 00000000000..aeadda3c40e --- /dev/null +++ b/src/fragments/lib/storage/js/create-custom-plugin.mdx @@ -0,0 +1,78 @@ +You can create your custom pluggable for Storage. This may be helpful if you want to integrate your app with a custom storage backend. + +To create a plugin implement the `StorageProvider` interface: + +```typescript +import { Storage, StorageProvider } from 'aws-amplify'; + +export default class MyStorageProvider implements StorageProvider { + // category and provider name + static category = 'Storage'; + static providerName = 'MyStorage'; + + // you need to implement these seven methods + // configure your provider + configure(config: object): object; + + // copy object, optional + copy?( + src: { key: string; identityId: string; level: 'public' | 'protected' | 'private' }, + dest: { key: string; level: 'public' | 'protected' | 'private' }, + options? + ): Promise + + // get object/pre-signed url from storage + get(key: string, options?): Promise + + // upload storage object + put(key: string, object, options?): Promise + + // remove object + remove(key: string, options?): Promise + + // list objects for the path + list(path, options?): Promise + + // return 'Storage'; + getCategory(): string; + + // return the name of you provider + getProviderName(): string; +``` + +You can now register your pluggable: + +```javascript +// add the plugin +Storage.addPluggable(new MyStorageProvider()); + +// get the plugin +Storage.getPluggable(MyStorageProvider.providerName); + +// remove the plugin +Storage.removePluggable(MyStorageProvider.providerName); + +// send configuration into Amplify +Storage.configure({ + [MyStorageProvider.providerName]: { + // My Storage provider configuration + } +}); +``` + +You can pass in your custom provider class to the Storage function to get Typescript support: + +```javascript +class MyStorageProvider implements StorageProvider { + ... + get(key: string, config: { config1: number; }): Promise<{ key: string }>; +} + +// will automatically use the return type from the provider's function signature +const getResult: Promise<{ key: string }> = Storage.get('key', { + provider: 'MyStorage', + config1: 123, +}); +``` + +The default provider (Amazon S3) is in use when you call `Storage.put( )` unless you specify a different provider: `Storage.put(key, object, {provider: 'MyStorage'})`. diff --git a/src/fragments/lib/storage/js/getting-started.mdx b/src/fragments/lib/storage/js/getting-started.mdx index 565d323eeda..f32a5c8c825 100644 --- a/src/fragments/lib/storage/js/getting-started.mdx +++ b/src/fragments/lib/storage/js/getting-started.mdx @@ -44,7 +44,7 @@ import { Amplify, Storage } from 'aws-amplify'; import awsconfig from './aws-exports'; Amplify.configure(awsconfig); ``` - + ## Manual Setup: Import storage bucket To configure Storage manually, you will have to configure Amplify Auth category as well. In other words, you will not be importing the autogenerated `aws-exports.js` - instead, you will be adding your own existing Amazon Cognito and Amazon S3 credentials in your app like this: @@ -197,7 +197,7 @@ Inline policy for the `Unauth_Role`: The policy template that Amplify CLI uses is found [here](https://github.com/aws-amplify/amplify-cli/blob/b12d20b9d85f7fc6abf7e2f7fbe11e1a108911b9/packages/amplify-category-storage/provider-utils/awscloudformation/cloudformation-templates/s3-cloudformation-template.json). ### Amazon S3 Bucket CORS Policy Setup - + To make calls to your S3 bucket from your App, you need to set up a CORS Policy for your S3 bucket. This callout is only for manual configuration of your S3 bucket, CORS Policy configuration is done automatically via Amplify CLI when running `amplify add storage`. @@ -245,90 +245,5 @@ The following steps will set up your CORS Policy: For information on Amazon S3 file access levels, please see [file access levels](/lib/storage/configureaccess). -## Using a Custom Plugin - -You can create your custom pluggable for Storage. This may be helpful if you want to integrate your app with a custom storage backend. - -To create a plugin implement the `StorageProvider` interface: - -```typescript -import { Storage, StorageProvider } from 'aws-amplify'; - -export default class MyStorageProvider implements StorageProvider { - // category and provider name - static category = 'Storage'; - static providerName = 'MyStorage'; - - // you need to implement these seven methods - // configure your provider - configure(config: object): object; - - // copy object, optional - copy?( - src: { key: string; identityId: string; level: 'public' | 'protected' | 'private' }, - dest: { key: string; level: 'public' | 'protected' | 'private' }, - options? - ): Promise - - // get object/pre-signed url from storage - get(key: string, options?): Promise - - // upload storage object - put(key: string, object, options?): Promise - - // remove object - remove(key: string, options?): Promise - - // list objects for the path - list(path, options?): Promise - - // return 'Storage'; - getCategory(): string; - - // return the name of you provider - getProviderName(): string; -``` - -You can now register your pluggable: - -```javascript -// add the plugin -Storage.addPluggable(new MyStorageProvider()); - -// get the plugin -Storage.getPluggable(MyStorageProvider.providerName); - -// remove the plugin -Storage.removePluggable(MyStorageProvider.providerName); - -// send configuration into Amplify -Storage.configure({ - [MyStorageProvider.providerName]: { - // My Storage provider configuration - } -}); - -``` - -You can pass in your custom provider class to the Storage function to get Typescript support: -```javascript -class MyStorageProvider implements StorageProvider { - ... - get(key: string, config: { config1: number; }): Promise<{ key: string }>; -} - -// will automatically use the return type from the provider's function signature -const getResult: Promise<{ key: string }> = Storage.get('key', { - provider: 'MyStorageProvider', - config1: 123, -}); -``` - -The default provider (Amazon S3) is in use when you call `Storage.put( )` unless you specify a different provider: `Storage.put(key, object, {provider: 'MyStorageProvider'})`. - ## Mocking and Local Testing with Amplify CLI -Amplify CLI supports running a local mock server for testing your application with Amazon S3. Please see the [CLI toolchain documentation](/cli/usage/mock) for more details. - -## API Reference - -For the complete API documentation for Storage module, visit our [API Reference](https://aws-amplify.github.io/amplify-js/api/classes/storageclass.html). +Amplify CLI supports running a local mock server for testing your application with Amazon S3. Please see the [CLI toolchain documentation](/cli/usage/mock) for more details. \ No newline at end of file diff --git a/src/fragments/lib/storage/js/list.mdx b/src/fragments/lib/storage/js/list.mdx index 90f2315e5d1..98350704045 100644 --- a/src/fragments/lib/storage/js/list.mdx +++ b/src/fragments/lib/storage/js/list.mdx @@ -1,11 +1,13 @@ List keys under a specified path, as well as `lastModified` timestamp. + + ## Public level list ```javascript Storage.list('photos/') // for listing ALL files without prefix, pass '' instead - .then(result => console.log(result)) - .catch(err => console.log(err)); + .then((result) => console.log(result)) + .catch((err) => console.log(err)); ``` Note the trailing slash `/` - if we had requested `Storage.list('photos')` it would also match against files like `photos123.jpg` alongside `photos/123.jpg`. @@ -27,42 +29,46 @@ The format of the result looks like this: Manually created folders will show up as files with a `size` of 0, but you can also match keys against a regex like `file.key.match(/\.[0-9a-z]+$/i)` to distinguish files vs folders. Since "folders" are a virtual concept in S3, any file may declare any depth of folder just by having a `/` in its name. If you need to list all the folders, you'll have to parse them accordingly to get an authoritative list of files and folders: ```js - function processStorageList(result) { - let files = [] - let folders = new Set() - result.forEach(res => { - if (res.size) { - files.push(res) - // sometimes files declare a folder with a / within then - let possibleFolder = res.key.split('/').slice(0,-1).join('/') - if (possibleFolder) folders.add(possibleFolder) - } else { - folders.add(res.key) - } - }) - return {files, folders} - } +function processStorageList(result) { + let files = []; + let folders = new Set(); + result.forEach((res) => { + if (res.size) { + files.push(res); + // sometimes files declare a folder with a / within then + let possibleFolder = res.key + .split('/') + .slice(0, -1) + .join('/'); + if (possibleFolder) folders.add(possibleFolder); + } else { + folders.add(res.key); + } + }); + return { files, folders }; +} ``` If you need the files and folders in terms of a nested object instead (for example, to build an explorer UI), you could parse it recursively: ```js - function processStorageList(results) { - const filesystem = {} - // https://stackoverflow.com/questions/44759750/how-can-i-create-a-nested-object-representation-of-a-folder-structure - const add = (source, target, item) => { - const elements = source.split("/"); - const element = elements.shift(); - if (!element) return // blank - target[element] = target[element] || {__data: item}// element; - if (elements.length) { - target[element] = typeof target[element] === "object" ? target[element] : {}; - add(elements.join("/"), target[element], item); - } - }; - results.forEach(item => add(item.key, filesystem, item)); - return filesystem - } +function processStorageList(results) { + const filesystem = {}; + // https://stackoverflow.com/questions/44759750/how-can-i-create-a-nested-object-representation-of-a-folder-structure + const add = (source, target, item) => { + const elements = source.split('/'); + const element = elements.shift(); + if (!element) return; // blank + target[element] = target[element] || { __data: item }; // element; + if (elements.length) { + target[element] = + typeof target[element] === 'object' ? target[element] : {}; + add(elements.join('/'), target[element], item); + } + }; + results.forEach((item) => add(item.key, filesystem, item)); + return filesystem; +} ``` This places each item's data inside a special `__data` key. @@ -73,41 +79,37 @@ To list current user's objects: ```javascript Storage.list('photos/', { level: 'protected' }) - .then(result => console.log(result)) - .catch(err => console.log(err)); + .then((result) => console.log(result)) + .catch((err) => console.log(err)); ``` To get other users' objects: ```javascript -Storage.list('photos/', { - level: 'protected', - identityId: 'xxxxxxx' // the identityId of that user +Storage.list('photos/', { + level: 'protected', + identityId: 'xxxxxxx' // the identityId of that user }) -.then(result => console.log(result)) -.catch(err => console.log(err)); + .then((result) => console.log(result)) + .catch((err) => console.log(err)); ``` ## Private level list ```javascript Storage.list('photos/', { level: 'private' }) - .then(result => console.log(result)) - .catch(err => console.log(err)); + .then((result) => console.log(result)) + .catch((err) => console.log(err)); ``` -## Access all files +## Access all files To get a list of all files in your S3 bucket under a specific prefix, you can set maxKeys to ALL. The default value of maxKeys is 1000. ```javascript - -Storage.list('photos/', { maxKeys : 'ALL' }) -.then(result => console.log(result)) -.catch(err => console.log(err)); - +Storage.list('photos/', { maxKeys: 'ALL' }) + .then((result) => console.log(result)) + .catch((err) => console.log(err)); ``` - -Note: The range of maxKeys can be from 0 - 1000 or 'ALL'. - +Note: The range of maxKeys can be from 0 - 1000 or 'ALL'. diff --git a/src/fragments/lib/storage/js/react-native-uploads.mdx b/src/fragments/lib/storage/js/react-native-uploads.mdx new file mode 100644 index 00000000000..635f2a0e733 --- /dev/null +++ b/src/fragments/lib/storage/js/react-native-uploads.mdx @@ -0,0 +1,17 @@ +## Media uploads + +Upload an image in your React Native app: + +```javascript +async function pathToImageFile() { + try { + const response = await fetch(pathToImageFile); + const blob = await response.blob(); + await Storage.put('yourKeyHere', blob, { + contentType: 'image/jpeg' // contentType is optional + }); + } catch (err) { + console.log('Error uploading file:', err); + } +} +``` diff --git a/src/fragments/lib/storage/js/remove.mdx b/src/fragments/lib/storage/js/remove.mdx index e0391265870..8cb0dccdff6 100644 --- a/src/fragments/lib/storage/js/remove.mdx +++ b/src/fragments/lib/storage/js/remove.mdx @@ -1,5 +1,7 @@ Delete stored data from the storage bucket. + + ## Public level remove ```javascript @@ -16,4 +18,4 @@ await Storage.remove('test.txt', { level: 'protected' }); ```javascript await Storage.remove('test.txt', { level: 'private' }); -``` \ No newline at end of file +``` diff --git a/src/fragments/lib/storage/js/upload.mdx b/src/fragments/lib/storage/js/upload.mdx index f087f51a297..9bc96b6ee72 100644 --- a/src/fragments/lib/storage/js/upload.mdx +++ b/src/fragments/lib/storage/js/upload.mdx @@ -1,4 +1,4 @@ -## Put +## Upload Files The `Put` method uploads files into Amazon S3. @@ -8,6 +8,19 @@ It returns a `{key: S3 Object key}` object on success: const result = await Storage.put("test.txt", "Hello"); ``` + + + +import js0 from "/src/fragments/lib/storage/js/browser-uploads.mdx"; + + + +import reactnative0 from "/src/fragments/lib/storage/js/react-native-uploads.mdx"; + + + +When a networking error happens during the upload, Storage module retries upload for a maximum of 4 attempts. If the upload fails after all retries, you will get an error. + ### Public level ```javascript @@ -90,6 +103,8 @@ upload.resume(); Storage.cancel(upload); ``` + + When a page refresh occurs during the upload, re-initializing the upload with the same file will continue from previous progress point. ```javascript @@ -125,50 +140,3 @@ const upload = Storage.put(file.name, file, { } }) ``` - -## Browser uploads - -Upload an image in the browser: - -```javascript -async function onChange(e) { - const file = e.target.files[0]; - try { - await Storage.put(file.name, file, { - contentType: "image/png", // contentType is optional - }); - } catch (error) { - console.log("Error uploading file: ", error); - } -} - -; -``` - - - -Note: 'contentType' is metadata (saved under the key 'Content-Type') for the S3 object and does not determine the 'Type' in the AWS S3 Console. If a file extension is not provided in the key of the uploaded object, the S3 console's 'Type' field will be emitted. Otherwise, the 'Type' will be populated to match the given extension of the key. The behavior of how the S3 object is treated will be based on 'contentType' in the metadata and not the 'Type'. - -For example: uploading a file with the key "example.jpg" will result in the 'Type' being set as "jpg", but the 'contentType' in metadata will determine it's behavior so setting it as "text/html" will result in the file being treated as an HTML file regardless of displayed 'Type' in the S3 console. - - - -## React Native uploads - -Upload an image in your React Native app: - -```javascript -async function pathToImageFile() { - try { - const response = await fetch(pathToImageFile); - const blob = await response.blob(); - await Storage.put("yourKeyHere", blob, { - contentType: "image/jpeg", // contentType is optional - }); - } catch (err) { - console.log("Error uploading file:", err); - } -} -``` - -When a networking error happens during the upload, Storage module retries upload for a maximum of 4 attempts. If the upload fails after all retries, you will get an error. diff --git a/src/fragments/lib/utilities/i18n.mdx b/src/fragments/lib/utilities/i18n.mdx index d19e6e5d99c..06abca58c05 100644 --- a/src/fragments/lib/utilities/i18n.mdx +++ b/src/fragments/lib/utilities/i18n.mdx @@ -1,5 +1,7 @@ The AWS Amplify I18n module is a lightweight internationalization solution. + + ## Installation ```javascript @@ -24,14 +26,14 @@ You can create your custom dictionary and set it as your `vocabularies` in your ```javascript const dict = { - 'fr': { - 'Sign In': "Se connecter", - 'Sign Up': "S'inscrire" - }, - 'es': { - 'Sign In': "Registrarse", - 'Sign Up': "Regístrate" - } + fr: { + 'Sign In': 'Se connecter', + 'Sign Up': "S'inscrire" + }, + es: { + 'Sign In': 'Registrarse', + 'Sign Up': 'Regístrate' + } }; I18n.putVocabularies(dict); diff --git a/src/fragments/start/getting-started/angular/setup.mdx b/src/fragments/start/getting-started/angular/setup.mdx index f0a18e8ddbd..45071dfa2e0 100644 --- a/src/fragments/start/getting-started/angular/setup.mdx +++ b/src/fragments/start/getting-started/angular/setup.mdx @@ -1,5 +1,3 @@ -## Create a new Angular app - Use the [Angular CLI](https://github.com/angular/angular-cli) to bootstrap a new Angular app: ```bash diff --git a/src/fragments/start/getting-started/ionic/setup.mdx b/src/fragments/start/getting-started/ionic/setup.mdx index 9b1d36be31c..4f8da896049 100644 --- a/src/fragments/start/getting-started/ionic/setup.mdx +++ b/src/fragments/start/getting-started/ionic/setup.mdx @@ -1,5 +1,3 @@ -## Create a new Ionic app - To set up the project, we'll first create a new Ionic app with the Ionic CLI. We'll then add Amplify and initialize a new project. From your projects directory, run the following commands: diff --git a/src/fragments/start/getting-started/next/setup.mdx b/src/fragments/start/getting-started/next/setup.mdx index e509883d7c9..eb01b0d15d6 100644 --- a/src/fragments/start/getting-started/next/setup.mdx +++ b/src/fragments/start/getting-started/next/setup.mdx @@ -1,6 +1,3 @@ - -## Create a new Next.js App - To set up the project, we'll first create a new Next.js app with [Create Next App](https://nextjs.org/docs/api-reference/create-next-app), a simple CLI tool that enables you to quickly start building a new Next.js application, with everything set up for you. We'll then add Amplify and initialize a new project. From your projects directory, run the following commands: @@ -68,7 +65,7 @@ When you initialize a new Amplify project, a few things happen: - It modifies the `.gitignore` file, adding some generated files to the ignore list - A cloud project is created for you in the AWS Amplify Console that can be accessed by running `amplify console`. The Console provides a list of backend environments, deep links to provisioned resources per Amplify category, status of recent deployments, and instructions on how to promote, clone, pull, and delete backend resources -As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in __aws-exports.js__ will update automatically. +As you add or remove categories and make updates to your backend configuration using the Amplify CLI, the configuration in **aws-exports.js** will update automatically. ## Install Amplify libraries diff --git a/src/fragments/start/getting-started/react/setup.mdx b/src/fragments/start/getting-started/react/setup.mdx index fd33f439c97..fff26be24b9 100644 --- a/src/fragments/start/getting-started/react/setup.mdx +++ b/src/fragments/start/getting-started/react/setup.mdx @@ -1,5 +1,3 @@ -## Create a new React App - To set up the project, we'll first create a new React app with [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html), a CLI tool used to bootstrap a React app using current best practices. We'll then add Amplify and initialize a new project. From your projects directory, run the following commands: diff --git a/src/fragments/start/getting-started/reactnative/setup.mdx b/src/fragments/start/getting-started/reactnative/setup.mdx index adf5ee8f23e..335b49cadad 100644 --- a/src/fragments/start/getting-started/reactnative/setup.mdx +++ b/src/fragments/start/getting-started/reactnative/setup.mdx @@ -1,7 +1,3 @@ -To start off, you'll need a React Native project. If you have an existing project, you can skip to [Generate model files](/start/getting-started/generate-model). - -## Create a new React Native app - To get started, initialize a new React Native project. diff --git a/src/fragments/start/getting-started/vanillajs/setup.mdx b/src/fragments/start/getting-started/vanillajs/setup.mdx index 5895def0bb0..b4a9c60d228 100644 --- a/src/fragments/start/getting-started/vanillajs/setup.mdx +++ b/src/fragments/start/getting-started/vanillajs/setup.mdx @@ -1,5 +1,3 @@ -## Create a new JavaScript app - Create a new ‘plain’ JavaScript ES2015 app with webpack. With the following commands, create the directory (`amplify-js-app`) and files for the app. ```bash @@ -57,16 +55,54 @@ Add the following to the `index.html` file: Amplify Framework @@ -116,10 +152,10 @@ module.exports = { }, module: { rules: [ - { + { test: /\.js$/, exclude: /node_modules/ - }, + } ] }, devServer: { diff --git a/src/fragments/start/getting-started/vue/setup.mdx b/src/fragments/start/getting-started/vue/setup.mdx index e8692238b13..ac6149d4e07 100644 --- a/src/fragments/start/getting-started/vue/setup.mdx +++ b/src/fragments/start/getting-started/vue/setup.mdx @@ -1,5 +1,3 @@ -## Create a new Vue app - Use the Vue CLI to bootstrap a new Vue 3 app (selecting the defaults will work for this project): @@ -254,20 +252,3 @@ And that's all it takes to configure Amplify. As you add or remove categories an Now that our Vue app is set up and Amplify is initialized, we're ready to add an API in the next step. - -## Install as a global plugin (Optional) - -We can configure Amplify on the client as a global plugin so that we can use `ui-vue` components anywhere without importing them in. - -Open __src/main.js__ and add the following code below the last import: - -```js -import { createApp } from 'vue'; -import App from './App.vue'; -import AmplifyVue from '@aws-amplify/ui-vue'; - -const app = createApp(App); -app.use(AmplifyVue); -app.mount('#app'); -``` - diff --git a/src/pages/lib/analytics/autotrack/q/platform/[platform].mdx b/src/pages/lib/analytics/autotrack/q/platform/[platform].mdx index 9c576e4cbd3..635cbfd5d07 100644 --- a/src/pages/lib/analytics/autotrack/q/platform/[platform].mdx +++ b/src/pages/lib/analytics/autotrack/q/platform/[platform].mdx @@ -1,20 +1,26 @@ export const meta = { title: `Automatically track sessions`, - description: `The Amplify analytics plugin records when an application opens and closes. This session information can be viewed either from your local computer’s terminal or the AWS Console for Pinpoint.`, + description: `The Amplify analytics plugin records when an application opens and closes. This session information can be viewed either from your local computer’s terminal or the AWS Console for Pinpoint.` }; -import js0 from "/src/fragments/lib/analytics/js/autotrack.mdx"; + - +import js0 from '/src/fragments/lib/analytics/js/autotrack/autotrack.mdx'; -import ios1 from "/src/fragments/lib/analytics/autotrack.mdx"; + - +import reactnative0 from '/src/fragments/lib/analytics/js/autotrack/autotrack.mdx'; -import android2 from "/src/fragments/lib/analytics/autotrack.mdx"; + - +import ios1 from '/src/fragments/lib/analytics/autotrack.mdx'; -import flutter3 from "/src/fragments/lib/analytics/autotrack.mdx"; + - \ No newline at end of file +import android2 from '/src/fragments/lib/analytics/autotrack.mdx'; + + + +import flutter3 from '/src/fragments/lib/analytics/autotrack.mdx'; + + diff --git a/src/pages/lib/analytics/create-custom-plugin/q/platform/[platform].mdx b/src/pages/lib/analytics/create-custom-plugin/q/platform/[platform].mdx new file mode 100644 index 00000000000..a4c97f6ef16 --- /dev/null +++ b/src/pages/lib/analytics/create-custom-plugin/q/platform/[platform].mdx @@ -0,0 +1,12 @@ +export const meta = { + title: `Create a custom plugin`, + description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.` +}; + +import js0 from '/src/fragments/lib/analytics/js/create-custom-plugin.mdx'; + + + +import reactnative0 from '/src/fragments/lib/analytics/js/create-custom-plugin.mdx'; + + diff --git a/src/pages/lib/analytics/enable-disable/q/platform/[platform].mdx b/src/pages/lib/analytics/enable-disable/q/platform/[platform].mdx new file mode 100644 index 00000000000..a694b9cc91f --- /dev/null +++ b/src/pages/lib/analytics/enable-disable/q/platform/[platform].mdx @@ -0,0 +1,52 @@ +export const meta = { + title: `Enable/Disable Analytics`, + description: `Learn how to enable/disable analytics using Amplify.` +}; + +## Disable Analytics + +Analytics is enabled by default when you configure it in your app. To disable Analytics in your app use the `disable` function: + +import android0 from '/src/fragments/lib/analytics/android/enable-disable/disable.mdx'; + + + +import flutter0 from '/src/fragments/lib/analytics/flutter/enable-disable/disable.mdx'; + + + +import ios0 from '/src/fragments/lib/analytics/ios/enable-disable/disable.mdx'; + + + +import js0 from '/src/fragments/lib/analytics/js/enable-disable/disable.mdx'; + + + +import reactnative0 from '/src/fragments/lib/analytics/js/enable-disable/disable.mdx'; + + + +## Enable Analytics + +To enable analytics you can use the `enable` function in your app: + +import android1 from '/src/fragments/lib/analytics/android/enable-disable/enable.mdx'; + + + +import flutter1 from '/src/fragments/lib/analytics/flutter/enable-disable/enable.mdx'; + + + +import ios1 from '/src/fragments/lib/analytics/ios/enable-disable/enable.mdx'; + + + +import js1 from '/src/fragments/lib/analytics/js/enable-disable/enable.mdx'; + + + +import reactnative1 from '/src/fragments/lib/analytics/js/enable-disable/enable.mdx'; + + diff --git a/src/pages/lib/analytics/existing-resources/q/platform/[platform].mdx b/src/pages/lib/analytics/existing-resources/q/platform/[platform].mdx index 35888ffb05b..85e86d40240 100644 --- a/src/pages/lib/analytics/existing-resources/q/platform/[platform].mdx +++ b/src/pages/lib/analytics/existing-resources/q/platform/[platform].mdx @@ -1,16 +1,24 @@ export const meta = { title: `Use existing AWS resources`, - description: `Configure the Amplify Libraries to use existing Amazon Pinpoint resources by referencing them in your configuration.`, + description: `Configure the Amplify Libraries to use existing Amazon Pinpoint resources by referencing them in your configuration.` }; -import android0 from "/src/fragments/lib/analytics/existing-resources.mdx"; +import android0 from '/src/fragments/lib/analytics/android/existing-resources.mdx'; - + -import ios1 from "/src/fragments/lib/analytics/existing-resources.mdx"; +import ios1 from '/src/fragments/lib/analytics/ios/existing-resources.mdx'; - + -import flutter2 from "/src/fragments/lib/analytics/existing-resources.mdx"; +import flutter2 from '/src/fragments/lib/analytics/flutter/existing-resources.mdx'; - + + +import js0 from '/src/fragments/lib/analytics/js/existing-resources.mdx'; + + + +import reactnative0 from '/src/fragments/lib/analytics/js/existing-resources.mdx'; + + diff --git a/src/pages/lib/analytics/getting-started/q/platform/[platform].mdx b/src/pages/lib/analytics/getting-started/q/platform/[platform].mdx index 6fa3adcc5ad..a5ac42332fa 100644 --- a/src/pages/lib/analytics/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/analytics/getting-started/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Getting started`, - description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.`, + description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.` }; -import js0 from "/src/fragments/lib/analytics/js/getting-started.mdx"; +import js0 from '/src/fragments/lib/analytics/native_common/getting-started/common.mdx'; - + -import ios1 from "/src/fragments/lib/analytics/native_common/getting-started/common.mdx"; +import ios1 from '/src/fragments/lib/analytics/native_common/getting-started/common.mdx'; - + -import android2 from "/src/fragments/lib/analytics/native_common/getting-started/common.mdx"; +import android2 from '/src/fragments/lib/analytics/native_common/getting-started/common.mdx'; - + -import flutter3 from "/src/fragments/lib/analytics/native_common/getting-started/common.mdx"; +import flutter3 from '/src/fragments/lib/analytics/native_common/getting-started/common.mdx'; - + + +import reactNative4 from '/src/fragments/lib/analytics/native_common/getting-started/common.mdx'; + + diff --git a/src/pages/lib/analytics/identifyuser/q/platform/[platform].mdx b/src/pages/lib/analytics/identifyuser/q/platform/[platform].mdx index a5145791ada..32fc4f20e47 100644 --- a/src/pages/lib/analytics/identifyuser/q/platform/[platform].mdx +++ b/src/pages/lib/analytics/identifyuser/q/platform/[platform].mdx @@ -1,16 +1,18 @@ export const meta = { title: `Identify user`, - description: `Use the Amplify analytics plugin to inform Pinpoint about your users.`, + description: `Use the Amplify analytics plugin to inform Pinpoint about your users.` }; -import ios0 from "/src/fragments/lib/analytics/ios/identifyuser.mdx"; + - +import ios0 from '/src/fragments/lib/analytics/ios/identifyuser.mdx'; -import android1 from "/src/fragments/lib/analytics/android/identifyuser.mdx"; + - +import android1 from '/src/fragments/lib/analytics/android/identifyuser.mdx'; -import flutter2 from "/src/fragments/lib/analytics/flutter/identifyuser.mdx"; + - \ No newline at end of file +import flutter2 from '/src/fragments/lib/analytics/flutter/identifyuser.mdx'; + + diff --git a/src/pages/lib/analytics/record/q/platform/[platform].mdx b/src/pages/lib/analytics/record/q/platform/[platform].mdx index d7abd0d8115..dd2a6de08b2 100644 --- a/src/pages/lib/analytics/record/q/platform/[platform].mdx +++ b/src/pages/lib/analytics/record/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Record events`, - description: `Learn how to record analytics events using Amplify.`, + description: `Learn how to record analytics events using Amplify.` }; -import js0 from "/src/fragments/lib/analytics/js/record.mdx"; +import js0 from '/src/fragments/lib/analytics/js/record.mdx'; - + -import ios1 from "/src/fragments/lib/analytics/ios/record.mdx"; +import reactnative0 from '/src/fragments/lib/analytics/js/record.mdx'; - + -import android2 from "/src/fragments/lib/analytics/android/record.mdx"; +import ios1 from '/src/fragments/lib/analytics/ios/record.mdx'; - + -import flutter3 from "/src/fragments/lib/analytics/flutter/record.mdx"; +import android2 from '/src/fragments/lib/analytics/android/record.mdx'; - \ No newline at end of file + + +import flutter3 from '/src/fragments/lib/analytics/flutter/record.mdx'; + + diff --git a/src/pages/lib/analytics/storing/q/platform/[platform].mdx b/src/pages/lib/analytics/storing/q/platform/[platform].mdx index b7c48f7d830..fb35b37042d 100644 --- a/src/pages/lib/analytics/storing/q/platform/[platform].mdx +++ b/src/pages/lib/analytics/storing/q/platform/[platform].mdx @@ -1,8 +1,10 @@ export const meta = { title: `Storing analytics data`, - description: `The Amazon Kinesis Firehose analytics provider allows you to send analytics data to an Amazon Kinesis Firehose stream for reliably storing data.`, + description: `The Amazon Kinesis Firehose analytics provider allows you to send analytics data to an Amazon Kinesis Firehose stream for reliably storing data.` }; -import js0 from "/src/fragments/lib/analytics/js/storing.mdx"; +import js0 from '/src/fragments/lib/analytics/js/storing.mdx'; - \ No newline at end of file + + + diff --git a/src/pages/lib/analytics/streaming/q/platform/[platform].mdx b/src/pages/lib/analytics/streaming/q/platform/[platform].mdx index 9899f5ea67f..fb99afd5afc 100644 --- a/src/pages/lib/analytics/streaming/q/platform/[platform].mdx +++ b/src/pages/lib/analytics/streaming/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Streaming analytics data`, - description: `The Amazon Kinesis analytics provider allows you to send analytics data to an Amazon Kinesis stream for real-time processing.`, + description: `The Amazon Kinesis analytics provider allows you to send analytics data to an Amazon Kinesis stream for real-time processing.` }; -import js0 from "/src/fragments/lib/analytics/js/streaming.mdx"; +import js0 from '/src/fragments/lib/analytics/js/streaming.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/analytics/js/streaming.mdx'; + + diff --git a/src/pages/lib/analytics/update-endpoint/q/platform/[platform].mdx b/src/pages/lib/analytics/update-endpoint/q/platform/[platform].mdx new file mode 100644 index 00000000000..8d35c3ae05e --- /dev/null +++ b/src/pages/lib/analytics/update-endpoint/q/platform/[platform].mdx @@ -0,0 +1,12 @@ +export const meta = { + title: `Update Endpoint`, + description: `The Analytics category enables you to collect analytics data for your app. The Analytics category comes with built-in support for Amazon Pinpoint and Amazon Kinesis (Kinesis support is currently only available in the Amplify JavaScript library). The Analytics category uses Amazon Cognito Identity pools to identify users in your App. Cognito allows you to receive data from authenticated, and unauthenticated users in your App.` +}; + +import js0 from '/src/fragments/lib/analytics/js/update-endpoint.mdx'; + + + +import reactnative0 from '/src/fragments/lib/analytics/js/update-endpoint.mdx'; + + diff --git a/src/pages/lib/auth/advanced/q/platform/[platform].mdx b/src/pages/lib/auth/advanced/q/platform/[platform].mdx index 9c0f2b595cc..f608319032f 100644 --- a/src/pages/lib/auth/advanced/q/platform/[platform].mdx +++ b/src/pages/lib/auth/advanced/q/platform/[platform].mdx @@ -6,3 +6,7 @@ export const meta = { import js0 from "/src/fragments/lib/auth/js/advanced.mdx"; + +import reactnative0 from "/src/fragments/lib/auth/js/advanced.mdx"; + + diff --git a/src/pages/lib/auth/auth-events/q/platform/[platform].mdx b/src/pages/lib/auth/auth-events/q/platform/[platform].mdx index d45f5fff06f..1366cd7cc52 100644 --- a/src/pages/lib/auth/auth-events/q/platform/[platform].mdx +++ b/src/pages/lib/auth/auth-events/q/platform/[platform].mdx @@ -5,6 +5,10 @@ export const meta = { AWS Cognito Auth Plugin sends important events through Amplify Hub. +import reactnative0 from "/src/fragments/lib/auth/js/hub_events/10_listen_events.mdx"; + + + import js0 from "/src/fragments/lib/auth/js/hub_events/10_listen_events.mdx"; diff --git a/src/pages/lib/auth/customui/q/platform/[platform].mdx b/src/pages/lib/auth/customui/q/platform/[platform].mdx index 17315712a01..45d57cf9c35 100644 --- a/src/pages/lib/auth/customui/q/platform/[platform].mdx +++ b/src/pages/lib/auth/customui/q/platform/[platform].mdx @@ -5,4 +5,8 @@ export const meta = { import js0 from "/src/fragments/lib/auth/js/customui.mdx"; - \ No newline at end of file + + +import reactnative0 from "/src/fragments/lib/auth/js/customui.mdx"; + + \ No newline at end of file diff --git a/src/pages/lib/auth/delete_user/q/platform/[platform].mdx b/src/pages/lib/auth/delete_user/q/platform/[platform].mdx index 31e1a5e9b48..911bfa22b29 100644 --- a/src/pages/lib/auth/delete_user/q/platform/[platform].mdx +++ b/src/pages/lib/auth/delete_user/q/platform/[platform].mdx @@ -15,6 +15,10 @@ import javascript2 from '/src/fragments/lib/auth/js/delete_user.mdx'; +import reactnative0 from '/src/fragments/lib/auth/js/delete_user.mdx'; + + + import android3 from '/src/fragments/lib/auth/native_common/delete_user/common.mdx'; diff --git a/src/pages/lib/auth/device_features/q/platform/[platform].mdx b/src/pages/lib/auth/device_features/q/platform/[platform].mdx index a1913384937..301f41ed9a4 100644 --- a/src/pages/lib/auth/device_features/q/platform/[platform].mdx +++ b/src/pages/lib/auth/device_features/q/platform/[platform].mdx @@ -7,6 +7,10 @@ import js0 from "/src/fragments/lib/auth/common/device_features/common.mdx"; +import reactnative0 from "/src/fragments/lib/auth/common/device_features/common.mdx"; + + + import ios1 from "/src/fragments/lib/auth/common/device_features/common.mdx"; diff --git a/src/pages/lib/auth/emailpassword/q/platform/[platform].mdx b/src/pages/lib/auth/emailpassword/q/platform/[platform].mdx index f69278cbcb1..3761880d61f 100644 --- a/src/pages/lib/auth/emailpassword/q/platform/[platform].mdx +++ b/src/pages/lib/auth/emailpassword/q/platform/[platform].mdx @@ -5,4 +5,8 @@ export const meta = { import js0 from "/src/fragments/lib/auth/js/emailpassword.mdx"; - \ No newline at end of file + + +import reactnative0 from "/src/fragments/lib/auth/js/emailpassword.mdx"; + + \ No newline at end of file diff --git a/src/pages/lib/auth/getting-started/q/platform/[platform].mdx b/src/pages/lib/auth/getting-started/q/platform/[platform].mdx index e936173c3b0..e1f7d094efa 100644 --- a/src/pages/lib/auth/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/auth/getting-started/q/platform/[platform].mdx @@ -7,6 +7,10 @@ import js0 from "/src/fragments/lib/auth/js/getting-started.mdx"; +import reactnative0 from "/src/fragments/lib/auth/js/getting-started.mdx"; + + + import ios1 from "/src/fragments/lib/auth/native_common/getting_started/common.mdx"; diff --git a/src/pages/lib/auth/manageusers/q/platform/[platform].mdx b/src/pages/lib/auth/manageusers/q/platform/[platform].mdx index e2c9a8c4c3d..5fa2e56feea 100644 --- a/src/pages/lib/auth/manageusers/q/platform/[platform].mdx +++ b/src/pages/lib/auth/manageusers/q/platform/[platform].mdx @@ -5,4 +5,8 @@ export const meta = { import js0 from "/src/fragments/lib/auth/js/manageusers.mdx"; - \ No newline at end of file + + +import reactnative0 from "/src/fragments/lib/auth/js/manageusers.mdx"; + + \ No newline at end of file diff --git a/src/pages/lib/auth/mfa/q/platform/[platform].mdx b/src/pages/lib/auth/mfa/q/platform/[platform].mdx index 0ff018e316f..1bca8c921b2 100644 --- a/src/pages/lib/auth/mfa/q/platform/[platform].mdx +++ b/src/pages/lib/auth/mfa/q/platform/[platform].mdx @@ -5,4 +5,8 @@ export const meta = { import js0 from "/src/fragments/lib/auth/js/mfa.mdx"; - \ No newline at end of file + + +import reactnative0 from "/src/fragments/lib/auth/js/mfa.mdx"; + + \ No newline at end of file diff --git a/src/pages/lib/auth/overview/q/platform/[platform].mdx b/src/pages/lib/auth/overview/q/platform/[platform].mdx index 5c1763ee884..03d59bbb775 100644 --- a/src/pages/lib/auth/overview/q/platform/[platform].mdx +++ b/src/pages/lib/auth/overview/q/platform/[platform].mdx @@ -7,6 +7,10 @@ import js0 from "/src/fragments/lib/auth/js/overview.mdx"; +import reactnative0 from "/src/fragments/lib/auth/js/overview.mdx"; + + + import ios1 from "/src/fragments/lib/auth/common/overview.mdx"; diff --git a/src/pages/lib/auth/social/q/platform/[platform].mdx b/src/pages/lib/auth/social/q/platform/[platform].mdx index b6f8cce7835..d5dcbf34f4a 100644 --- a/src/pages/lib/auth/social/q/platform/[platform].mdx +++ b/src/pages/lib/auth/social/q/platform/[platform].mdx @@ -7,6 +7,10 @@ import js0 from "/src/fragments/lib/auth/js/social.mdx"; +import reactnative0 from "/src/fragments/lib/auth/js/social.mdx"; + + + import ios1 from "/src/fragments/lib/auth/native_common/social_signin_web_ui/common.mdx"; diff --git a/src/pages/lib/auth/start/q/platform/[platform].mdx b/src/pages/lib/auth/start/q/platform/[platform].mdx index 35d66f5afa1..70060b71c38 100644 --- a/src/pages/lib/auth/start/q/platform/[platform].mdx +++ b/src/pages/lib/auth/start/q/platform/[platform].mdx @@ -6,3 +6,7 @@ export const meta = { import js0 from "/src/fragments/lib/auth/js/start.mdx"; + +import reactnative0 from "/src/fragments/lib/auth/js/start.mdx"; + + diff --git a/src/pages/lib/auth/switch-auth/q/platform/[platform].mdx b/src/pages/lib/auth/switch-auth/q/platform/[platform].mdx index 77dc9247b71..d1108103f0d 100644 --- a/src/pages/lib/auth/switch-auth/q/platform/[platform].mdx +++ b/src/pages/lib/auth/switch-auth/q/platform/[platform].mdx @@ -5,4 +5,8 @@ export const meta = { import js0 from "/src/fragments/lib/auth/js/switch-auth.mdx"; - \ No newline at end of file + + +import reactnative0 from "/src/fragments/lib/auth/js/switch-auth.mdx"; + + \ No newline at end of file diff --git a/src/pages/lib/client-configuration/configuring-amplify-categories/q/platform/[platform].mdx b/src/pages/lib/client-configuration/configuring-amplify-categories/q/platform/[platform].mdx index 177c211975f..e372a28a5ea 100644 --- a/src/pages/lib/client-configuration/configuring-amplify-categories/q/platform/[platform].mdx +++ b/src/pages/lib/client-configuration/configuring-amplify-categories/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Configuring Amplify Categories`, - description: `Configuring the client `, + description: `Configuring the client ` }; -import js0 from "/src/fragments/lib/client-configuration/js/js-configuration.mdx"; +import js0 from '/src/fragments/lib/client-configuration/js/js-configuration.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/client-configuration/js/js-configuration.mdx'; + + diff --git a/src/pages/lib/datastore/conflict/q/platform/[platform].mdx b/src/pages/lib/datastore/conflict/q/platform/[platform].mdx index ab61215e474..714ceccb61d 100644 --- a/src/pages/lib/datastore/conflict/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/conflict/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Conflict resolution`, - description: `Learn more about how conflict resolution in DataStore is managed and how to configure it.`, + description: `Learn more about how conflict resolution in DataStore is managed and how to configure it.` }; -import ios0 from "/src/fragments/lib/datastore/native_common/conflict.mdx"; +import ios0 from '/src/fragments/lib/datastore/native_common/conflict.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/conflict.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/conflict.mdx'; - + -import flutter2 from "/src/fragments/lib/datastore/native_common/conflict.mdx"; +import flutter2 from '/src/fragments/lib/datastore/native_common/conflict.mdx'; - + -import js3 from "/src/fragments/lib/datastore/native_common/conflict.mdx"; +import js3 from '/src/fragments/lib/datastore/native_common/conflict.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/datastore/native_common/conflict.mdx'; + + diff --git a/src/pages/lib/datastore/data-access/q/platform/[platform].mdx b/src/pages/lib/datastore/data-access/q/platform/[platform].mdx index 9a9a11f840f..86a206835f9 100644 --- a/src/pages/lib/datastore/data-access/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/data-access/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Manipulating data`, - description: `Learn how to save, query, paginate, update, delete and observe data in DataStore.`, + description: `Learn how to save, query, paginate, update, delete and observe data in DataStore.` }; -import ios0 from "/src/fragments/lib/datastore/native_common/data-access.mdx"; +import ios0 from '/src/fragments/lib/datastore/native_common/data-access.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/data-access.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/data-access.mdx'; - + -import flutter2 from "/src/fragments/lib/datastore/native_common/data-access.mdx"; +import flutter2 from '/src/fragments/lib/datastore/native_common/data-access.mdx'; - + -import js3 from "/src/fragments/lib/datastore/native_common/data-access.mdx"; +import js3 from '/src/fragments/lib/datastore/native_common/data-access.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/datastore/native_common/data-access.mdx'; + + diff --git a/src/pages/lib/datastore/datastore-events/q/platform/[platform].mdx b/src/pages/lib/datastore/datastore-events/q/platform/[platform].mdx index 8b70e740ff6..bbf044cf535 100644 --- a/src/pages/lib/datastore/datastore-events/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/datastore-events/q/platform/[platform].mdx @@ -1,12 +1,13 @@ export const meta = { title: `DataStore Events`, - description: `Listening to DataStore events`, + description: `Listening to DataStore events` }; DataStore periodically publishes state notifications onto Amplify's Hub. You can subscribe to the Hub to gain insight into the internal state of the DataStore. Events are published when: -* Your device loses or regains network connectivity; -* Data is synchronized with the Cloud; -* There are new, pending changes that have not yet been synchronized. + +- Your device loses or regains network connectivity; +- Data is synchronized with the Cloud; +- There are new, pending changes that have not yet been synchronized. The following DataStore events are defined: @@ -15,6 +16,7 @@ The following DataStore events are defined: Dispatched when DataStore starts and every time network status changes HubPayload `NetworkStatusEvent` contains: + - `active` (Bool): true if the DataStore is on a network that can connect the Cloud; false, otherwise ## subscriptionsEstablished @@ -28,23 +30,28 @@ HubPayload: N/A Dispatched when DataStore is about to perform its initial sync queries HubPayload `syncQueriesStartedEvent` contains: + - `models` ([String]): an array of each model's `name` -import js0 from "/src/fragments/lib/datastore/js/datastore-events/model-synced.mdx"; +import js0 from '/src/fragments/lib/datastore/js/datastore-events/model-synced.mdx'; + + - +import reactnative0 from '/src/fragments/lib/datastore/js/datastore-events/model-synced.mdx'; -import android1 from "/src/fragments/lib/datastore/native_common/datastore-events/model-synced.mdx"; + - +import android1 from '/src/fragments/lib/datastore/native_common/datastore-events/model-synced.mdx'; -import flutter2 from "/src/fragments/lib/datastore/native_common/datastore-events/model-synced.mdx"; + - +import flutter2 from '/src/fragments/lib/datastore/native_common/datastore-events/model-synced.mdx'; -import ios3 from "/src/fragments/lib/datastore/native_common/datastore-events/model-synced.mdx"; + - +import ios3 from '/src/fragments/lib/datastore/native_common/datastore-events/model-synced.mdx'; + + ## syncQueriesReady @@ -58,67 +65,82 @@ Dispatched when DataStore as a whole is ready, at this point all data is availab HubPayload: N/A -import js4 from "/src/fragments/lib/datastore/js/datastore-events/outbox-mutation-enqueued.mdx"; +import js4 from '/src/fragments/lib/datastore/js/datastore-events/outbox-mutation-enqueued.mdx'; + + + +import reactnative1 from '/src/fragments/lib/datastore/js/datastore-events/outbox-mutation-enqueued.mdx'; - + -import android5 from "/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-enqueued.mdx"; +import android5 from '/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-enqueued.mdx'; - + -import flutter6 from "/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-enqueued.mdx"; +import flutter6 from '/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-enqueued.mdx'; - + -import ios7 from "/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-enqueued.mdx"; +import ios7 from '/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-enqueued.mdx'; - + -import js8 from "/src/fragments/lib/datastore/js/datastore-events/outbox-mutation-processed.mdx"; +import js8 from '/src/fragments/lib/datastore/js/datastore-events/outbox-mutation-processed.mdx'; - + -import android9 from "/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-processed.mdx"; +import reactnative2 from '/src/fragments/lib/datastore/js/datastore-events/outbox-mutation-processed.mdx'; - + -import flutter10 from "/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-processed.mdx"; +import android9 from '/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-processed.mdx'; - + -import ios11 from "/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-processed.mdx"; +import flutter10 from '/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-processed.mdx'; - + -import android12 from "/src/fragments/lib/datastore/android/datastore-events/outbox-mutation-failed.mdx"; +import ios11 from '/src/fragments/lib/datastore/native_common/datastore-events/outbox-mutation-processed.mdx'; - + + +import android12 from '/src/fragments/lib/datastore/android/datastore-events/outbox-mutation-failed.mdx'; + + ## outboxStatus Dispatched when: + - the DataStore starts - each time a local mutation is enqueued into the outbox - each time a local mutation is finished processing HubPayload `OutboxStatusEvent` contains: + - `isEmpty` (Bool): a boolean value indicating that there are no local changes still pending upload to the Cloud ## Usage + To see if the network status is active, you could set up the following listener: -import js13 from "/src/fragments/lib/datastore/js/datastore-events.mdx"; +import js13 from '/src/fragments/lib/datastore/js/datastore-events.mdx'; + + + +import reactnative3 from '/src/fragments/lib/datastore/js/datastore-events.mdx'; - + -import android14 from "/src/fragments/lib/datastore/android/datastore-events.mdx"; +import android14 from '/src/fragments/lib/datastore/android/datastore-events.mdx'; - + -import ios15 from "/src/fragments/lib/datastore/ios/datastore-events.mdx"; +import ios15 from '/src/fragments/lib/datastore/ios/datastore-events.mdx'; - + -import flutter16 from "/src/fragments/lib/datastore/flutter/datastore-events.mdx"; +import flutter16 from '/src/fragments/lib/datastore/flutter/datastore-events.mdx'; - + diff --git a/src/pages/lib/datastore/examples/q/platform/[platform].mdx b/src/pages/lib/datastore/examples/q/platform/[platform].mdx index 9e38624a307..d788111c167 100644 --- a/src/pages/lib/datastore/examples/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/examples/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Examples`, - description: `Full examples and resources using Amplify DataStore.`, + description: `Full examples and resources using Amplify DataStore.` }; -import js0 from "/src/fragments/lib/datastore/js/examples.mdx"; +import js0 from '/src/fragments/lib/datastore/js/examples.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/datastore/js/examples-react-native.mdx'; + + diff --git a/src/pages/lib/datastore/getting-started/q/platform/[platform].mdx b/src/pages/lib/datastore/getting-started/q/platform/[platform].mdx index 3c69f15dab7..d64e23b3ba0 100644 --- a/src/pages/lib/datastore/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/getting-started/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Getting started`, - description: `Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data.`, + description: `Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data.` }; -import ios0 from "/src/fragments/lib/datastore/native_common/getting-started.mdx"; +import ios0 from '/src/fragments/lib/datastore/native_common/getting-started.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/getting-started.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/getting-started.mdx'; - + -import flutter2 from "/src/fragments/lib/datastore/native_common/getting-started.mdx"; +import flutter2 from '/src/fragments/lib/datastore/native_common/getting-started.mdx'; - + -import js3 from "/src/fragments/lib/datastore/native_common/getting-started.mdx"; +import js3 from '/src/fragments/lib/datastore/native_common/getting-started.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/datastore/native_common/getting-started.mdx'; + + diff --git a/src/pages/lib/datastore/how-it-works/q/platform/[platform].mdx b/src/pages/lib/datastore/how-it-works/q/platform/[platform].mdx index 1a3b9b6d074..03562b84f4d 100644 --- a/src/pages/lib/datastore/how-it-works/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/how-it-works/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `How it works`, - description: `Amplify DataStore provides a persistent on-device storage repository for you to write, read, and observe changes to data if you are online or offline, and seamlessly sync to the cloud as well as across devices. Learn more about how it works.`, + description: `Amplify DataStore provides a persistent on-device storage repository for you to write, read, and observe changes to data if you are online or offline, and seamlessly sync to the cloud as well as across devices. Learn more about how it works.` }; -import ios0 from "/src/fragments/lib/datastore/native_common/how-it-works.mdx"; +import ios0 from '/src/fragments/lib/datastore/native_common/how-it-works.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/how-it-works.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/how-it-works.mdx'; - + -import flutter2 from "/src/fragments/lib/datastore/native_common/how-it-works.mdx"; +import flutter2 from '/src/fragments/lib/datastore/native_common/how-it-works.mdx'; - + -import js3 from "/src/fragments/lib/datastore/native_common/how-it-works.mdx"; +import js3 from '/src/fragments/lib/datastore/native_common/how-it-works.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/datastore/native_common/how-it-works.mdx'; + + diff --git a/src/pages/lib/datastore/other-methods/q/platform/[platform].mdx b/src/pages/lib/datastore/other-methods/q/platform/[platform].mdx index 4e0ded46786..b8422f90853 100644 --- a/src/pages/lib/datastore/other-methods/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/other-methods/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Other methods`, - description: `Other Amplify DataStore methods`, + description: `Other Amplify DataStore methods` }; -import js0 from "/src/fragments/lib/datastore/js/other-methods.mdx"; +import js0 from '/src/fragments/lib/datastore/js/other-methods.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/other-methods.mdx"; +import reactnative0 from '/src/fragments/lib/datastore/js/other-methods.mdx'; - + -import ios2 from "/src/fragments/lib/datastore/native_common/other-methods.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/other-methods.mdx'; - + -import flutter from "/src/fragments/lib/datastore/native_common/other-methods.mdx"; +import ios2 from '/src/fragments/lib/datastore/native_common/other-methods.mdx'; - + + +import flutter from '/src/fragments/lib/datastore/native_common/other-methods.mdx'; + + diff --git a/src/pages/lib/datastore/real-time/q/platform/[platform].mdx b/src/pages/lib/datastore/real-time/q/platform/[platform].mdx index e01e6634fe4..8ad319c862c 100644 --- a/src/pages/lib/datastore/real-time/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/real-time/q/platform/[platform].mdx @@ -1,21 +1,24 @@ export const meta = { title: `Real time`, - description: `Learn more about how DataStore handles data changes in real-time.`, + description: `Learn more about how DataStore handles data changes in real-time.` }; -import ios0 from "/src/fragments/lib/datastore/native_common/real-time.mdx"; +import ios0 from '/src/fragments/lib/datastore/native_common/real-time.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/real-time.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/real-time.mdx'; - + -import flutter2 from "/src/fragments/lib/datastore/native_common/real-time.mdx"; +import flutter2 from '/src/fragments/lib/datastore/native_common/real-time.mdx'; - + -import js3 from "/src/fragments/lib/datastore/native_common/real-time.mdx"; +import js3 from '/src/fragments/lib/datastore/native_common/real-time.mdx'; - + +import reactnative0 from '/src/fragments/lib/datastore/native_common/real-time.mdx'; + + diff --git a/src/pages/lib/datastore/relational/q/platform/[platform].mdx b/src/pages/lib/datastore/relational/q/platform/[platform].mdx index 019ed498469..6e02d07adde 100644 --- a/src/pages/lib/datastore/relational/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/relational/q/platform/[platform].mdx @@ -1,24 +1,28 @@ export const meta = { title: `Relational models`, - description: `Learn more about how DataStore handles relationships between Models, such as "has one", "has many", "belongs to".`, + description: `Learn more about how DataStore handles relationships between Models, such as "has one", "has many", "belongs to".` }; -import gqlv2callout from "/src/fragments/cli/gqlv2callout.mdx"; +import gqlv2callout from '/src/fragments/cli/gqlv2callout.mdx'; - + -import ios0 from "/src/fragments/lib/datastore/native_common/relational.mdx"; +import ios0 from '/src/fragments/lib/datastore/native_common/relational.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/relational.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/relational.mdx'; - + -import flutter2 from "/src/fragments/lib/datastore/native_common/relational.mdx"; +import flutter2 from '/src/fragments/lib/datastore/native_common/relational.mdx'; - + -import js3 from "/src/fragments/lib/datastore/native_common/relational.mdx"; +import js3 from '/src/fragments/lib/datastore/native_common/relational.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/datastore/native_common/relational.mdx'; + + diff --git a/src/pages/lib/datastore/schema-updates/q/platform/[platform].mdx b/src/pages/lib/datastore/schema-updates/q/platform/[platform].mdx index fe41b69384c..0ca365195a6 100644 --- a/src/pages/lib/datastore/schema-updates/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/schema-updates/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Schema updates`, - description: `Learn more about how to issue schema updates for DataStore`, + description: `Learn more about how to issue schema updates for DataStore` }; -import ios0 from "/src/fragments/lib/datastore/native_common/schema-updates.mdx"; +import ios0 from '/src/fragments/lib/datastore/native_common/schema-updates.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/schema-updates.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/schema-updates.mdx'; - + -import flutter2 from "/src/fragments/lib/datastore/native_common/schema-updates.mdx"; +import flutter2 from '/src/fragments/lib/datastore/native_common/schema-updates.mdx'; - + -import js3 from "/src/fragments/lib/datastore/native_common/schema-updates.mdx"; +import js3 from '/src/fragments/lib/datastore/native_common/schema-updates.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/datastore/native_common/schema-updates.mdx'; + + diff --git a/src/pages/lib/datastore/setup-auth-rules/q/platform/[platform].mdx b/src/pages/lib/datastore/setup-auth-rules/q/platform/[platform].mdx index e73b35adcc4..d5224e7db75 100644 --- a/src/pages/lib/datastore/setup-auth-rules/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/setup-auth-rules/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Setup authorization rules`, - description: `Learn how to apply authorization rules to your models with the @auth directive`, + description: `Learn how to apply authorization rules to your models with the @auth directive` }; -import ios0 from "/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx"; +import ios0 from '/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx'; - + -import flutter2 from "/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx"; +import flutter2 from '/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx'; - + -import js3 from "/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx"; +import js3 from '/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx'; - + + +import reactnative0 from '/src/fragments/lib/datastore/native_common/setup-auth-rules.mdx'; + + diff --git a/src/pages/lib/datastore/sync/q/platform/[platform].mdx b/src/pages/lib/datastore/sync/q/platform/[platform].mdx index 46d55051d24..fc4e79c1a74 100644 --- a/src/pages/lib/datastore/sync/q/platform/[platform].mdx +++ b/src/pages/lib/datastore/sync/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Syncing data to cloud`, - description: `Learn more about how DataStore connects to an AppSync backend and automatically syncs all locally saved data using GraphQL.`, + description: `Learn more about how DataStore connects to an AppSync backend and automatically syncs all locally saved data using GraphQL.` }; -import ios0 from "/src/fragments/lib/datastore/native_common/sync.mdx"; +import ios0 from '/src/fragments/lib/datastore/native_common/sync.mdx'; - + -import android1 from "/src/fragments/lib/datastore/native_common/sync.mdx"; +import android1 from '/src/fragments/lib/datastore/native_common/sync.mdx'; - + -import flutter2 from "/src/fragments/lib/datastore/native_common/sync.mdx"; +import flutter2 from '/src/fragments/lib/datastore/native_common/sync.mdx'; - + -import js3 from "/src/fragments/lib/datastore/native_common/sync.mdx"; +import js3 from '/src/fragments/lib/datastore/native_common/sync.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/datastore/native_common/sync.mdx'; + + diff --git a/src/pages/lib/graphqlapi/advanced-workflows/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/advanced-workflows/q/platform/[platform].mdx index fe97931fab2..01c7990780a 100644 --- a/src/pages/lib/graphqlapi/advanced-workflows/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/advanced-workflows/q/platform/[platform].mdx @@ -1,24 +1,32 @@ export const meta = { title: `Advanced Workflows`, - description: `Learn more about advanced workflows in the Amplify Framework's API category`, + description: `Learn more about advanced workflows in the Amplify Framework's API category` }; -import js0 from "/src/fragments/lib/graphqlapi/js/complex-objects.mdx"; +import js0 from '/src/fragments/lib/graphqlapi/js/complex-objects.mdx'; - + -import js1 from "/src/fragments/lib/graphqlapi/js/delta-sync.mdx"; +import js1 from '/src/fragments/lib/graphqlapi/js/delta-sync.mdx'; - + -import ios2 from "/src/fragments/lib/graphqlapi/native_common/advanced-workflows/common.mdx"; +import reactnative0 from '/src/fragments/lib/graphqlapi/js/complex-objects.mdx'; - + -import android3 from "/src/fragments/lib/graphqlapi/native_common/advanced-workflows/common.mdx"; +import reactnative1 from '/src/fragments/lib/graphqlapi/js/delta-sync.mdx'; - + -import flutter3 from "/src/fragments/lib/graphqlapi/native_common/advanced-workflows/common.mdx"; +import ios2 from '/src/fragments/lib/graphqlapi/native_common/advanced-workflows/common.mdx'; - + + +import android3 from '/src/fragments/lib/graphqlapi/native_common/advanced-workflows/common.mdx'; + + + +import flutter3 from '/src/fragments/lib/graphqlapi/native_common/advanced-workflows/common.mdx'; + + diff --git a/src/pages/lib/graphqlapi/authz/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/authz/q/platform/[platform].mdx index e364b0a4c5a..371d8b679b6 100644 --- a/src/pages/lib/graphqlapi/authz/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/authz/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Configure authorization modes`, - description: `Learn more about how to configure authorization modes in Amplify Framework's API category`, + description: `Learn more about how to configure authorization modes in Amplify Framework's API category` }; -import ios0 from "/src/fragments/lib/graphqlapi/native_common/authz/common.mdx"; +import ios0 from '/src/fragments/lib/graphqlapi/native_common/authz/common.mdx'; - + -import android1 from "/src/fragments/lib/graphqlapi/native_common/authz/common.mdx"; +import android1 from '/src/fragments/lib/graphqlapi/native_common/authz/common.mdx'; - + -import js2 from "/src/fragments/lib/graphqlapi/js/authz.mdx"; +import js2 from '/src/fragments/lib/graphqlapi/js/authz.mdx'; - + -import flutter3 from "/src/fragments/lib/graphqlapi/native_common/authz/common.mdx"; +import reactnative0 from '/src/fragments/lib/graphqlapi/js/authz.mdx'; - + + +import flutter3 from '/src/fragments/lib/graphqlapi/native_common/authz/common.mdx'; + + diff --git a/src/pages/lib/graphqlapi/cancel-request/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/cancel-request/q/platform/[platform].mdx index d8f8d43c4a4..04366b74a24 100644 --- a/src/pages/lib/graphqlapi/cancel-request/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/cancel-request/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Cancel API requests`, - description: `Learn more about how to cancel query or mutation requests with Amplify's GraphQL API category`, + description: `Learn more about how to cancel query or mutation requests with Amplify's GraphQL API category` }; -import js0 from "/src/fragments/lib/graphqlapi/js/cancel-request.mdx"; +import js0 from '/src/fragments/lib/graphqlapi/js/cancel-request.mdx'; - + + +import reactnative0 from '/src/fragments/lib/graphqlapi/js/cancel-request.mdx'; + + diff --git a/src/pages/lib/graphqlapi/concepts/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/concepts/q/platform/[platform].mdx index 2036e11dfc7..03c94b3e591 100644 --- a/src/pages/lib/graphqlapi/concepts/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/concepts/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Concepts`, - description: `Learn more about the foundation concepts of Amplify Framework's API category.`, + description: `Learn more about the foundation concepts of Amplify Framework's API category.` }; -import js0 from "/src/fragments/lib/graphqlapi/native_common/concepts.mdx"; +import js0 from '/src/fragments/lib/graphqlapi/native_common/concepts.mdx'; - + -import android1 from "/src/fragments/lib/graphqlapi/native_common/concepts.mdx"; +import reactnative0 from '/src/fragments/lib/graphqlapi/native_common/concepts.mdx'; - + -import ios2 from "/src/fragments/lib/graphqlapi/native_common/concepts.mdx"; +import android1 from '/src/fragments/lib/graphqlapi/native_common/concepts.mdx'; - + -import flutter3 from "/src/fragments/lib/graphqlapi/native_common/concepts.mdx"; +import ios2 from '/src/fragments/lib/graphqlapi/native_common/concepts.mdx'; - + + +import flutter3 from '/src/fragments/lib/graphqlapi/native_common/concepts.mdx'; + + diff --git a/src/pages/lib/graphqlapi/create-or-re-use-existing-backend/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/create-or-re-use-existing-backend/q/platform/[platform].mdx deleted file mode 100644 index 07a255100ab..00000000000 --- a/src/pages/lib/graphqlapi/create-or-re-use-existing-backend/q/platform/[platform].mdx +++ /dev/null @@ -1,8 +0,0 @@ -export const meta = { - title: `Create or re-use existing backend`, - description: `Learn more about how to create or re-use an existing API backend resource in Amplify.`, -}; - -import js0 from "/src/fragments/lib/graphqlapi/js/create-or-re-use-existing-backend.mdx"; - - diff --git a/src/pages/lib/graphqlapi/existing-resources/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/existing-resources/q/platform/[platform].mdx index 90491da628c..7e842aead13 100644 --- a/src/pages/lib/graphqlapi/existing-resources/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/existing-resources/q/platform/[platform].mdx @@ -1,16 +1,24 @@ export const meta = { title: `Use existing AWS resources`, - description: `Configure the Amplify Libraries to use existing AWS AppSync resources by referencing them in your configuration.`, + description: `Configure the Amplify Libraries to use existing AWS AppSync resources by referencing them in your configuration.` }; -import android0 from "/src/fragments/lib/graphqlapi/existing-resources.mdx"; +import android0 from '/src/fragments/lib/graphqlapi/existing-resources.mdx'; - + -import ios1 from "/src/fragments/lib/graphqlapi/existing-resources.mdx"; +import ios1 from '/src/fragments/lib/graphqlapi/existing-resources.mdx'; - + -import flutter2 from "/src/fragments/lib/graphqlapi/existing-resources.mdx"; +import flutter2 from '/src/fragments/lib/graphqlapi/existing-resources.mdx'; - + + +import js0 from '/src/fragments/lib/graphqlapi/js/existing-resources.mdx'; + + + +import reactnative0 from '/src/fragments/lib/graphqlapi/js/existing-resources.mdx'; + + diff --git a/src/pages/lib/graphqlapi/getting-started/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/getting-started/q/platform/[platform].mdx index a09a101c1da..22e0e144ee0 100644 --- a/src/pages/lib/graphqlapi/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/getting-started/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Getting started`, - description: `Learn more about how to get started with Amplify's API category`, + description: `Learn more about how to get started with Amplify's API category` }; -import ios0 from "/src/fragments/lib/graphqlapi/native_common/getting-started/common.mdx"; +import ios0 from '/src/fragments/lib/graphqlapi/native_common/getting-started/common.mdx'; - + -import android1 from "/src/fragments/lib/graphqlapi/native_common/getting-started/common.mdx"; +import android1 from '/src/fragments/lib/graphqlapi/native_common/getting-started/common.mdx'; - + -import js2 from "/src/fragments/lib/graphqlapi/js/getting-started.mdx"; +import js2 from '/src/fragments/lib/graphqlapi/js/getting-started.mdx'; - + -import flutter3 from "/src/fragments/lib/graphqlapi/native_common/getting-started/common.mdx"; +import reactnative0 from '/src/fragments/lib/graphqlapi/js/getting-started.mdx'; - + + +import flutter3 from '/src/fragments/lib/graphqlapi/native_common/getting-started/common.mdx'; + + diff --git a/src/pages/lib/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx index e584396b5d6..c5a190c9ad9 100644 --- a/src/pages/lib/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/graphql-from-nodejs/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `GraphQL from NodeJS`, - description: `Learn more about how to call an AppSync GraphQL API from a NodeJS app or a Lambda function`, + description: `Learn more about how to call an AppSync GraphQL API from a NodeJS app or a Lambda function` }; -import js0 from "/src/fragments/lib/graphqlapi/graphql-from-node.mdx"; +import js0 from '/src/fragments/lib/graphqlapi/graphql-from-node.mdx'; - + + +import reactnative0 from '/src/fragments/lib/graphqlapi/graphql-from-node.mdx'; + + diff --git a/src/pages/lib/graphqlapi/mutate-data/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/mutate-data/q/platform/[platform].mdx index 705f25bebfa..d3b6088e63c 100644 --- a/src/pages/lib/graphqlapi/mutate-data/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/mutate-data/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Create, update, delete data`, - description: `Learn more about how to create and update data using GraphQL APIs in Amplify`, + description: `Learn more about how to create and update data using GraphQL APIs in Amplify` }; -import ios0 from "/src/fragments/lib/graphqlapi/ios/mutate-data.mdx"; +import ios0 from '/src/fragments/lib/graphqlapi/ios/mutate-data.mdx'; - + -import android1 from "/src/fragments/lib/graphqlapi/android/mutate-data.mdx"; +import android1 from '/src/fragments/lib/graphqlapi/android/mutate-data.mdx'; - + -import js2 from "/src/fragments/lib/graphqlapi/js/mutate-data.mdx"; +import js2 from '/src/fragments/lib/graphqlapi/js/mutate-data.mdx'; - + -import flutter3 from "/src/fragments/lib/graphqlapi/flutter/mutate-data.mdx"; +import reactnative0 from '/src/fragments/lib/graphqlapi/js/mutate-data.mdx'; - + + +import flutter3 from '/src/fragments/lib/graphqlapi/flutter/mutate-data.mdx'; + + diff --git a/src/pages/lib/graphqlapi/offline/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/offline/q/platform/[platform].mdx index 705d9cafdd9..3d6cfa2468f 100644 --- a/src/pages/lib/graphqlapi/offline/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/offline/q/platform/[platform].mdx @@ -1,8 +1,24 @@ export const meta = { title: `Offline scenarios`, - description: `Learn more about how to support offline scenarios with Amplify's GraphQL API category`, + description: `Learn more about how to support offline scenarios with Amplify's GraphQL API category` }; -import js0 from "/src/fragments/lib/graphqlapi/js/offline.mdx"; +import js0 from '/src/fragments/lib/graphqlapi/js/offline.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/graphqlapi/js/offline.mdx'; + + + +import ios0 from '/src/fragments/lib/graphqlapi/js/offline.mdx'; + + + +import android0 from '/src/fragments/lib/graphqlapi/js/offline.mdx'; + + + +import flutter0 from '/src/fragments/lib/graphqlapi/js/offline.mdx'; + + diff --git a/src/pages/lib/graphqlapi/query-data/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/query-data/q/platform/[platform].mdx index bad8e83d91d..95116bacb45 100644 --- a/src/pages/lib/graphqlapi/query-data/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/query-data/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Fetch data`, - description: `Learn more about how to fetch data using Amplify's GraphQL API category`, + description: `Learn more about how to fetch data using Amplify's GraphQL API category` }; -import ios0 from "/src/fragments/lib/graphqlapi/ios/query-data.mdx"; +import ios0 from '/src/fragments/lib/graphqlapi/ios/query-data.mdx'; - + -import android1 from "/src/fragments/lib/graphqlapi/android/query-data.mdx"; +import android1 from '/src/fragments/lib/graphqlapi/android/query-data.mdx'; - + -import js2 from "/src/fragments/lib/graphqlapi/js/query-data.mdx"; +import js2 from '/src/fragments/lib/graphqlapi/js/query-data.mdx'; - + -import flutter3 from "/src/fragments/lib/graphqlapi/flutter/query-data.mdx"; +import reactnative0 from '/src/fragments/lib/graphqlapi/js/query-data.mdx'; - + + +import flutter3 from '/src/fragments/lib/graphqlapi/flutter/query-data.mdx'; + + diff --git a/src/pages/lib/graphqlapi/subscribe-data/q/platform/[platform].mdx b/src/pages/lib/graphqlapi/subscribe-data/q/platform/[platform].mdx index fa1c2f9ab97..061a49a8fc0 100644 --- a/src/pages/lib/graphqlapi/subscribe-data/q/platform/[platform].mdx +++ b/src/pages/lib/graphqlapi/subscribe-data/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Subscribe to data`, - description: `Learn more about how to observe to data changes using subscriptions in Amplify.`, + description: `Learn more about how to observe to data changes using subscriptions in Amplify.` }; -import ios0 from "/src/fragments/lib/graphqlapi/ios/subscribe-data.mdx"; +import ios0 from '/src/fragments/lib/graphqlapi/ios/subscribe-data.mdx'; - + -import android1 from "/src/fragments/lib/graphqlapi/android/subscribe-data.mdx"; +import android1 from '/src/fragments/lib/graphqlapi/android/subscribe-data.mdx'; - + -import js2 from "/src/fragments/lib/graphqlapi/js/subscribe-data.mdx"; +import js2 from '/src/fragments/lib/graphqlapi/js/subscribe-data.mdx'; - + -import flutter3 from "/src/fragments/lib/graphqlapi/flutter/subscribe-data.mdx"; +import reactnative0 from '/src/fragments/lib/graphqlapi/js/subscribe-data.mdx'; - + + +import flutter3 from '/src/fragments/lib/graphqlapi/flutter/subscribe-data.mdx'; + + diff --git a/src/pages/lib/in-app-messaging/clear-messages/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/clear-messages/q/platform/[platform].mdx index 1dbdf6ec161..90606805215 100644 --- a/src/pages/lib/in-app-messaging/clear-messages/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/clear-messages/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn more about how to clear synced in-app messages from the user's device.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/clear-messages.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/clear-messages.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/create-campaign/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/create-campaign/q/platform/[platform].mdx index 129e9e2fdcd..8b8b0df6ced 100644 --- a/src/pages/lib/in-app-messaging/create-campaign/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/create-campaign/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn how to create a new pinpoint campaign and configure it to be used with your amplify project.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/create-campaign.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/create-campaign.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/customize/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/customize/q/platform/[platform].mdx index 5c8a517f217..97469d2ef81 100644 --- a/src/pages/lib/in-app-messaging/customize/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/customize/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn how to customize UI for your in-app message and provide your own In-App Messaging UI components to override the default Amplify provided UI components.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/customize.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/customize.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/display-message/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/display-message/q/platform/[platform].mdx index f20531fa491..b901de41944 100644 --- a/src/pages/lib/in-app-messaging/display-message/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/display-message/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn how In-app messages are displayed when an In-App Messaging or analytics event is sent and matches the criteria set forth by your active In-App Messaging campaigns.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/display-message.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/display-message.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/getting-started/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/getting-started/q/platform/[platform].mdx index 52e434fde3d..63998913e28 100644 --- a/src/pages/lib/in-app-messaging/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/getting-started/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn how to get started with the In-App Messaging and integrate it to your application.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/getting-started.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/getting-started.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/identify-user/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/identify-user/q/platform/[platform].mdx index cee5fedd858..5d1ec49ec60 100644 --- a/src/pages/lib/in-app-messaging/identify-user/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/identify-user/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn how to segment and target your In-App Messaging campaigns to specific user subsets.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/identify-user.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/identify-user.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/overview/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/overview/q/platform/[platform].mdx index 64a21e088bd..e7245fe060f 100644 --- a/src/pages/lib/in-app-messaging/overview/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/overview/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Amplify In-App Messaging helps you better engage your users with messages they can see while actively using your application. Send targeted messages to your defined user segments or even trigger contextual messages based on user behavior. Once you are up and running with In-App Messaging, you’ll be able to create messages that look native to your application and deliver them to your users all without additional code changes.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/overview.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/overview.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/prerequisites/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/prerequisites/q/platform/[platform].mdx index e6220dbf1be..c15220174e2 100644 --- a/src/pages/lib/in-app-messaging/prerequisites/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/prerequisites/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn how to complete the prerequisites for getting started with In-App Messaging. Initialize and configure amplify permissions to get started.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/prerequisites.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/prerequisites.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/resolve-conflicts/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/resolve-conflicts/q/platform/[platform].mdx index 9673f295852..8b0bdb22c74 100644 --- a/src/pages/lib/in-app-messaging/resolve-conflicts/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/resolve-conflicts/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn how to resolve conflicts when an event is sent and meets the criteria set forth by multiple in-app messages.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/resolve-conflicts.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/resolve-conflicts.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/respond-interaction-events/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/respond-interaction-events/q/platform/[platform].mdx index 6180aef4852..8c047fa269e 100644 --- a/src/pages/lib/in-app-messaging/respond-interaction-events/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/respond-interaction-events/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn how to respond with additional behavior to your users interacting with in-app messages by adding interaction event listeners.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/respond-interaction-events.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/respond-interaction-events.mdx'; - + diff --git a/src/pages/lib/in-app-messaging/sync-messages/q/platform/[platform].mdx b/src/pages/lib/in-app-messaging/sync-messages/q/platform/[platform].mdx index 5535901f459..c25226e46fa 100644 --- a/src/pages/lib/in-app-messaging/sync-messages/q/platform/[platform].mdx +++ b/src/pages/lib/in-app-messaging/sync-messages/q/platform/[platform].mdx @@ -3,6 +3,6 @@ export const meta = { description: `Learn how to sync in-app messages to your user's local device. Synced messages will be displayed when a matching event is triggered.` }; -import js0 from '/src/fragments/lib/in-app-messaging/js/sync-messages.mdx'; +import reactnative0 from '/src/fragments/lib/in-app-messaging/js/sync-messages.mdx'; - + diff --git a/src/pages/lib/interactions/chatbot/q/platform/[platform].mdx b/src/pages/lib/interactions/chatbot/q/platform/[platform].mdx index 9a7b7959bfc..8ce61223050 100644 --- a/src/pages/lib/interactions/chatbot/q/platform/[platform].mdx +++ b/src/pages/lib/interactions/chatbot/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Interact with bots`, - description: `Learn more about how to integrate chat bot interactions into your application using Amplify Framework.`, + description: `Learn more about how to integrate chat bot interactions into your application using Amplify Framework.` }; -import js0 from "/src/fragments/lib/interactions/js/chatbot.mdx"; +import js0 from '/src/fragments/lib/interactions/js/chatbot.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/interactions/js/chatbot.mdx'; + + diff --git a/src/pages/lib/interactions/getting-started/q/platform/[platform].mdx b/src/pages/lib/interactions/getting-started/q/platform/[platform].mdx index 4b05d9aaf2d..64340a75fa2 100644 --- a/src/pages/lib/interactions/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/interactions/getting-started/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Getting started`, - description: `AWS Amplify Interactions category enables AI-powered chatbots in your web or mobile apps. You can use Interactions to configure your backend chatbot provider and to integrate a chatbot UI into your app with just a single line of code.`, + description: `AWS Amplify Interactions category enables AI-powered chatbots in your web or mobile apps. You can use Interactions to configure your backend chatbot provider and to integrate a chatbot UI into your app with just a single line of code.` }; -import js0 from "/src/fragments/lib/interactions/js/getting-started.mdx"; +import js0 from '/src/fragments/lib/interactions/js/getting-started.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/interactions/js/getting-started.mdx'; + + diff --git a/src/pages/lib/predictions/getting-started/q/platform/[platform].mdx b/src/pages/lib/predictions/getting-started/q/platform/[platform].mdx index 0bfa40ac7fe..7c9dd3d8786 100644 --- a/src/pages/lib/predictions/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/getting-started/q/platform/[platform].mdx @@ -1,16 +1,20 @@ export const meta = { title: `Getting started`, - description: `Get started with integrating ML capabilities into your application using Amplify Framework`, + description: `Get started with integrating ML capabilities into your application using Amplify Framework` }; -import js0 from "/src/fragments/lib/predictions/js/getting-started.mdx"; +import js0 from '/src/fragments/lib/predictions/js/getting-started.mdx'; - + -import ios1 from "/src/fragments/lib/predictions/native_common/getting-started/common.mdx"; +import reactnative0 from '/src/fragments/lib/predictions/js/getting-started.mdx'; - + -import android2 from "/src/fragments/lib/predictions/native_common/getting-started/common.mdx"; +import ios1 from '/src/fragments/lib/predictions/native_common/getting-started/common.mdx'; - + + +import android2 from '/src/fragments/lib/predictions/native_common/getting-started/common.mdx'; + + diff --git a/src/pages/lib/predictions/identify-entity/q/platform/[platform].mdx b/src/pages/lib/predictions/identify-entity/q/platform/[platform].mdx index 0bf2c01a3c0..4839e67dc90 100644 --- a/src/pages/lib/predictions/identify-entity/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/identify-entity/q/platform/[platform].mdx @@ -1,16 +1,20 @@ export const meta = { title: `Identify entities from images`, - description: `Learn more about how to identify entities from an image using Amplify.`, + description: `Learn more about how to identify entities from an image using Amplify.` }; -import js0 from "/src/fragments/lib/predictions/js/identify-entity.mdx"; +import js0 from '/src/fragments/lib/predictions/js/identify-entity.mdx'; - + -import ios1 from "/src/fragments/lib/predictions/ios/identify-entity.mdx"; +import reactnative0 from '/src/fragments/lib/predictions/js/identify-entity.mdx'; - + -import android2 from "/src/fragments/lib/predictions/android/identify-entity.mdx"; +import ios1 from '/src/fragments/lib/predictions/ios/identify-entity.mdx'; - + + +import android2 from '/src/fragments/lib/predictions/android/identify-entity.mdx'; + + diff --git a/src/pages/lib/predictions/identify-text/q/platform/[platform].mdx b/src/pages/lib/predictions/identify-text/q/platform/[platform].mdx index 19bbc8b07af..8e228da49a8 100644 --- a/src/pages/lib/predictions/identify-text/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/identify-text/q/platform/[platform].mdx @@ -1,16 +1,20 @@ export const meta = { title: `Identify text`, - description: `Learn more about how to identify text from images and documents in your application using AWS Amplify.`, + description: `Learn more about how to identify text from images and documents in your application using AWS Amplify.` }; -import js0 from "/src/fragments/lib/predictions/js/identify-text.mdx"; +import js0 from '/src/fragments/lib/predictions/js/identify-text.mdx'; - + -import ios1 from "/src/fragments/lib/predictions/ios/identify-text.mdx"; +import reactnative0 from '/src/fragments/lib/predictions/js/identify-text.mdx'; - + -import android2 from "/src/fragments/lib/predictions/android/identify-text.mdx"; +import ios1 from '/src/fragments/lib/predictions/ios/identify-text.mdx'; - + + +import android2 from '/src/fragments/lib/predictions/android/identify-text.mdx'; + + diff --git a/src/pages/lib/predictions/interpret/q/platform/[platform].mdx b/src/pages/lib/predictions/interpret/q/platform/[platform].mdx index 92d4cce07d6..e991e7bfef7 100644 --- a/src/pages/lib/predictions/interpret/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/interpret/q/platform/[platform].mdx @@ -1,16 +1,20 @@ export const meta = { title: `Interpret sentiment`, - description: `Learn more about how to determine key phrases, sentiment, language, syntax, and entities from text using Amplify.`, + description: `Learn more about how to determine key phrases, sentiment, language, syntax, and entities from text using Amplify.` }; -import js0 from "/src/fragments/lib/predictions/js/interpret.mdx"; +import js0 from '/src/fragments/lib/predictions/js/interpret.mdx'; - + -import ios1 from "/src/fragments/lib/predictions/ios/interpret.mdx"; +import reactnative0 from '/src/fragments/lib/predictions/js/interpret.mdx'; - + -import android2 from "/src/fragments/lib/predictions/android/interpret.mdx"; +import ios1 from '/src/fragments/lib/predictions/ios/interpret.mdx'; - + + +import android2 from '/src/fragments/lib/predictions/android/interpret.mdx'; + + diff --git a/src/pages/lib/predictions/intro/q/platform/[platform].mdx b/src/pages/lib/predictions/intro/q/platform/[platform].mdx index 985127bea47..d7b1e18f98e 100644 --- a/src/pages/lib/predictions/intro/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/intro/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Overview`, - description: `The Predictions category enables you to integrate machine learning in your application without any prior machine learning experience. The Predictions category comes with built-in support for both online and offline use cases.`, + description: `The Predictions category enables you to integrate machine learning in your application without any prior machine learning experience. The Predictions category comes with built-in support for both online and offline use cases.` }; -import js0 from "/src/fragments/lib/predictions/js/intro.mdx"; +import js0 from '/src/fragments/lib/predictions/js/intro.mdx'; - + + +import reactnative0 from '/src/fragments/lib/predictions/js/intro.mdx'; + + diff --git a/src/pages/lib/predictions/label-image/q/platform/[platform].mdx b/src/pages/lib/predictions/label-image/q/platform/[platform].mdx index a4f6c3a875c..9b34dbf9d70 100644 --- a/src/pages/lib/predictions/label-image/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/label-image/q/platform/[platform].mdx @@ -1,16 +1,20 @@ export const meta = { title: `Label objects in image`, - description: `Learn more about how to detect labels in an image using Amplify. For example you can detect if an image has objects such as chairs, desks etc.`, + description: `Learn more about how to detect labels in an image using Amplify. For example you can detect if an image has objects such as chairs, desks etc.` }; -import js0 from "/src/fragments/lib/predictions/js/label-image.mdx"; +import js0 from '/src/fragments/lib/predictions/js/label-image.mdx'; - + -import ios1 from "/src/fragments/lib/predictions/ios/label-image.mdx"; +import reactnative0 from '/src/fragments/lib/predictions/js/label-image.mdx'; - + -import android2 from "/src/fragments/lib/predictions/android/label-image.mdx"; +import ios1 from '/src/fragments/lib/predictions/ios/label-image.mdx'; - + + +import android2 from '/src/fragments/lib/predictions/android/label-image.mdx'; + + diff --git a/src/pages/lib/predictions/sample/q/platform/[platform].mdx b/src/pages/lib/predictions/sample/q/platform/[platform].mdx index 5579813cb39..372d2b2d466 100644 --- a/src/pages/lib/predictions/sample/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/sample/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Example`, - description: `Sample code for Amplify Framework's predictions category`, + description: `Sample code for Amplify Framework's predictions category` }; -import js0 from "/src/fragments/lib/predictions/js/sample.mdx"; +import js0 from '/src/fragments/lib/predictions/js/sample.mdx'; - + + +import reactnative0 from '/src/fragments/lib/predictions/js/sample.mdx'; + + diff --git a/src/pages/lib/predictions/text-speech/q/platform/[platform].mdx b/src/pages/lib/predictions/text-speech/q/platform/[platform].mdx index dae591d158c..8c0c7e84cbc 100644 --- a/src/pages/lib/predictions/text-speech/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/text-speech/q/platform/[platform].mdx @@ -1,16 +1,20 @@ export const meta = { title: `Text to speech`, - description: `Learn more about how to integrate text-to-speech capabilities into your application using Amplify.`, + description: `Learn more about how to integrate text-to-speech capabilities into your application using Amplify.` }; -import js0 from "/src/fragments/lib/predictions/js/text-speech.mdx"; +import js0 from '/src/fragments/lib/predictions/js/text-speech.mdx'; - + -import ios1 from "/src/fragments/lib/predictions/ios/text-speech.mdx"; +import reactnative0 from '/src/fragments/lib/predictions/js/text-speech.mdx'; - + -import android2 from "/src/fragments/lib/predictions/android/text-speech.mdx"; +import ios1 from '/src/fragments/lib/predictions/ios/text-speech.mdx'; - + + +import android2 from '/src/fragments/lib/predictions/android/text-speech.mdx'; + + diff --git a/src/pages/lib/predictions/transcribe/q/platform/[platform].mdx b/src/pages/lib/predictions/transcribe/q/platform/[platform].mdx index 3572fa7e753..3f24e27589e 100644 --- a/src/pages/lib/predictions/transcribe/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/transcribe/q/platform/[platform].mdx @@ -1,12 +1,16 @@ export const meta = { title: `Transcribe audio to text`, - description: `Learn more about how to transcribe audio to text (also known as speech-to-text) for your application using Amplify`, + description: `Learn more about how to transcribe audio to text (also known as speech-to-text) for your application using Amplify` }; -import js0 from "/src/fragments/lib/predictions/js/transcribe.mdx"; +import js0 from '/src/fragments/lib/predictions/js/transcribe.mdx'; - + -import ios1 from "/src/fragments/lib/predictions/ios/transcribe.mdx"; +import reactnative0 from '/src/fragments/lib/predictions/js/transcribe.mdx'; - + + +import ios1 from '/src/fragments/lib/predictions/ios/transcribe.mdx'; + + diff --git a/src/pages/lib/predictions/translate/q/platform/[platform].mdx b/src/pages/lib/predictions/translate/q/platform/[platform].mdx index 200d7de2686..28e139f9038 100644 --- a/src/pages/lib/predictions/translate/q/platform/[platform].mdx +++ b/src/pages/lib/predictions/translate/q/platform/[platform].mdx @@ -1,16 +1,20 @@ export const meta = { title: `Translate language`, - description: `Learn more about how to integrate translation capabilities for your application using Amplify`, + description: `Learn more about how to integrate translation capabilities for your application using Amplify` }; -import js0 from "/src/fragments/lib/predictions/js/translate.mdx"; +import js0 from '/src/fragments/lib/predictions/js/translate.mdx'; - + -import ios1 from "/src/fragments/lib/predictions/ios/translate.mdx"; +import reactnative0 from '/src/fragments/lib/predictions/js/translate.mdx'; - + -import android2 from "/src/fragments/lib/predictions/android/translate.mdx"; +import ios1 from '/src/fragments/lib/predictions/ios/translate.mdx'; - + + +import android2 from '/src/fragments/lib/predictions/android/translate.mdx'; + + diff --git a/src/pages/lib/project-setup/async/q/platform/[platform].mdx b/src/pages/lib/project-setup/async/q/platform/[platform].mdx index 12e48859d4f..ade2e43826c 100644 --- a/src/pages/lib/project-setup/async/q/platform/[platform].mdx +++ b/src/pages/lib/project-setup/async/q/platform/[platform].mdx @@ -1,8 +1,8 @@ export const meta = { title: `Async Programming Model`, - description: `Amplify Android uses an asynchronous programming model`, + description: `Amplify Android uses an asynchronous programming model.` }; -import android0 from "/src/fragments/lib/project-setup/android/async/async.mdx"; +import android0 from '/src/fragments/lib/project-setup/android/async/async.mdx'; - + diff --git a/src/pages/lib/project-setup/create-application/q/platform/[platform].mdx b/src/pages/lib/project-setup/create-application/q/platform/[platform].mdx index 20312afbabb..71c295cc128 100644 --- a/src/pages/lib/project-setup/create-application/q/platform/[platform].mdx +++ b/src/pages/lib/project-setup/create-application/q/platform/[platform].mdx @@ -1,16 +1,24 @@ export const meta = { title: `Create your application`, - description: `Project setup for Amplify prior to adding category specific example.`, + description: `Project setup for Amplify prior to adding category specific example.` }; -import ios0 from "/src/fragments/lib/project-setup/native_common/create-application/common.mdx"; +import ios0 from '/src/fragments/lib/project-setup/native_common/create-application/common.mdx'; - + -import android1 from "/src/fragments/lib/project-setup/native_common/create-application/common.mdx"; +import android1 from '/src/fragments/lib/project-setup/native_common/create-application/common.mdx'; - + -import flutter2 from "/src/fragments/lib/project-setup/native_common/create-application/common.mdx"; +import flutter2 from '/src/fragments/lib/project-setup/native_common/create-application/common.mdx'; - \ No newline at end of file + + +import react_native2 from '/src/fragments/start/getting-started/reactnative/setup.mdx'; + + + +import js0 from '/src/fragments/lib/project-setup/js/getting-started.mdx'; + + diff --git a/src/pages/lib/project-setup/platform-setup/q/platform/[platform].mdx b/src/pages/lib/project-setup/platform-setup/q/platform/[platform].mdx index 462493ae1f1..6147bc8ce82 100644 --- a/src/pages/lib/project-setup/platform-setup/q/platform/[platform].mdx +++ b/src/pages/lib/project-setup/platform-setup/q/platform/[platform].mdx @@ -1,8 +1,8 @@ export const meta = { title: `Platform Setup`, - description: `Instructions for platform-specific configurations needed for amplify-flutter`, + description: `Instructions for platform-specific configurations needed for amplify-flutter` }; -import flutter0 from "/src/fragments/lib/project-setup/flutter/platform-setup/platform-setup.mdx"; +import flutter0 from '/src/fragments/lib/project-setup/flutter/platform-setup/platform-setup.mdx'; - + diff --git a/src/pages/lib/project-setup/prereq/q/platform/[platform].mdx b/src/pages/lib/project-setup/prereq/q/platform/[platform].mdx index 62755c04fd2..6cf26c4450f 100644 --- a/src/pages/lib/project-setup/prereq/q/platform/[platform].mdx +++ b/src/pages/lib/project-setup/prereq/q/platform/[platform].mdx @@ -1,40 +1,56 @@ export const meta = { title: `Prerequisites`, - description: `Project Setup with Amplify Framework - Prerequisites`, + description: `Project Setup with Amplify Framework - Prerequisites` }; -import ios0 from "/src/fragments/lib/project-setup/native_common/prereq/common_header.mdx"; +import ios0 from '/src/fragments/lib/project-setup/native_common/prereq/common_header.mdx'; - + -import android1 from "/src/fragments/lib/project-setup/native_common/prereq/common_header.mdx"; +import android1 from '/src/fragments/lib/project-setup/native_common/prereq/common_header.mdx'; - + -import flutter2 from "/src/fragments/lib/project-setup/native_common/prereq/common_header.mdx"; +import reactnative0 from '/src/fragments/lib/project-setup/native_common/prereq/common_header.mdx'; - + -import ios3 from "/src/fragments/lib/project-setup/ios/prereq/prereq.mdx"; +import js0 from '/src/fragments/lib/project-setup/native_common/prereq/common_header.mdx'; - + -import android4 from "/src/fragments/lib/project-setup/android/prereq/prereq.mdx"; +import flutter2 from '/src/fragments/lib/project-setup/native_common/prereq/common_header.mdx'; - + -import flutter5 from "/src/fragments/lib/project-setup/flutter/prereq/prereq.mdx"; +import ios3 from '/src/fragments/lib/project-setup/ios/prereq/prereq.mdx'; - + -import ios6 from "/src/fragments/lib/project-setup/native_common/prereq/common_body.mdx"; +import android4 from '/src/fragments/lib/project-setup/android/prereq/prereq.mdx'; - + -import android7 from "/src/fragments/lib/project-setup/native_common/prereq/common_body.mdx"; +import flutter5 from '/src/fragments/lib/project-setup/flutter/prereq/prereq.mdx'; - + -import flutter8 from "/src/fragments/lib/project-setup/native_common/prereq/common_body.mdx"; +import ios6 from '/src/fragments/lib/project-setup/native_common/prereq/common_body.mdx'; - + + +import android7 from '/src/fragments/lib/project-setup/native_common/prereq/common_body.mdx'; + + + +import flutter8 from '/src/fragments/lib/project-setup/native_common/prereq/common_body.mdx'; + + + +import js1 from '/src/fragments/lib/project-setup/native_common/prereq/common_body.mdx'; + + + +import reactnative1 from '/src/fragments/lib/project-setup/native_common/prereq/common_body.mdx'; + + diff --git a/src/pages/lib/pubsub/getting-started/q/platform/[platform].mdx b/src/pages/lib/pubsub/getting-started/q/platform/[platform].mdx index adec0df8d53..6fdc62e6ea3 100644 --- a/src/pages/lib/pubsub/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/pubsub/getting-started/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Getting started`, - description: `The AWS Amplify PubSub category provides connectivity with cloud-based message-oriented middleware. You can use PubSub to pass messages between your app instances and your app’s backend creating real-time interactive experiences.`, + description: `The AWS Amplify PubSub category provides connectivity with cloud-based message-oriented middleware. You can use PubSub to pass messages between your app instances and your app’s backend creating real-time interactive experiences.` }; -import js0 from "/src/fragments/lib/pubsub/js/getting-started.mdx"; +import js0 from '/src/fragments/lib/pubsub/js/getting-started.mdx'; - + + +import reactnative0 from '/src/fragments/lib/pubsub/js/getting-started.mdx'; + + diff --git a/src/pages/lib/pubsub/publish/q/platform/[platform].mdx b/src/pages/lib/pubsub/publish/q/platform/[platform].mdx index 245d59dc81f..3bf7c78d780 100644 --- a/src/pages/lib/pubsub/publish/q/platform/[platform].mdx +++ b/src/pages/lib/pubsub/publish/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Publish`, - description: `Learn more about how to publish a message using the PubSub category in Amplify`, + description: `Learn more about how to publish a message using the PubSub category in Amplify` }; -import js0 from "/src/fragments/lib/pubsub/js/publish.mdx"; +import js0 from '/src/fragments/lib/pubsub/js/publish.mdx'; - + + +import reactnative0 from '/src/fragments/lib/pubsub/js/publish.mdx'; + + diff --git a/src/pages/lib/pubsub/subunsub/q/platform/[platform].mdx b/src/pages/lib/pubsub/subunsub/q/platform/[platform].mdx index 362e60260cb..532ae9024c4 100644 --- a/src/pages/lib/pubsub/subunsub/q/platform/[platform].mdx +++ b/src/pages/lib/pubsub/subunsub/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Subscribe & Unsubscribe`, - description: `Learn more about how to subscribe to and unsubscribe from topics using Amplify's PubSub category`, + description: `Learn more about how to subscribe to and unsubscribe from topics using Amplify's PubSub category` }; -import js0 from "/src/fragments/lib/pubsub/js/subunsub.mdx"; +import js0 from '/src/fragments/lib/pubsub/js/subunsub.mdx'; - + + +import reactnative0 from '/src/fragments/lib/pubsub/js/subunsub.mdx'; + + diff --git a/src/pages/lib/push-notifications/getting-started/q/platform/[platform].mdx b/src/pages/lib/push-notifications/getting-started/q/platform/[platform].mdx index 7a29212640d..34882245e69 100644 --- a/src/pages/lib/push-notifications/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/push-notifications/getting-started/q/platform/[platform].mdx @@ -1,10 +1,8 @@ export const meta = { title: `Getting started`, - description: `Use of Push Notifications of Amplify Framework`, + description: `Use of Push Notifications of Amplify Framework` }; -import js0 from "/src/fragments/lib/push-notifications/js/getting-started.mdx"; -import rn from "/src/fragments/lib/push-notifications/js/reactnative.mdx"; +import reactnative0 from '/src/fragments/lib/push-notifications/js/getting-started.mdx'; - - + diff --git a/src/pages/lib/push-notifications/overview/q/platform/[platform].mdx b/src/pages/lib/push-notifications/overview/q/platform/[platform].mdx index 6118e0a63f4..b552fc65f37 100644 --- a/src/pages/lib/push-notifications/overview/q/platform/[platform].mdx +++ b/src/pages/lib/push-notifications/overview/q/platform/[platform].mdx @@ -1,10 +1,8 @@ export const meta = { title: `Overview`, - description: `The Push Notifications category allows you to integrate push notifications in your app with Amazon Pinpoint targeting and campaign management support.`, + description: `The Push Notifications category allows you to integrate push notifications in your app with Amazon Pinpoint targeting and campaign management support.` }; -import js0 from "/src/fragments/lib/push-notifications/js/overview.mdx"; -import rn from "/src/fragments/lib/push-notifications/js/reactnative.mdx"; +import reactnative0 from '/src/fragments/lib/push-notifications/js/overview.mdx'; - - + diff --git a/src/pages/lib/push-notifications/testing/q/platform/[platform].mdx b/src/pages/lib/push-notifications/testing/q/platform/[platform].mdx index 9e7db89db6a..7ab93c4f68d 100644 --- a/src/pages/lib/push-notifications/testing/q/platform/[platform].mdx +++ b/src/pages/lib/push-notifications/testing/q/platform/[platform].mdx @@ -1,10 +1,8 @@ export const meta = { title: `Testing`, - description: `Overview of testing your Push Notifications`, + description: `Overview of testing your Push Notifications` }; -import js0 from "/src/fragments/lib/push-notifications/js/testing.mdx"; -import rn from "/src/fragments/lib/push-notifications/js/reactnative.mdx"; +import reactnative0 from '/src/fragments/lib/push-notifications/js/testing.mdx'; - - + diff --git a/src/pages/lib/push-notifications/working-with-api/q/platform/[platform].mdx b/src/pages/lib/push-notifications/working-with-api/q/platform/[platform].mdx index 48ca1fa4f6d..fd879e7c0ad 100644 --- a/src/pages/lib/push-notifications/working-with-api/q/platform/[platform].mdx +++ b/src/pages/lib/push-notifications/working-with-api/q/platform/[platform].mdx @@ -1,10 +1,8 @@ export const meta = { title: `Working with API`, - description: `Breakdown of using the Push Notifications API in Amplify Framework`, + description: `Breakdown of using the Push Notifications API in Amplify Framework` }; -import js0 from "/src/fragments/lib/push-notifications/js/working-with-api.mdx"; -import rn from "/src/fragments/lib/push-notifications/js/reactnative.mdx"; +import reactnative0 from '/src/fragments/lib/push-notifications/js/working-with-api.mdx'; - - + diff --git a/src/pages/lib/q/platform/[platform].mdx b/src/pages/lib/q/platform/[platform].mdx index 8310ba46398..86411406c05 100644 --- a/src/pages/lib/q/platform/[platform].mdx +++ b/src/pages/lib/q/platform/[platform].mdx @@ -1,24 +1,29 @@ export const meta = { - title: "Amplify Libraries", - description: "The Amplify open-source client libraries provide use-case centric, opinionated, declarative, and easy-to-use interfaces across different categories of cloud powered operations enabling mobile and web developers to easily interact with their backends. ", - disableTOC: "true", - filterKey: "platform", + title: 'Amplify Libraries', + description: + 'The Amplify open-source client libraries provide use-case centric, opinionated, declarative, and easy-to-use interfaces across different categories of cloud powered operations enabling mobile and web developers to easily interact with their backends. ', + disableTOC: 'true', + filterKey: 'platform' }; The Amplify open-source client libraries provide use-case centric, opinionated, declarative, and easy-to-use interfaces across different categories of cloud powered operations enabling mobile and web developers to easily interact with their backends. These libraries are powered by the AWS cloud and offer a pluggable model which can be extended to use other providers. The libraries can be used with both new backends created using the Amplify CLI and existing backend resources. -import ios0 from "/src/fragments/lib/ios.mdx"; +import ios0 from '/src/fragments/lib/ios.mdx'; - + -import android1 from "/src/fragments/lib/android.mdx"; +import android1 from '/src/fragments/lib/android.mdx'; - + -import flutter2 from "/src/fragments/lib/flutter.mdx"; +import flutter2 from '/src/fragments/lib/flutter.mdx'; - + -import js3 from "/src/fragments/lib/js.mdx"; +import js3 from '/src/fragments/lib/js.mdx'; - \ No newline at end of file + + +import reactnative4 from '/src/fragments/lib/reactnative.mdx'; + + diff --git a/src/pages/lib/restapi/authz/q/platform/[platform].mdx b/src/pages/lib/restapi/authz/q/platform/[platform].mdx index 447d41042e5..5095402fa24 100644 --- a/src/pages/lib/restapi/authz/q/platform/[platform].mdx +++ b/src/pages/lib/restapi/authz/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Define authorization rules`, - description: `Learn more about how to define authorization rules for Amplify's REST API capabilities`, + description: `Learn more about how to define authorization rules for Amplify's REST API capabilities` }; -import js0 from "/src/fragments/lib/restapi/js/authz.mdx"; +import js0 from '/src/fragments/lib/restapi/js/authz.mdx'; - + -import ios1 from "/src/fragments/lib/restapi/native_common/authz/common.mdx"; +import reactnative0 from '/src/fragments/lib/restapi/js/authz.mdx'; - + -import android2 from "/src/fragments/lib/restapi/native_common/authz/common.mdx"; +import ios1 from '/src/fragments/lib/restapi/native_common/authz/common.mdx'; - + -import flutter3 from "/src/fragments/lib/restapi/flutter/authz.mdx"; +import android2 from '/src/fragments/lib/restapi/native_common/authz/common.mdx'; - \ No newline at end of file + + +import flutter3 from '/src/fragments/lib/restapi/flutter/authz.mdx'; + + diff --git a/src/pages/lib/restapi/cancel/q/platform/[platform].mdx b/src/pages/lib/restapi/cancel/q/platform/[platform].mdx index b411657e459..e15d6a90e4a 100644 --- a/src/pages/lib/restapi/cancel/q/platform/[platform].mdx +++ b/src/pages/lib/restapi/cancel/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Cancel API requests`, - description: `Using the Cancel API in Amplify Framework`, + description: `Using the Cancel API in Amplify Framework` }; -import js0 from "/src/fragments/lib/restapi/js/cancel.mdx"; +import js0 from '/src/fragments/lib/restapi/js/cancel.mdx'; - + + +import reactnative0 from '/src/fragments/lib/restapi/js/cancel.mdx'; + + diff --git a/src/pages/lib/restapi/delete/q/platform/[platform].mdx b/src/pages/lib/restapi/delete/q/platform/[platform].mdx index c61c65eef4b..9750c0915bb 100644 --- a/src/pages/lib/restapi/delete/q/platform/[platform].mdx +++ b/src/pages/lib/restapi/delete/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Deleting data`, - description: `Using the Delete API REST in Amplify Framework`, + description: `Using the Delete API REST in Amplify Framework` }; -import js0 from "/src/fragments/lib/restapi/js/delete.mdx"; +import js0 from '/src/fragments/lib/restapi/js/delete.mdx'; - + -import ios1 from "/src/fragments/lib/restapi/ios/delete.mdx"; +import reactnative0 from '/src/fragments/lib/restapi/js/delete.mdx'; - + -import android2 from "/src/fragments/lib/restapi/android/delete.mdx"; +import ios1 from '/src/fragments/lib/restapi/ios/delete.mdx'; - + -import flutter3 from "/src/fragments/lib/restapi/flutter/delete.mdx"; +import android2 from '/src/fragments/lib/restapi/android/delete.mdx'; - \ No newline at end of file + + +import flutter3 from '/src/fragments/lib/restapi/flutter/delete.mdx'; + + diff --git a/src/pages/lib/restapi/fetch/q/platform/[platform].mdx b/src/pages/lib/restapi/fetch/q/platform/[platform].mdx index 4c5b08ec2f1..a0afbcfbf41 100644 --- a/src/pages/lib/restapi/fetch/q/platform/[platform].mdx +++ b/src/pages/lib/restapi/fetch/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Fetching data`, - description: `Using the GET API REST in Amplify Framework`, + description: `Using the GET API REST in Amplify Framework` }; -import js0 from "/src/fragments/lib/restapi/js/fetch.mdx"; +import js0 from '/src/fragments/lib/restapi/js/fetch.mdx'; - + -import ios1 from "/src/fragments/lib/restapi/ios/fetch.mdx"; +import reactnative0 from '/src/fragments/lib/restapi/js/fetch.mdx'; - + -import android2 from "/src/fragments/lib/restapi/android/fetch.mdx"; +import ios1 from '/src/fragments/lib/restapi/ios/fetch.mdx'; - + -import flutter3 from "/src/fragments/lib/restapi/flutter/fetch.mdx"; +import android2 from '/src/fragments/lib/restapi/android/fetch.mdx'; - + + +import flutter3 from '/src/fragments/lib/restapi/flutter/fetch.mdx'; + + diff --git a/src/pages/lib/restapi/getting-started/q/platform/[platform].mdx b/src/pages/lib/restapi/getting-started/q/platform/[platform].mdx index 25edc9e2229..057d124262f 100644 --- a/src/pages/lib/restapi/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/restapi/getting-started/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Getting started`, - description: `The API category provides a solution for making HTTP requests to REST and GraphQL endpoints. The REST API category can be used for creating signed requests against Amazon API Gateway when the API Gateway Authorization is set to AWS_IAM.`, + description: `The API category provides a solution for making HTTP requests to REST and GraphQL endpoints. The REST API category can be used for creating signed requests against Amazon API Gateway when the API Gateway Authorization is set to AWS_IAM.` }; -import js0 from "/src/fragments/lib/restapi/js/getting-started.mdx"; +import js0 from '/src/fragments/lib/restapi/js/getting-started.mdx'; - + -import ios1 from "/src/fragments/lib/restapi/native_common/getting-started/common.mdx"; +import reactnative0 from '/src/fragments/lib/restapi/js/getting-started.mdx'; - + -import android2 from "/src/fragments/lib/restapi/native_common/getting-started/common.mdx"; +import ios1 from '/src/fragments/lib/restapi/native_common/getting-started/common.mdx'; - + -import flutter3 from "/src/fragments/lib/restapi/native_common/getting-started/common.mdx"; +import android2 from '/src/fragments/lib/restapi/native_common/getting-started/common.mdx'; - \ No newline at end of file + + +import flutter3 from '/src/fragments/lib/restapi/native_common/getting-started/common.mdx'; + + diff --git a/src/pages/lib/restapi/update/q/platform/[platform].mdx b/src/pages/lib/restapi/update/q/platform/[platform].mdx index d54243236bb..7c9a5fa0037 100644 --- a/src/pages/lib/restapi/update/q/platform/[platform].mdx +++ b/src/pages/lib/restapi/update/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Updating data`, - description: `Using Post, Put, etc. in Amplify Framework`, + description: `Using Post, Put, etc. in Amplify Framework` }; -import js0 from "/src/fragments/lib/restapi/js/update.mdx"; +import js0 from '/src/fragments/lib/restapi/js/update.mdx'; - + -import ios1 from "/src/fragments/lib/restapi/ios/update.mdx"; +import reactnative0 from '/src/fragments/lib/restapi/js/update.mdx'; - + -import android2 from "/src/fragments/lib/restapi/android/update.mdx"; +import ios1 from '/src/fragments/lib/restapi/ios/update.mdx'; - + -import flutter3 from "/src/fragments/lib/restapi/flutter/update.mdx"; +import android2 from '/src/fragments/lib/restapi/android/update.mdx'; - + + +import flutter3 from '/src/fragments/lib/restapi/flutter/update.mdx'; + + diff --git a/src/pages/lib/storage/autotrack/q/platform/[platform].mdx b/src/pages/lib/storage/autotrack/q/platform/[platform].mdx index a5c76c8a35e..2217678a9ac 100644 --- a/src/pages/lib/storage/autotrack/q/platform/[platform].mdx +++ b/src/pages/lib/storage/autotrack/q/platform/[platform].mdx @@ -1,8 +1,8 @@ export const meta = { title: `Automatically track events`, - description: `You can enable automatic tracking of Storage Events such as uploads and downloads. Enabling this will automatically send Storage Events to Amazon Pinpoint and you will be able to see them within the AWS Pinpoint Console under Custom Events. `, + description: `You can enable automatic tracking of Storage Events such as uploads and downloads. Enabling this will automatically send Storage Events to Amazon Pinpoint and you will be able to see them within the AWS Pinpoint Console under Custom Events. ` }; -import js0 from "/src/fragments/lib/storage/js/autotrack.mdx"; +import js0 from '/src/fragments/lib/storage/js/autotrack.mdx'; - \ No newline at end of file + diff --git a/src/pages/lib/storage/cancel-requests/q/platform/[platform].mdx b/src/pages/lib/storage/cancel-requests/q/platform/[platform].mdx index 70665bde9e7..97961f13c11 100644 --- a/src/pages/lib/storage/cancel-requests/q/platform/[platform].mdx +++ b/src/pages/lib/storage/cancel-requests/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Cancel requests`, - description: `Cancel an in-flight get or put requests from Storage`, + description: `Cancel an in-flight get or put requests from Storage` }; -import js0 from "/src/fragments/lib/storage/js/cancel-requests.mdx"; +import js0 from '/src/fragments/lib/storage/js/cancel-requests.mdx'; - + + +import reactnative0 from '/src/fragments/lib/storage/js/cancel-requests.mdx'; + + diff --git a/src/pages/lib/storage/configureaccess/q/platform/[platform].mdx b/src/pages/lib/storage/configureaccess/q/platform/[platform].mdx index 80172498477..16a8c6639a0 100644 --- a/src/pages/lib/storage/configureaccess/q/platform/[platform].mdx +++ b/src/pages/lib/storage/configureaccess/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `File access levels`, - description: `Learn about configuring different access levels in Amplify Storage. Objects can be public, protected, or private.`, + description: `Learn about configuring different access levels in Amplify Storage. Objects can be public, protected, or private.` }; -import js0 from "/src/fragments/lib/storage/js/configureaccess.mdx"; +import js0 from '/src/fragments/lib/storage/js/configureaccess.mdx'; - + -import ios1 from "/src/fragments/lib/storage/native_common/configureaccess/common.mdx"; +import reactnative0 from '/src/fragments/lib/storage/js/configureaccess.mdx'; - + -import android2 from "/src/fragments/lib/storage/native_common/configureaccess/common.mdx"; +import ios1 from '/src/fragments/lib/storage/native_common/configureaccess/common.mdx'; - + -import flutter3 from "/src/fragments/lib/storage/native_common/configureaccess/common.mdx"; +import android2 from '/src/fragments/lib/storage/native_common/configureaccess/common.mdx'; - + + +import flutter3 from '/src/fragments/lib/storage/native_common/configureaccess/common.mdx'; + + diff --git a/src/pages/lib/storage/copy/q/platform/[platform].mdx b/src/pages/lib/storage/copy/q/platform/[platform].mdx index 9c04179cc6b..02193effe8f 100644 --- a/src/pages/lib/storage/copy/q/platform/[platform].mdx +++ b/src/pages/lib/storage/copy/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Copy files`, - description: `Learn more about how to copy files using Amplify Framework's storage category.`, + description: `Learn more about how to copy files using Amplify Framework's storage category.` }; -import js0 from "/src/fragments/lib/storage/js/copy.mdx"; +import js0 from '/src/fragments/lib/storage/js/copy.mdx'; - + + +import reactnative0 from '/src/fragments/lib/storage/js/copy.mdx'; + + diff --git a/src/pages/lib/storage/custom-plugin/q/platform/[platform].mdx b/src/pages/lib/storage/custom-plugin/q/platform/[platform].mdx new file mode 100644 index 00000000000..d0388b7b60e --- /dev/null +++ b/src/pages/lib/storage/custom-plugin/q/platform/[platform].mdx @@ -0,0 +1,12 @@ +export const meta = { + title: `Custom Plugin`, + description: `Learn more about how to create your own custom plugin.` +}; + +import js0 from '/src/fragments/lib/storage/js/create-custom-plugin.mdx'; + + + +import reactnative0 from '/src/fragments/lib/storage/js/create-custom-plugin.mdx'; + + diff --git a/src/pages/lib/storage/download/q/platform/[platform].mdx b/src/pages/lib/storage/download/q/platform/[platform].mdx index 1cbf45a0657..dabdcba6723 100644 --- a/src/pages/lib/storage/download/q/platform/[platform].mdx +++ b/src/pages/lib/storage/download/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Download files`, - description: `Learn more about how to download / retrieve files using the Storage category of Amplify Framework`, + description: `Learn more about how to download / retrieve files using the Storage category of Amplify Framework` }; -import js0 from "/src/fragments/lib/storage/js/download.mdx"; +import js0 from '/src/fragments/lib/storage/js/download.mdx'; - + -import ios1 from "/src/fragments/lib/storage/ios/download.mdx"; +import reactnative0 from '/src/fragments/lib/storage/js/download.mdx'; - + -import android2 from "/src/fragments/lib/storage/android/download.mdx"; +import ios1 from '/src/fragments/lib/storage/ios/download.mdx'; - + -import flutter3 from "/src/fragments/lib/storage/flutter/download.mdx"; +import android2 from '/src/fragments/lib/storage/android/download.mdx'; - + + +import flutter3 from '/src/fragments/lib/storage/flutter/download.mdx'; + + diff --git a/src/pages/lib/storage/existing-resources/q/platform/[platform].mdx b/src/pages/lib/storage/existing-resources/q/platform/[platform].mdx index adc9e80d2e0..5c4c183a98b 100644 --- a/src/pages/lib/storage/existing-resources/q/platform/[platform].mdx +++ b/src/pages/lib/storage/existing-resources/q/platform/[platform].mdx @@ -1,16 +1,24 @@ export const meta = { title: `Use existing AWS resources`, - description: `Configure the Amplify Libraries to use an existing Amazon S3 bucket by referencing it in your configuration.`, + description: `Configure the Amplify Libraries to use an existing Amazon S3 bucket by referencing it in your configuration.` }; -import android0 from "/src/fragments/lib/storage/existing-resources.mdx"; +import js0 from '/src/fragments/lib/storage/existing-resources.mdx'; - + -import ios1 from "/src/fragments/lib/storage/existing-resources.mdx"; +import reactnative0 from '/src/fragments/lib/storage/existing-resources.mdx'; - + -import flutter2 from "/src/fragments/lib/storage/existing-resources.mdx"; +import android0 from '/src/fragments/lib/storage/existing-resources.mdx'; - \ No newline at end of file + + +import ios1 from '/src/fragments/lib/storage/existing-resources.mdx'; + + + +import flutter2 from '/src/fragments/lib/storage/existing-resources.mdx'; + + diff --git a/src/pages/lib/storage/getting-started/q/platform/[platform].mdx b/src/pages/lib/storage/getting-started/q/platform/[platform].mdx index 1786344ed26..2011cf87838 100644 --- a/src/pages/lib/storage/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/storage/getting-started/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Getting started`, - description: `The Amplify Storage category provides a simple mechanism for managing user content for your app in public, protected, or private storage buckets. The Amplify AWS S3 Storage plugin leverages Amazon S3.`, + description: `The Amplify Storage category provides a simple mechanism for managing user content for your app in public, protected, or private storage buckets. The Amplify AWS S3 Storage plugin leverages Amazon S3.` }; -import js0 from "/src/fragments/lib/storage/js/getting-started.mdx"; +import js0 from '/src/fragments/lib/storage/js/getting-started.mdx'; - + -import ios1 from "/src/fragments/lib/storage/native_common/getting-started/common.mdx"; +import reactnative0 from '/src/fragments/lib/storage/js/getting-started.mdx'; - + -import android2 from "/src/fragments/lib/storage/native_common/getting-started/common.mdx"; +import ios1 from '/src/fragments/lib/storage/native_common/getting-started/common.mdx'; - + -import flutter3 from "/src/fragments/lib/storage/native_common/getting-started/common.mdx"; +import android2 from '/src/fragments/lib/storage/native_common/getting-started/common.mdx'; - \ No newline at end of file + + +import flutter3 from '/src/fragments/lib/storage/native_common/getting-started/common.mdx'; + + diff --git a/src/pages/lib/storage/list/q/platform/[platform].mdx b/src/pages/lib/storage/list/q/platform/[platform].mdx index e69fb81e400..7000086952d 100644 --- a/src/pages/lib/storage/list/q/platform/[platform].mdx +++ b/src/pages/lib/storage/list/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `List files`, - description: `Learn more about how to list all of the uploaded objects using Amplify Framework's storage category.`, + description: `Learn more about how to list all of the uploaded objects using Amplify Framework's storage category.` }; -import js0 from "/src/fragments/lib/storage/js/list.mdx"; +import js0 from '/src/fragments/lib/storage/js/list.mdx'; - + -import ios1 from "/src/fragments/lib/storage/ios/list.mdx"; +import reactnative0 from '/src/fragments/lib/storage/js/list.mdx'; - + -import android2 from "/src/fragments/lib/storage/android/list.mdx"; +import ios1 from '/src/fragments/lib/storage/ios/list.mdx'; - + -import flutter3 from "/src/fragments/lib/storage/flutter/list.mdx"; +import android2 from '/src/fragments/lib/storage/android/list.mdx'; - \ No newline at end of file + + +import flutter3 from '/src/fragments/lib/storage/flutter/list.mdx'; + + diff --git a/src/pages/lib/storage/remove/q/platform/[platform].mdx b/src/pages/lib/storage/remove/q/platform/[platform].mdx index 9c07d58728d..b743fda8858 100644 --- a/src/pages/lib/storage/remove/q/platform/[platform].mdx +++ b/src/pages/lib/storage/remove/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Remove files`, - description: `Learn more about how to remove files using Amplify Framework's storage category`, + description: `Learn more about how to remove files using Amplify Framework's storage category` }; -import js0 from "/src/fragments/lib/storage/js/remove.mdx"; +import js0 from '/src/fragments/lib/storage/js/remove.mdx'; - + -import ios1 from "/src/fragments/lib/storage/ios/remove.mdx"; +import reactnative0 from '/src/fragments/lib/storage/js/remove.mdx'; - + -import android2 from "/src/fragments/lib/storage/android/remove.mdx"; +import ios1 from '/src/fragments/lib/storage/ios/remove.mdx'; - + -import flutter3 from "/src/fragments/lib/storage/flutter/remove.mdx"; +import android2 from '/src/fragments/lib/storage/android/remove.mdx'; - \ No newline at end of file + + +import flutter3 from '/src/fragments/lib/storage/flutter/remove.mdx'; + + diff --git a/src/pages/lib/storage/upload/q/platform/[platform].mdx b/src/pages/lib/storage/upload/q/platform/[platform].mdx index f23243d7a2e..ea00fdd6b15 100644 --- a/src/pages/lib/storage/upload/q/platform/[platform].mdx +++ b/src/pages/lib/storage/upload/q/platform/[platform].mdx @@ -1,20 +1,24 @@ export const meta = { title: `Upload files`, - description: `Learn more about how to upload files using Amplify Framework's storage category`, + description: `Learn more about how to upload files using Amplify Framework's storage category` }; -import js0 from "/src/fragments/lib/storage/js/upload.mdx"; +import js0 from '/src/fragments/lib/storage/js/upload.mdx'; - + -import ios1 from "/src/fragments/lib/storage/ios/upload.mdx"; +import reactnative0 from '/src/fragments/lib/storage/js/upload.mdx'; - + -import android2 from "/src/fragments/lib/storage/android/upload.mdx"; +import ios1 from '/src/fragments/lib/storage/ios/upload.mdx'; - + -import flutter3 from "/src/fragments/lib/storage/flutter/upload.mdx"; +import android2 from '/src/fragments/lib/storage/android/upload.mdx'; - + + +import flutter3 from '/src/fragments/lib/storage/flutter/upload.mdx'; + + diff --git a/src/pages/lib/troubleshooting/strict-mode/q/platform/[platform].mdx b/src/pages/lib/troubleshooting/strict-mode/q/platform/[platform].mdx index a6b6bacde59..53aac410435 100644 --- a/src/pages/lib/troubleshooting/strict-mode/q/platform/[platform].mdx +++ b/src/pages/lib/troubleshooting/strict-mode/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Typescript Strict Mode `, - description: `Typescript Strict Mode `, + description: `Typescript Strict Mode ` }; -import js0 from "/src/fragments/lib/troubleshooting/js/strict-mode.mdx"; +import js0 from '/src/fragments/lib/troubleshooting/js/strict-mode.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/troubleshooting/js/strict-mode.mdx'; + + diff --git a/src/pages/lib/troubleshooting/upgrading/q/platform/[platform].mdx b/src/pages/lib/troubleshooting/upgrading/q/platform/[platform].mdx index a0151633f5a..d052140a27c 100644 --- a/src/pages/lib/troubleshooting/upgrading/q/platform/[platform].mdx +++ b/src/pages/lib/troubleshooting/upgrading/q/platform/[platform].mdx @@ -1,12 +1,16 @@ export const meta = { title: `Upgrading Amplify packages `, - description: `Upgrading Amplify packages `, + description: `Upgrading Amplify packages ` }; -import js0 from "/src/fragments/lib/troubleshooting/js/upgrading.mdx"; +import js0 from '/src/fragments/lib/troubleshooting/js/upgrading.mdx'; - + -import flutter1 from "/src/fragments/lib/troubleshooting/flutter/upgrading.mdx"; +import reactnative0 from '/src/fragments/lib/troubleshooting/js/upgrading.mdx'; - \ No newline at end of file + + +import flutter1 from '/src/fragments/lib/troubleshooting/flutter/upgrading.mdx'; + + diff --git a/src/pages/lib/utilities/cache/q/platform/[platform].mdx b/src/pages/lib/utilities/cache/q/platform/[platform].mdx index 15f797d696f..c6706943415 100644 --- a/src/pages/lib/utilities/cache/q/platform/[platform].mdx +++ b/src/pages/lib/utilities/cache/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Cache`, - description: `The Amplify Cache module provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings.`, + description: `The Amplify Cache module provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings.` }; -import js0 from "/src/fragments/lib/utilities/cache.mdx"; +import js0 from '/src/fragments/lib/utilities/cache.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/utilities/cache.mdx'; + + diff --git a/src/pages/lib/utilities/hub/q/platform/[platform].mdx b/src/pages/lib/utilities/hub/q/platform/[platform].mdx index 28c235cb9cc..e5180356612 100644 --- a/src/pages/lib/utilities/hub/q/platform/[platform].mdx +++ b/src/pages/lib/utilities/hub/q/platform/[platform].mdx @@ -1,16 +1,20 @@ export const meta = { title: `Hub`, - description: `Amplify has a local eventing system called Hub. It is a lightweight implementation of Publisher-Subscriber pattern, and is used to share data between modules and components in your app. `, + description: `Amplify has a local eventing system called Hub. It is a lightweight implementation of Publisher-Subscriber pattern, and is used to share data between modules and components in your app. ` }; -import js0 from "/src/fragments/lib/utilities/js/hub.mdx"; +import js0 from '/src/fragments/lib/utilities/js/hub.mdx'; - + -import android1 from "/src/fragments/lib/utilities/native_common/hub/common.mdx"; +import reactnative0 from '/src/fragments/lib/utilities/js/hub.mdx'; - + -import ios2 from "/src/fragments/lib/utilities/native_common/hub/common.mdx"; +import android1 from '/src/fragments/lib/utilities/native_common/hub/common.mdx'; - + + +import ios2 from '/src/fragments/lib/utilities/native_common/hub/common.mdx'; + + diff --git a/src/pages/lib/utilities/i18n/q/platform/[platform].mdx b/src/pages/lib/utilities/i18n/q/platform/[platform].mdx index 88a90618a17..3f071f6761f 100644 --- a/src/pages/lib/utilities/i18n/q/platform/[platform].mdx +++ b/src/pages/lib/utilities/i18n/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Internationalization`, - description: `The AWS Amplify I18n module is a lightweight internationalization solution.`, + description: `The AWS Amplify I18n module is a lightweight internationalization solution.` }; -import js0 from "/src/fragments/lib/utilities/i18n.mdx"; +import js0 from '/src/fragments/lib/utilities/i18n.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/utilities/i18n.mdx'; + + diff --git a/src/pages/lib/utilities/logger/q/platform/[platform].mdx b/src/pages/lib/utilities/logger/q/platform/[platform].mdx index 38204198124..1c61ec6fc04 100644 --- a/src/pages/lib/utilities/logger/q/platform/[platform].mdx +++ b/src/pages/lib/utilities/logger/q/platform/[platform].mdx @@ -1,8 +1,12 @@ export const meta = { title: `Logger`, - description: `AWS Amplify writes console logs through Logger. You can use Logger in your apps for the same purpose.`, + description: `AWS Amplify writes console logs through Logger. You can use Logger in your apps for the same purpose.` }; -import js0 from "/src/fragments/lib/utilities/logger.mdx"; +import js0 from '/src/fragments/lib/utilities/logger.mdx'; - \ No newline at end of file + + +import reactnative0 from '/src/fragments/lib/utilities/logger.mdx'; + + diff --git a/src/pages/lib/xr/getting-started/q/platform/[platform].mdx b/src/pages/lib/xr/getting-started/q/platform/[platform].mdx index 350bbf9656f..7060ec1cb04 100644 --- a/src/pages/lib/xr/getting-started/q/platform/[platform].mdx +++ b/src/pages/lib/xr/getting-started/q/platform/[platform].mdx @@ -1,8 +1,8 @@ export const meta = { title: `Getting started`, - description: `Get started with XR category in Amplify`, + description: `Get started with XR category in Amplify` }; -import js0 from "/src/fragments/lib/xr/getting-started.mdx"; +import js0 from '/src/fragments/lib/xr/getting-started.mdx'; - \ No newline at end of file + diff --git a/src/pages/lib/xr/sceneapi/q/platform/[platform].mdx b/src/pages/lib/xr/sceneapi/q/platform/[platform].mdx index 45caeeb4156..4642c9dd84d 100644 --- a/src/pages/lib/xr/sceneapi/q/platform/[platform].mdx +++ b/src/pages/lib/xr/sceneapi/q/platform/[platform].mdx @@ -1,8 +1,8 @@ export const meta = { title: `Scene API`, - description: `Learn more about the Scene API in the XR category of Amplify`, + description: `Learn more about the Scene API in the XR category of Amplify` }; -import js0 from "/src/fragments/lib/xr/sceneapi.mdx"; +import js0 from '/src/fragments/lib/xr/sceneapi.mdx'; - \ No newline at end of file + diff --git a/src/utils/filter-data.ts b/src/utils/filter-data.ts index 1ce467a0753..b363867438f 100644 --- a/src/utils/filter-data.ts +++ b/src/utils/filter-data.ts @@ -22,7 +22,7 @@ type FilterMetadataByOption = Record< /** * filter constants */ -export const PLATFORM_FILTER_OPTIONS = ["js", "android", "ios", "flutter"]; +export const PLATFORM_FILTER_OPTIONS = ["android", "js", "ios", "flutter", "react-native"]; export const FRAMEWORK_FILTER_OPTIONS = [ "react", @@ -48,14 +48,14 @@ export const filterOptionsByName = { export const FILTER_OPTIONS = [...INTEGRATION_FILTER_OPTIONS]; export const filterMetadataByOption: FilterMetadataByOption = { - js: { - label: "JavaScript", - graphicURI: "/assets/integrations/js.svg", - }, android: { label: "Android", graphicURI: "/assets/integrations/android.svg", }, + js: { + label: "JavaScript", + graphicURI: "/assets/integrations/js.svg", + }, ios: { label: "iOS", graphicURI: "/assets/integrations/ios.svg", diff --git a/src/utils/withFilterOverrides.ts b/src/utils/withFilterOverrides.ts index 7c3020b7e95..5e8eee3327b 100644 --- a/src/utils/withFilterOverrides.ts +++ b/src/utils/withFilterOverrides.ts @@ -2,27 +2,32 @@ import { filterMetadataByOption, FRAMEWORK_FILTER_OPTIONS, PLATFORM_FILTER_OPTIONS, - SelectedFilters, -} from "./filter-data"; + SelectedFilters +} from './filter-data'; export const withFilterOverrides = ( updates: SelectedFilters, - currentSelection: SelectedFilters, + currentSelection: SelectedFilters ): SelectedFilters => { const overrides: SelectedFilters = {}; if (updates.integration) { // if user sets integration to js, set platform to js - if (updates.integration === "js") { - overrides.platform = "js"; - // if user sets integration to flutter, set platform to flutter - } else if (updates.integration === "flutter") { - overrides.platform = "flutter" + if (updates.integration === 'js') { + overrides.platform = 'js'; + // if user sets integration to flutter, set platform to flutter + } else if (updates.integration === 'flutter') { + overrides.platform = 'flutter'; + } else if (updates.integration === 'react-native') { + overrides.platform = 'react-native'; } // if user sets integration to a framework, set platform to js and framework to whatever was selected - else if (FRAMEWORK_FILTER_OPTIONS.includes(updates.integration) && updates.integration !== "flutter") { - overrides.platform = "js"; + else if ( + FRAMEWORK_FILTER_OPTIONS.includes(updates.integration) && + updates.integration !== 'flutter' + ) { + overrides.platform = 'js'; overrides.framework = updates.integration as keyof typeof filterMetadataByOption; } @@ -37,13 +42,13 @@ export const withFilterOverrides = ( if (updates.platform) { // if platform has been set to js - if (updates.platform === "js") { + if (updates.platform === 'js') { // and there is an integration currently selected if (currentSelection.integration) { // and the currently-selected integration is NOT a framework if (!FRAMEWORK_FILTER_OPTIONS.includes(currentSelection.integration)) { // override the integration as js - overrides.integration = "js" as keyof typeof filterMetadataByOption; + overrides.integration = 'js' as keyof typeof filterMetadataByOption; } } @@ -51,10 +56,10 @@ export const withFilterOverrides = ( else { updates.integration = updates.platform; } - // if platform has been set to flutter, then set it as integration and as framework - } else if (updates.platform === "flutter") { + // if platform has been set to flutter, then set it as integration and as framework + } else if (updates.platform === 'flutter') { updates.integration = updates.platform; - updates.framework = "flutter" + updates.framework = 'flutter'; } // if the platform update is not js nor flutter, then set it as the integration, and clear the selected framework @@ -66,14 +71,16 @@ export const withFilterOverrides = ( // if framework is set, update the integration state with it if (updates.framework) { - if (updates.framework === "flutter") { - overrides.platform = "flutter"; - // if the framework is not flutter, assume it is a js framework and set platform to js + if (updates.framework === 'flutter') { + overrides.platform = 'flutter'; + } else if (updates.framework === 'react-native') { + overrides.platform = 'react-native'; } else { - overrides.platform = "js"; + // if the framework is not any of the above, assume it is a js framework and set platform to js + overrides.platform = 'js'; } overrides.integration = updates.framework as keyof typeof filterMetadataByOption; } - return {...updates, ...overrides}; + return { ...updates, ...overrides }; };