diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 29b4982a8..4f470d639 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,6 @@ { "recommendations": [ - "shopify.polaris-for-vscode" + "shopify.polaris-for-vscode", + "lokalise.i18n-ally" ] -} +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..61b6722ff --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,9 @@ +{ + "i18n-ally.localesPaths": [ + "web/frontend/locales" + ], + "i18n-ally.enabledFrameworks": [ + "i18next-shopify" + ], + "i18n-ally.keystyle": "nested" +} diff --git a/README.md b/README.md index e4d70cb8f..58e620ebe 100644 --- a/README.md +++ b/README.md @@ -22,25 +22,25 @@ The PHP app template comes with the following out-of-the-box functionality: This template combines a number of third party open source tools: -- [Laravel](https://laravel.com/) builds and tests the backend. -- [Vite](https://vitejs.dev/) builds the [React](https://reactjs.org/) frontend. -- [React Router](https://reactrouter.com/) is used for routing. We wrap this with file-based routing. -- [React Query](https://react-query.tanstack.com/) queries the Admin API. -- [`i18next`](https://www.i18next.com/) and related libraries are used to internationalize the frontend. - - [`react-i18next`](https://react.i18next.com/) is used for React-specific i18n functionality. - - [`i18next-resources-to-backend`](https://github.com/i18next/i18next-resources-to-backend) is used to dynamically load app translations. - - [`@formatjs/intl-localematcher`](https://formatjs.io/docs/polyfills/intl-localematcher/) is used to match the user locale with supported app locales. - - [`@formatjs/intl-locale`](https://formatjs.io/docs/polyfills/intl-locale) is used as a polyfill for [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) if necessary. - - [`@formatjs/intl-pluralrules`](https://formatjs.io/docs/polyfills/intl-pluralrules) is used as a polyfill for [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) if necessary. +- [Laravel](https://laravel.com/) builds and tests the backend. +- [Vite](https://vitejs.dev/) builds the [React](https://reactjs.org/) frontend. +- [React Router](https://reactrouter.com/) is used for routing. We wrap this with file-based routing. +- [React Query](https://react-query.tanstack.com/) queries the Admin API. +- [`i18next`](https://www.i18next.com/) and related libraries are used to internationalize the frontend. + - [`react-i18next`](https://react.i18next.com/) is used for React-specific i18n functionality. + - [`i18next-resources-to-backend`](https://github.com/i18next/i18next-resources-to-backend) is used to dynamically load app translations. + - [`@formatjs/intl-localematcher`](https://formatjs.io/docs/polyfills/intl-localematcher/) is used to match the user locale with supported app locales. + - [`@formatjs/intl-locale`](https://formatjs.io/docs/polyfills/intl-locale) is used as a polyfill for [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) if necessary. + - [`@formatjs/intl-pluralrules`](https://formatjs.io/docs/polyfills/intl-pluralrules) is used as a polyfill for [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) if necessary. These third party tools are complemented by Shopify specific tools to ease app development: -- [Shopify API library](https://github.com/Shopify/shopify-api-php) adds OAuth to the Laravel backend. This lets users install the app and grant scope permissions. -- [App Bridge React](https://shopify.dev/docs/tools/app-bridge/react-components) adds authentication to API requests in the frontend and renders components outside of the embedded App’s iFrame. -- [Polaris React](https://polaris.shopify.com/) is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants. -- [Custom hooks](https://github.com/Shopify/shopify-frontend-template-react/tree/main/hooks) make authenticated requests to the GraphQL Admin API. -- [File-based routing](https://github.com/Shopify/shopify-frontend-template-react/blob/main/Routes.jsx) makes creating new pages easier. -- [`@shopify/i18next-shopify`](https://github.com/Shopify/i18next-shopify) is a plugin for [`i18next`](https://www.i18next.com/) that allows translation files to follow the same JSON schema used by Shopify [app extensions](https://shopify.dev/docs/apps/checkout/best-practices/localizing-ui-extensions#how-it-works) and [themes](https://shopify.dev/docs/themes/architecture/locales/storefront-locale-files#usage). +- [Shopify API library](https://github.com/Shopify/shopify-api-php) adds OAuth to the Laravel backend. This lets users install the app and grant scope permissions. +- [App Bridge React](https://shopify.dev/docs/tools/app-bridge/react-components) adds authentication to API requests in the frontend and renders components outside of the embedded App’s iFrame. +- [Polaris React](https://polaris.shopify.com/) is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants. +- [Custom hooks](https://github.com/Shopify/shopify-frontend-template-react/tree/main/hooks) make authenticated requests to the GraphQL Admin API. +- [File-based routing](https://github.com/Shopify/shopify-frontend-template-react/blob/main/Routes.jsx) makes creating new pages easier. +- [`@shopify/i18next-shopify`](https://github.com/Shopify/i18next-shopify) is a plugin for [`i18next`](https://www.i18next.com/) that allows translation files to follow the same JSON schema used by Shopify [app extensions](https://shopify.dev/docs/apps/checkout/best-practices/localizing-ui-extensions#how-it-works) and [themes](https://shopify.dev/docs/themes/architecture/locales/storefront-locale-files#usage). ## Getting started @@ -272,7 +272,9 @@ To do that, you can [install the `cloudflared` CLI tool](https://developers.clou # Note that you can also use a different port cloudflared tunnel --url http://localhost:3000 ``` + In the output produced by `cloudflared tunnel` command, you will notice a https URL where the domain ends with `trycloudflare.com`. This is your tunnel URL. You need to copy this URL as you will need it in the next step. + ```shell 2022-11-11T19:57:55Z INF Requesting new quick Tunnel on trycloudflare.com... 2022-11-11T19:57:58Z INF +--------------------------------------------------------------------------------------------+ @@ -294,13 +296,14 @@ pnpm dev --tunnel-url https://randomly-generated-hostname.trycloudflare.com:3000 ## Developer resources -- [Introduction to Shopify apps](https://shopify.dev/docs/apps/getting-started) -- [App authentication](https://shopify.dev/docs/apps/auth) -- [Shopify CLI](https://shopify.dev/docs/apps/tools/cli) -- [Shopify API Library documentation](https://github.com/Shopify/shopify-api-php/tree/main/docs) -- [Getting started with internationalizing your app](https://shopify.dev/docs/apps/best-practices/internationalization/getting-started) - - [i18next](https://www.i18next.com/) - - [Configuration options](https://www.i18next.com/overview/configuration-options) - - [react-i18next](https://react.i18next.com/) - - [`useTranslation` hook](https://react.i18next.com/latest/usetranslation-hook) - - [`Trans` component usage with components array](https://react.i18next.com/latest/trans-component#alternative-usage-components-array) +- [Introduction to Shopify apps](https://shopify.dev/docs/apps/getting-started) +- [App authentication](https://shopify.dev/docs/apps/auth) +- [Shopify CLI](https://shopify.dev/docs/apps/tools/cli) +- [Shopify API Library documentation](https://github.com/Shopify/shopify-api-php/tree/main/docs) +- [Getting started with internationalizing your app](https://shopify.dev/docs/apps/best-practices/internationalization/getting-started) + - [i18next](https://www.i18next.com/) + - [Configuration options](https://www.i18next.com/overview/configuration-options) + - [react-i18next](https://react.i18next.com/) + - [`useTranslation` hook](https://react.i18next.com/latest/usetranslation-hook) + - [`Trans` component usage with components array](https://react.i18next.com/latest/trans-component#alternative-usage-components-array) + - [i18n-ally VS Code extension](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) diff --git a/web/app/Http/Kernel.php b/web/app/Http/Kernel.php index 7e87caa7a..707187c48 100644 --- a/web/app/Http/Kernel.php +++ b/web/app/Http/Kernel.php @@ -21,6 +21,7 @@ class Kernel extends HttpKernel \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, \App\Http\Middleware\TrimStrings::class, \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, + \App\Http\Middleware\AccessControlHeaders::class, ]; /** diff --git a/web/app/Http/Middleware/AccessControlHeaders.php b/web/app/Http/Middleware/AccessControlHeaders.php new file mode 100644 index 000000000..1c5ccd98e --- /dev/null +++ b/web/app/Http/Middleware/AccessControlHeaders.php @@ -0,0 +1,33 @@ +headers->set("Access-Control-Allow-Origin", "*"); + $response->headers->set("Access-Control-Allow-Header", "Authorization"); + $response->headers->set("Access-Control-Expose-Headers", 'X-Shopify-API-Request-Failure-Reauthorize-Url'); + + return $response; + } + } +} diff --git a/web/frontend b/web/frontend index 6d7567ba5..a77055f4e 160000 --- a/web/frontend +++ b/web/frontend @@ -1 +1 @@ -Subproject commit 6d7567ba545a5aed33bd8983896b369f9c84ad4b +Subproject commit a77055f4eb2525da985e0478dc4266cca7b0bddb diff --git a/web/shopify.web.toml b/web/shopify.web.toml index 447f0c2f5..e3dde81c8 100644 --- a/web/shopify.web.toml +++ b/web/shopify.web.toml @@ -1,4 +1,4 @@ -type="backend" +roles = ["backend"] [commands] dev = "composer serve"