diff --git a/amplify-migration-apps/store-locator/.gitignore b/amplify-migration-apps/store-locator/.gitignore new file mode 100644 index 00000000000..883e79e8d14 --- /dev/null +++ b/amplify-migration-apps/store-locator/.gitignore @@ -0,0 +1,46 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +#amplify-do-not-edit-begin +amplify/\#current-cloud-backend +amplify/.config/local-* +amplify/logs +amplify/mock-data +amplify/mock-api-resources +amplify/backend/amplify-meta.json +amplify/backend/.temp +build/ +dist/ +node_modules/ +aws-exports.js +awsconfiguration.json +amplifyconfiguration.json +amplifyconfiguration.dart +amplify-build-config.json +amplify-gradle-config.json +amplifytools.xcconfig +.secret-* +**.sample +#amplify-do-not-edit-end diff --git a/amplify-migration-apps/store-locator/README.md b/amplify-migration-apps/store-locator/README.md new file mode 100644 index 00000000000..e2d944da3b1 --- /dev/null +++ b/amplify-migration-apps/store-locator/README.md @@ -0,0 +1,310 @@ +# Store Locator (Amplify Gen1) + +![](./images/app.png) + +A store locator app that displays store locations on an interactive map powered by AWS Amplify Geo and Amazon Location Service. It uses Maps for rendering store locations, Place Index (Location Search) for address search, and Geofence Collections for users to define virtual perimeters around store areas. + +## Install Dependencies + +```console +npm install +``` + +## Initialize Environment + +```console +amplify init +``` + +```console +⚠️ For new projects, we recommend starting with AWS Amplify Gen 2, our new code-first developer experience. Get started at https://docs.amplify.aws/react/start/quickstart/ +✔ Do you want to continue with Amplify Gen 1? (y/N) · yes +✔ Why would you like to use Amplify Gen 1? · Prefer not to answer +Note: It is recommended to run this command from the root of your app directory +? Enter a name for the project storeLocator +The following configuration will be applied: + +Project information +| Name: storeLocator +| Environment: main +| Default editor: Visual Studio Code +| App type: javascript +| Javascript framework: react +| Source Directory Path: src +| Distribution Directory Path: dist +| Build Command: npm run-script build +| Start Command: npm run-script start + +? Initialize the project with the above configuration? No +? Enter a name for the environment main +? Choose your default editor: Visual Studio Code +✔ Choose the type of app that you're building · javascript +Please tell us about your project +? What javascript framework are you using react +? Source Directory Path: src +? Distribution Directory Path: dist +? Build Command: npm run-script build +? Start Command: npm run-script start +Using default provider awscloudformation +? Select the authentication method you want to use: AWS profile + +For more information on AWS Profiles, see: +https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html + +? Please choose the profile you want to use default +``` + +## Add Categories + +### Auth + +Cognito-based auth using email. Create Cognito user pool groups for Geofences and add post confirmation lambda trigger to add users to the group. + +```console +amplify add auth +``` + +```console +? Do you want to use the default authentication and security configuration? Manual configuration +? Select the authentication/authorization services that you want to use: User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for i +mages or other content, Analytics, and more) +? Provide a friendly name for your resource that will be used to label this category in the project: (accept default value) +? Enter a name for your identity pool. (accept default value) +? Allow unauthenticated logins? (Provides scoped down permissions that you can control via AWS IAM) No +? Do you want to enable 3rd party authentication providers in your identity pool? No +? Provide a name for your user pool: (accept default value) +? How do you want users to be able to sign in? Email +? Do you want to add User Pool Groups? Yes +? Provide a name for your user pool group: storeLocatorAdmin +? Do you want to add another User Pool Group No +? Sort the user pool groups in order of preference · storeLocatorAdmin +? Do you want to add an admin queries API? No +? Multifactor authentication (MFA) user login options: OFF +? Email based user registration/forgot password: Enabled (Requires per-user email entry at registration) +? Specify an email verification subject: Your verification code +? Specify an email verification message: Your verification code is {####} +? Do you want to override the default password policy for this User Pool? No +? What attributes are required for signing up? Email +? Specify the app's refresh token expiration period (in days): 100 +? Do you want to specify the user attributes this app can read and write? No +? Do you want to enable any of the following capabilities? Add User to Group +? Do you want to use an OAuth flow? No +? Do you want to configure Lambda Triggers for Cognito? Yes +? Which triggers do you want to enable for Cognito Post Confirmation +? What functionality do you want to use for Post Confirmation Add User To Group +? Enter the name of the group to which users will be added. · storeLocatorAdmin +``` + +### Geo - Map + +Map resource for displaying store locations using Amazon Location Service. + +```console +amplify add geo +``` + +```console +? Select which capability you want to add: Map (visualize the geospatial data) +✔ Provide a name for the Map: · storeLocatorMap +✔ Restrict access by? · Both +✔ Who can access this Map? · Authorized and Guest users +Must pick at least 1 of 1 options. Selecting all options [storeLocatorAdmin] +Available advanced settings: +- Map style & Map data provider (default: Streets provided by Esri) + +✔ Do you want to configure advanced settings? (y/N) · no +``` + +### Geo - Location Search + +Search index for searching places and addresses. + +```console +amplify add geo +``` + +```console +? Select which capability you want to add: Location search (search by places, addresses, coordinates) +✔ Provide a name for the location search index (place index): · storeLocatorSearch +✔ Restrict access by? · Both +✔ Who can access this search index? · Authorized and Guest users +Must pick at least 1 of 1 options. Selecting all options [storeLocatorAdmin] +Available advanced settings: +- Search data provider (default: HERE) +- Search result storage location (default: no result storage) + +✔ Do you want to configure advanced settings? (y/N) · no +``` + +### Geo - Geofence + +```console +amplify add geo +``` + +```console +? Select which capability you want to add: Geofencing (visualize virtual perimeters) +✔ Provide a name for the Geofence Collection: · storeLocatorGeofence +Must pick at least 1 of 1 options. Selecting all options [storeLocatorAdmin] +✔ What kind of access do you want for storeLocatorAdmin users? Select ALL that apply: · Read geofence, Create/Update geofence, Delete geofence, List geofences +``` + +```console +amplify push +``` + +```console + Current Environment: main + +┌──────────┬──────────────────────────────────────────┬───────────┬───────────────────┐ +│ Category │ Resource name │ Operation │ Provider plugin │ +├──────────┼──────────────────────────────────────────┼───────────┼───────────────────┤ +│ Auth │ storelocatorcff4360f │ Create │ awscloudformation │ +├──────────┼──────────────────────────────────────────┼───────────┼───────────────────┤ +│ Geo │ storeLocatorMap │ Create │ awscloudformation │ +├──────────┼──────────────────────────────────────────┼───────────┼───────────────────┤ +│ Auth │ userPoolGroups │ Create │ awscloudformation │ +├──────────┼──────────────────────────────────────────┼───────────┼───────────────────┤ +│ Function │ storelocatorcff4360fPostConfirmation │ Create │ awscloudformation │ +├──────────┼──────────────────────────────────────────┼───────────┼───────────────────┤ +│ Geo │ storeLocatorGeofence │ Create │ awscloudformation │ +├──────────┼──────────────────────────────────────────┼───────────┼───────────────────┤ +│ Geo │ storeLocatorSearch │ Create │ awscloudformation │ +└──────────┴──────────────────────────────────────────┴───────────┴───────────────────┘ + +✔ Are you sure you want to continue? (Y/n) · yes +``` + +## Publish Frontend + +To publish the frontend, leverage the Amplify hosting console. First push everything to the `main` branch: + +```console +git add . +git commit -m "feat: gen1" +git push origin main +``` + +Next, accept all the default values and follow the getting started wizard to connect your repo and branch. Wait for the deployment to finish successfully. + +![](./images/hosting-get-started.png) +![](./images/add-main-branch.png) +![](./images/deploying-main-branch.png) + +Wait for the deployment to finish successfully. + +## Migrating to Gen2 + +> Based on https://github.com/aws-amplify/amplify-cli/blob/gen2-migration/GEN2_MIGRATION_GUIDE.md + +> [!WARNING] +> Migration is not fully supported for this app because the geo category doesn't support refactoring yet. +> This guide ends at the `generate` step. + +First install the experimental amplify CLI package that provides the migration commands. + +```console +npm install @aws-amplify/cli-internal-gen2-migration-experimental-alpha +``` + +Now run them: + +```console +npx amplify gen2-migration lock +``` + +```console +git checkout -b gen2-main +npx amplify gen2-migration generate +``` + +**Edit in `./src/main.tsx`:** + +```diff +- import amplifyconfig from './amplifyconfiguration.json'; ++ import amplifyconfig from '../amplify_outputs.json'; +``` + +```console +git add . +git commit -m "feat: migrate to gen2" +git push origin gen2-main +``` + +**Edit in `./amplify/auth/storelocatorcff4360fPostConfirmation/resource.ts`:** + +```diff +- memoryMB: 128, +- runtime: 22 ++ memoryMB: 512, ++ runtime: 22, ++ resourceGroupName: 'auth' +``` + +**Edit in `./amplify/auth/storelocatorcff4360fPostConfirmation/index.js`:** + +The Gen1 dynamic `require(`./${name}`)` doesn't work with esbuild bundling in the Amplify build pipeline (`Module not found in bundle: ./add-to-group`). Replace with a static import: + +```diff +- const moduleNames = process.env.MODULES.split(','); +- /** +- * The array of imported modules. +- */ +- const modules = moduleNames.map((name) => require(`./${name}`)); ++ import * as addToGroup from './add-to-group'; ++ ++ const modules = [addToGroup]; +``` + +```diff +- exports.handler = async (event, context) => { ++ export async function handler(event, context) { +``` + +**Edit in `./amplify/auth/storelocatorcff4360fPostConfirmation/add-to-group.js`:** + +```diff +- const { +- CognitoIdentityProviderClient, +- AdminAddUserToGroupCommand, +- GetGroupCommand, +- CreateGroupCommand, +- } = require('@aws-sdk/client-cognito-identity-provider'); ++ import { ++ CognitoIdentityProviderClient, ++ AdminAddUserToGroupCommand, ++ GetGroupCommand, ++ CreateGroupCommand, ++ } from '@aws-sdk/client-cognito-identity-provider'; +``` + +```diff +- exports.handler = async (event) => { ++ export const handler = async (event) => { +``` + +**Edit in `./amplify/auth/resource.ts`:** + +```diff +- triggers: { +- postConfirmation: storelocatorcff4360fPostConfirmation +- }, ++ triggers: { ++ postConfirmation: storelocatorcff4360fPostConfirmation ++ }, ++ access: (allow) => [ ++ allow.resource(storelocatorcff4360fPostConfirmation).to([ ++ "addUserToGroup", ++ "manageGroups", ++ ]), ++ ], +``` + +Now connect the `gen2-main` branch to the hosting service: + +![](./images/add-gen2-main-branch.png) +![](./images/deploying-gen2-main-branch.png) + +Wait for the deployment to finish successfully. + +**The guide ends here because the geo category doesn't support refactoring yet.** diff --git a/amplify-migration-apps/store-locator/eslint.config.js b/amplify-migration-apps/store-locator/eslint.config.js new file mode 100644 index 00000000000..6f236359302 --- /dev/null +++ b/amplify-migration-apps/store-locator/eslint.config.js @@ -0,0 +1,18 @@ +import js from '@eslint/js'; +import globals from 'globals'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactRefresh from 'eslint-plugin-react-refresh'; +import tseslint from 'typescript-eslint'; +import { defineConfig, globalIgnores } from 'eslint/config'; + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [js.configs.recommended, tseslint.configs.recommended, reactHooks.configs.flat.recommended, reactRefresh.configs.vite], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + }, +]); diff --git a/amplify-migration-apps/store-locator/images/add-gen2-main-branch.png b/amplify-migration-apps/store-locator/images/add-gen2-main-branch.png new file mode 100644 index 00000000000..236c5d5a772 Binary files /dev/null and b/amplify-migration-apps/store-locator/images/add-gen2-main-branch.png differ diff --git a/amplify-migration-apps/store-locator/images/add-main-branch.png b/amplify-migration-apps/store-locator/images/add-main-branch.png new file mode 100644 index 00000000000..81f5676edb6 Binary files /dev/null and b/amplify-migration-apps/store-locator/images/add-main-branch.png differ diff --git a/amplify-migration-apps/store-locator/images/app.png b/amplify-migration-apps/store-locator/images/app.png new file mode 100644 index 00000000000..35a736603d7 Binary files /dev/null and b/amplify-migration-apps/store-locator/images/app.png differ diff --git a/amplify-migration-apps/store-locator/images/deploying-gen2-main-branch.png b/amplify-migration-apps/store-locator/images/deploying-gen2-main-branch.png new file mode 100644 index 00000000000..4be42e2231a Binary files /dev/null and b/amplify-migration-apps/store-locator/images/deploying-gen2-main-branch.png differ diff --git a/amplify-migration-apps/store-locator/images/deploying-main-branch.png b/amplify-migration-apps/store-locator/images/deploying-main-branch.png new file mode 100644 index 00000000000..0f19512dc15 Binary files /dev/null and b/amplify-migration-apps/store-locator/images/deploying-main-branch.png differ diff --git a/amplify-migration-apps/store-locator/images/find-gen2-stack.png b/amplify-migration-apps/store-locator/images/find-gen2-stack.png new file mode 100644 index 00000000000..6e62d9e9d1c Binary files /dev/null and b/amplify-migration-apps/store-locator/images/find-gen2-stack.png differ diff --git a/amplify-migration-apps/store-locator/images/hosting-get-started.png b/amplify-migration-apps/store-locator/images/hosting-get-started.png new file mode 100644 index 00000000000..498dfa66164 Binary files /dev/null and b/amplify-migration-apps/store-locator/images/hosting-get-started.png differ diff --git a/amplify-migration-apps/store-locator/index.html b/amplify-migration-apps/store-locator/index.html new file mode 100644 index 00000000000..6ed4c17060a --- /dev/null +++ b/amplify-migration-apps/store-locator/index.html @@ -0,0 +1,13 @@ + + + + + + + storelocator + + +
+ + + diff --git a/amplify-migration-apps/store-locator/package.json b/amplify-migration-apps/store-locator/package.json new file mode 100644 index 00000000000..5f5b1dccd19 --- /dev/null +++ b/amplify-migration-apps/store-locator/package.json @@ -0,0 +1,36 @@ +{ + "name": "storelocator", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@aws-amplify/geo": "^3.0.92", + "@aws-amplify/ui-react": "^6.13.2", + "@aws-amplify/ui-react-geo": "^2.2.13", + "aws-amplify": "^6.16.0", + "maplibre-gl": "^2.4.0", + "maplibre-gl-js-amplify": "^4.0.2", + "react": "^19.2.0", + "react-dom": "^19.2.0" + }, + "devDependencies": { + "@eslint/js": "^9.39.1", + "@types/node": "^24.10.1", + "@types/react": "^19.2.5", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^5.1.1", + "eslint": "^9.39.1", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.4.24", + "globals": "^16.5.0", + "typescript": "~5.9.3", + "typescript-eslint": "^8.46.4", + "vite": "^7.2.4" + } +} diff --git a/amplify-migration-apps/store-locator/public/vite.svg b/amplify-migration-apps/store-locator/public/vite.svg new file mode 100644 index 00000000000..e7b8dfb1b2a --- /dev/null +++ b/amplify-migration-apps/store-locator/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/amplify-migration-apps/store-locator/src/App.css b/amplify-migration-apps/store-locator/src/App.css new file mode 100644 index 00000000000..913eace8803 --- /dev/null +++ b/amplify-migration-apps/store-locator/src/App.css @@ -0,0 +1,158 @@ +.app { + height: 100%; + display: flex; + flex-direction: column; +} + +.header { + padding: 1rem; + background-color: #232f3e; + color: white; + position: relative; +} + +.header h1 { + margin: 0 0 0.5rem 0; + font-size: 1.5rem; + font-weight: 500; +} + +.search-form { + display: flex; + gap: 0.5rem; +} + +.search-input { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} + +.search-button { + padding: 0.5rem 1rem; + background-color: #ff9900; + border: none; + border-radius: 4px; + color: #232f3e; + font-weight: 500; + cursor: pointer; +} + +.search-button:hover { + background-color: #ffac31; +} + +.search-button:disabled { + background-color: #ccc; + cursor: not-allowed; +} + +.search-results { + position: absolute; + top: 100%; + left: 1rem; + right: 1rem; + background: white; + color: #232f3e; + list-style: none; + margin: 0; + padding: 0; + border-radius: 0 0 4px 4px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + z-index: 1000; +} + +.search-results li { + padding: 0.75rem 1rem; + cursor: pointer; + border-bottom: 1px solid #eee; +} + +.search-results li:last-child { + border-bottom: none; +} + +.search-results li:hover { + background-color: #f5f5f5; +} + +.map-container { + flex: 1; + width: 100%; +} + + +/* Fix marker popup sizing */ +.maplibregl-popup-content { + padding: 10px !important; + box-sizing: border-box; + width: auto !important; + min-width: unset !important; + max-width: 250px !important; +} + +.maplibregl-popup { + max-width: none !important; +} + +.maplibregl-popup-content h3 { + margin: 0 0 5px 0; + font-size: 14px; +} + +.maplibregl-popup-content p { + margin: 0; + font-size: 12px; +} + + +/* Auth section styles */ +.header-top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +} + +.auth-section { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.user-email { + font-size: 0.875rem; + opacity: 0.8; +} + +.sign-out-button { + padding: 0.25rem 0.5rem; + background-color: transparent; + border: 1px solid white; + border-radius: 4px; + color: white; + font-size: 0.75rem; + cursor: pointer; +} + +.sign-out-button:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +/* Amplify Authenticator overrides */ +[data-amplify-authenticator] { + --amplify-components-button-primary-background-color: #ff9900; + --amplify-components-button-primary-hover-background-color: #ffac31; +} + + +/* Center the Authenticator */ +[data-amplify-authenticator] { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #232f3e; +} diff --git a/amplify-migration-apps/store-locator/src/App.tsx b/amplify-migration-apps/store-locator/src/App.tsx new file mode 100644 index 00000000000..f4be171cb61 --- /dev/null +++ b/amplify-migration-apps/store-locator/src/App.tsx @@ -0,0 +1,208 @@ +import { useEffect, useRef, useState } from 'react'; +import { createMap, drawPoints, AmplifyGeofenceControl } from 'maplibre-gl-js-amplify'; +import maplibregl from 'maplibre-gl'; +import { Geo } from '@aws-amplify/geo'; +import { Authenticator } from '@aws-amplify/ui-react'; +import 'maplibre-gl/dist/maplibre-gl.css'; +import 'maplibre-gl-js-amplify/dist/public/amplify-map.css'; +import 'maplibre-gl-js-amplify/dist/public/amplify-ctrl-geofence.css'; +import '@aws-amplify/ui-react/styles.css'; +import './App.css'; + +// Sample store locations - New York +const storeLocations = [ + { + coordinates: [-73.9857, 40.7484] as [number, number], + title: 'Midtown Manhattan Store', + address: '350 5th Avenue, New York, NY', + }, + { + coordinates: [-73.9805, 40.787] as [number, number], + title: 'Upper West Side Store', + address: '2100 Broadway, New York, NY', + }, + { + coordinates: [-73.9442, 40.6782] as [number, number], + title: 'Brooklyn Store', + address: '445 Albee Square, Brooklyn, NY', + }, + { + coordinates: [-74.006, 40.7128] as [number, number], + title: 'Financial District Store', + address: '100 Wall Street, New York, NY', + }, + { + coordinates: [-73.9855, 40.758] as [number, number], + title: 'Times Square Store', + address: '1560 Broadway, New York, NY', + }, + { + coordinates: [-73.9654, 40.7829] as [number, number], + title: 'Central Park Store', + address: '10 Columbus Circle, New York, NY', + }, + { + coordinates: [-73.9934, 40.7505] as [number, number], + title: 'Hudson Yards Store', + address: '20 Hudson Yards, New York, NY', + }, + { + coordinates: [-73.9776, 40.7614] as [number, number], + title: 'Rockefeller Center Store', + address: '45 Rockefeller Plaza, New York, NY', + }, + { + coordinates: [-74.0445, 40.6892] as [number, number], + title: 'Staten Island Ferry Store', + address: '4 Whitehall Street, New York, NY', + }, + { + coordinates: [-73.9496, 40.6501] as [number, number], + title: 'Flatbush Store', + address: '900 Flatbush Avenue, Brooklyn, NY', + }, +]; + +interface SearchResult { + label?: string; + geometry?: { + point?: [number, number]; + }; +} + +interface StoreLocatorProps { + signOut: () => void; + user: { signInDetails?: { loginId?: string } }; +} + +function StoreLocator({ signOut, user }: StoreLocatorProps) { + const mapRef = useRef(null); + const markerRef = useRef(null); + const [searchQuery, setSearchQuery] = useState(''); + const [searchResults, setSearchResults] = useState([]); + const [isSearching, setIsSearching] = useState(false); + + useEffect(() => { + async function initializeMap() { + const map = await createMap({ + container: 'map', + center: [-73.9857, 40.7484], + zoom: 11, + }); + + mapRef.current = map; + + map.on('load', function () { + drawPoints('storeLocations', storeLocations, map, { + showCluster: true, + unclusteredOptions: { + showMarkerPopup: true, + }, + clusterOptions: { + showCount: true, + smCircleSize: 20, + mdCircleSize: 30, + lgCircleSize: 40, + clusterMaxZoom: 12, + }, + }); + + // Add geofence control + const geofenceControl = new AmplifyGeofenceControl(); + map.addControl(geofenceControl as unknown as maplibregl.IControl); + }); + } + + initializeMap(); + + return () => { + if (mapRef.current) { + mapRef.current.remove(); + } + }; + }, []); + + const handleSearch = async (e: React.FormEvent) => { + e.preventDefault(); + if (!searchQuery.trim()) return; + + setIsSearching(true); + try { + const results = await Geo.searchByText(searchQuery, { + maxResults: 5, + }); + setSearchResults(results); + } catch (error) { + console.error('Search error:', error); + setSearchResults([]); + } finally { + setIsSearching(false); + } + }; + + const handleResultClick = (result: SearchResult) => { + if (result.geometry?.point && mapRef.current) { + const [lng, lat] = result.geometry.point; + + if (markerRef.current) { + markerRef.current.remove(); + } + + markerRef.current = new maplibregl.Marker({ color: '#ff9900' }) + .setLngLat([lng, lat]) + .setPopup(new maplibregl.Popup().setHTML(`${result.label}`)) + .addTo(mapRef.current); + + mapRef.current.flyTo({ + center: [lng, lat], + zoom: 15, + }); + setSearchResults([]); + setSearchQuery(''); + } + }; + + return ( +
+
+
+

Store Locator

+
+ {user.signInDetails?.loginId} + +
+
+
+ setSearchQuery(e.target.value)} + className="search-input" + /> + +
+ {searchResults.length > 0 && ( +
    + {searchResults.map((result, index) => ( +
  • handleResultClick(result)}> + {result.label} +
    • + ))} +
+ )} +
+
+
+ ); +} + +function App() { + return {({ signOut, user }) => }; +} + +export default App; diff --git a/amplify-migration-apps/store-locator/src/assets/react.svg b/amplify-migration-apps/store-locator/src/assets/react.svg new file mode 100644 index 00000000000..6c87de9bb33 --- /dev/null +++ b/amplify-migration-apps/store-locator/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/amplify-migration-apps/store-locator/src/index.css b/amplify-migration-apps/store-locator/src/index.css new file mode 100644 index 00000000000..5d5be76d5d0 --- /dev/null +++ b/amplify-migration-apps/store-locator/src/index.css @@ -0,0 +1,11 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body, +#root { + height: 100%; +} diff --git a/amplify-migration-apps/store-locator/src/main.tsx b/amplify-migration-apps/store-locator/src/main.tsx new file mode 100644 index 00000000000..ff81d6c69dc --- /dev/null +++ b/amplify-migration-apps/store-locator/src/main.tsx @@ -0,0 +1,14 @@ +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; +import { Amplify } from 'aws-amplify'; +import './index.css'; +import App from './App.tsx'; +import amplifyconfig from './amplifyconfiguration.json'; + +Amplify.configure(amplifyconfig); + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/amplify-migration-apps/store-locator/tsconfig.app.json b/amplify-migration-apps/store-locator/tsconfig.app.json new file mode 100644 index 00000000000..a9b5a59ca64 --- /dev/null +++ b/amplify-migration-apps/store-locator/tsconfig.app.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "types": ["vite/client"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/amplify-migration-apps/store-locator/tsconfig.json b/amplify-migration-apps/store-locator/tsconfig.json new file mode 100644 index 00000000000..1ffef600d95 --- /dev/null +++ b/amplify-migration-apps/store-locator/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/amplify-migration-apps/store-locator/tsconfig.node.json b/amplify-migration-apps/store-locator/tsconfig.node.json new file mode 100644 index 00000000000..8a67f62f4ce --- /dev/null +++ b/amplify-migration-apps/store-locator/tsconfig.node.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2023", + "lib": ["ES2023"], + "module": "ESNext", + "types": ["node"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/amplify-migration-apps/store-locator/vite.config.ts b/amplify-migration-apps/store-locator/vite.config.ts new file mode 100644 index 00000000000..8d84b235208 --- /dev/null +++ b/amplify-migration-apps/store-locator/vite.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], + define: { + global: 'globalThis', + }, + resolve: { + alias: { + './runtimeConfig': './runtimeConfig.browser', + }, + }, +});