An open-source storefront in React.js with Next.js. Built for Headless Commerce, using a modern stack with TypeScript, GraphQL, Apollo, and Tailwind CSS.

Overview

Nextjs Storefront

Next.js Storefront

Next.js Storefront: Your open-source frontend starter pack for building performant e-commerce experiences with Saleor.

Saleor Checkout: Extensible Next.js checkout application and payment integrations powered by Saleor API.

Motivation

🏎️ modern & fast: The project utilizes all the best practices for e-commerce, like SSR, ISR, and image optimization.

💳 integrated payments: Reduce the purchase friction by taking advantage of integrations with modern payment providers such as Adyen, Mollie or Stripe.

🛠️ easily customizable: TailwindCSS can be easily extended and tweaked, or completely replaced with your favorite CSS solution.

👌 works out-of-the-box: Pre-configured tools built with DX in mind.

Stack

  • Next.js
  • TypeScript
  • GraphQL with Apollo Client
  • Tailwind CSS
  • Turborepo
  • Saleor Checkout

Quickstart

Supercharge your development with our CLI tool and free developer account at Saleor Cloud. To download and install Saleor CLI, run the following command:

npm i -g @saleor/cli

Learn more about Saleor CLI

Set up your local storefront development environment by running the storefront create command with --demo attribute. It will create a fresh clone, install dependencies and create a Saleor instance in the Saleor Cloud. The backend will be set to the newly created Cloud instance.

saleor storefront create --demo

You can also spawn your local storefront development environment without using the --demo attribute. It will create a fresh clone and install dependencies. The default configuration uses the master staging environment of the Saleor Cloud as a backend.

saleor storefront create

Development

First install pnpm (an alternative to npm, focused on performance) globally:

npm install -g pnpm

Then install dependencies:

pnpm i

To start the servers, run:

pnpm dev

The command will boot up 4 applications running on different ports.

Read more about development in docs/development.md.

Payment gateways

Saleor App Checkout supports three configurable payment gateways:

Mollie

Adyen

Stripe

For further information, please go to docs/payment/index.md.

Deployment

Read Vercel deployment guide in docs/vercel.md

FAQ

Read FAQ in docs/faq.md

Comments
  • Issues with Cart Address Validation

    Issues with Cart Address Validation

    Summary

    Deployed a new saleor, dashboard and react-storefront container to my new site and spent some days configuring and understanding whats going on. Finally got past some build and configuration issues and now I can add items to the cart and its the checkout checkout process address validation that is broken. Here are my notes:

    1. Saving a Billing Address: Silently fails and clears out the form data
    2. The phone number has to have a + prefix in front of it, so for example +1206555555 and not 1206555555, or 206555555 or any other attempt at formatting that with out the +1 country code. No validation errors on screen, address clears,
    3. The form data in the network tab defaults the country to PL so I edited it in my fork to default to US.
    4. Despite changing the country code the backend continues to fail to validate the zip code -- it seems the form needs to collect the country_area field on the form which is the users state. I haven't tried adding this to see what the next issue might be, yet.

    As such I cannot get past adding the Billing address to the cart and the end user has no idea about why the address is clearing after each attempt, without debugging the application.

    Steps to reproduce

    Here is a demo, visit: https://mattscoinage.com/default-channel/en-US/products/test-stripe add the product to cart and attempt to start checkout.

    A link to a reproduction repository

    https://github.com/matteius/react-storefront

    What OS are you using?

    Linux

    Your next.config.js file

    This is the default next.config.js file

    `next.config.js`
    const withBundleAnalyzer = require("@next/bundle-analyzer")({
      enabled: process.env.ANALYZE === "true",
    });
    
    const apiURL = new URL(process.env.NEXT_PUBLIC_API_URI);
    const allowedImageDomains = process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS
      ? process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS.split(",")
      : [];
    const imageConversionFormats = process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS
      ? process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS.split(",")
      : [];
    
    module.exports = withBundleAnalyzer({
      reactStrictMode: true,
      swcMinify: true,
      images: {
        domains: [apiURL.hostname, ...allowedImageDomains],
        formats: imageConversionFormats,
      },
      async headers() {
        return [
          {
            source: "/(.*)",
            headers: [
              {
                key: "x-content-type-options",
                value: "nosniff",
              },
              { key: "x-xss-protection", value: "1" },
              { key: "x-frame-options", value: "DENY" },
              {
                key: "strict-transport-security",
                value: "max-age=31536000; includeSubDomains",
              },
            ],
          },
        ];
      },
      experimental: {
        reactRoot: true,
      },
    });
    
    

    Builds logs (or link to your logs)

    FROM docker.io/node:16
    WORKDIR /app
    RUN npm install -g [email protected]
    COPY . .
    RUN pnpm i
    
    ARG NEXT_PUBLIC_API_URI
    ARG NEXT_PUBLIC_DEFAULT_CHANNEL
    ARG NEXT_PUBLIC_VERCEL_URL
    
    ENV NEXT_PUBLIC_API_URI ${NEXT_PUBLIC_API_URI:-https://api.mattscoinage.com/graphql/}
    ENV NEXT_PUBLIC_DEFAULT_CHANNEL ${NEXT_PUBLIC_DEFAULT_CHANNEL:-default-channel}
    
    # export failed with this:
    # Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment
    # RUN pnpm run export
    
    # This is to prevent this error:
    #   http://mynewreactstorefront.example.com/_next/image?url=http%3A%2F%2Fmysaleorapi.example.com%2Fmedia%2Fproducts%2Fsaleordemoproduct_cl_boot07_1.png&w=828&q=75
    #   400 Bad Request
    #   data:text/plain,"url" parameter is not allowed
    # which seems to come from this Next.js source file:
    #  https://github.com/vercel/next.js/blob/canary/packages/next/server/image-optimizer.ts
    #if (!domains.includes(hrefParsed.hostname)) {
    #  res.statusCode = 400
    #  res.end('"url" parameter is not allowed')
    #  return { finished: true }
    #}
    # RUN sed -i 's/"img.youtube.com"/"img.youtube.com", "mysaleorapi.example.com"/g' next.config.js
    
    # Then as an alternative to the failed "pnpm run export" attempt, we will directly
    # run the Node application in production mode, exposing its default port 3000.
    # see https://nextjs.org/docs/api-reference/cli#production
    # see https://github.com/saleor/react-storefront/issues/84#issuecomment-966874104
    expose 3010
    RUN pnpm run build
    CMD PORT=3010 pnpm run start
    

    Function logs

    No response

    Stale 
    opened by matteius 22
  • `npm i` failed to install modules - looks like Python version incompatibility.

    `npm i` failed to install modules - looks like Python version incompatibility.

    Summary

    npm i failed to install modules with the following ERROR messages:

    npm WARN EBADENGINE Unsupported engine {
    npm WARN EBADENGINE   package: '[email protected]',
    npm WARN EBADENGINE   required: { node: '>=12 <15' },
    npm WARN EBADENGINE   current: { node: 'v16.15.0', npm: '8.10.0' }
    npm WARN EBADENGINE }
    npm WARN deprecated @types/[email protected]: This is a stub types definition. schema-utils provides its own type definitions, so you do not need this installed.
    npm WARN deprecated @types/[email protected]: This is a stub types definition. react-svg provides its own type definitions, so you don't need this installed.
    npm WARN deprecated @types/[email protected]: This is a stub types definition. nuka-carousel provides its own type definitions, so you do not need this installed.
    npm WARN deprecated @types/[email protected]: This is a stub types definition. graphql provides its own type definitions, so you do not need this installed.
    npm WARN deprecated @types/[email protected]: This is a stub types definition. dotenv provides its own type definitions, so you do not need this installed.
    npm WARN deprecated @types/[email protected]: This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.
    npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
    npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
    npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
    npm WARN deprecated [email protected]: this library is no longer supported
    npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
    npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
    npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
    npm WARN deprecated [email protected]: use String.prototype.padStart()
    npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
    npm WARN deprecated [email protected]: this package has been renamed to babel-plugin-formatjs
    npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
    npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
    npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
    npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
    npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
    npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
    npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
    npm WARN deprecated [email protected]: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
    npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
    npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
    npm WARN deprecated [email protected]: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
    npm WARN deprecated [email protected]: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
    npm WARN deprecated [email protected]: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
    npm WARN deprecated @formatjs/[email protected]: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
    npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
    npm WARN deprecated @sentry/[email protected]: Please migrate to @sentry/tracing; see: https://www.npmjs.com/package/@sentry/apm
    npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
    npm WARN deprecated [email protected]: [email protected]<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
    npm WARN deprecated [email protected]: [email protected]<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
    npm ERR! code 1
    npm ERR! path ....../node_modules/node-sass
    npm ERR! command failed
    npm ERR! command sh -c node scripts/build.js
    npm ERR! Building: /opt/node-v16.15.0-linux-x64/bin/node ....../node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
    npm ERR! gyp info it worked if it ends with ok
    npm ERR! gyp verb cli [
    npm ERR! gyp verb cli   '/opt/node-v16.15.0-linux-x64/bin/node',
    npm ERR! gyp verb cli   '....../node_modules/node-gyp/bin/node-gyp.js',
    npm ERR! gyp verb cli   'rebuild',
    npm ERR! gyp verb cli   '--verbose',
    npm ERR! gyp verb cli   '--libsass_ext=',
    npm ERR! gyp verb cli   '--libsass_cflags=',
    npm ERR! gyp verb cli   '--libsass_ldflags=',
    npm ERR! gyp verb cli   '--libsass_library='
    npm ERR! gyp verb cli ]
    npm ERR! gyp info using [email protected]
    npm ERR! gyp info using [email protected] | linux | x64
    npm ERR! gyp verb command rebuild []
    npm ERR! gyp verb command clean []
    npm ERR! gyp verb clean removing "build" directory
    npm ERR! gyp verb command configure []
    npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
    npm ERR! gyp verb `which` failed Error: not found: python2
    npm ERR! gyp verb `which` failed     at getNotFoundError (....../node_modules/node-gyp/node_modules/which/which.js:13:12)
    npm ERR! gyp verb `which` failed     at F (....../node_modules/node-gyp/node_modules/which/which.js:68:19)
    npm ERR! gyp verb `which` failed     at E (....../node_modules/node-gyp/node_modules/which/which.js:80:29)
    npm ERR! gyp verb `which` failed     at ....../node_modules/node-gyp/node_modules/which/which.js:89:16
    npm ERR! gyp verb `which` failed     at ....../node_modules/isexe/index.js:42:5
    npm ERR! gyp verb `which` failed     at ....../node_modules/isexe/mode.js:8:5
    npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
    npm ERR! gyp verb `which` failed  python2 Error: not found: python2
    npm ERR! gyp verb `which` failed     at getNotFoundError (....../node_modules/node-gyp/node_modules/which/which.js:13:12)
    npm ERR! gyp verb `which` failed     at F (....../node_modules/node-gyp/node_modules/which/which.js:68:19)
    npm ERR! gyp verb `which` failed     at E (....../node_modules/node-gyp/node_modules/which/which.js:80:29)
    npm ERR! gyp verb `which` failed     at ....../node_modules/node-gyp/node_modules/which/which.js:89:16
    npm ERR! gyp verb `which` failed     at ....../node_modules/isexe/index.js:42:5
    npm ERR! gyp verb `which` failed     at ....../node_modules/isexe/mode.js:8:5
    npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
    npm ERR! gyp verb `which` failed   code: 'ENOENT'
    npm ERR! gyp verb `which` failed }
    npm ERR! gyp verb check python checking for Python executable "python" in the PATH
    npm ERR! gyp verb `which` succeeded python /usr/bin/python
    npm ERR! gyp ERR! configure error 
    npm ERR! gyp ERR! stack Error: Command failed: /usr/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
    npm ERR! gyp ERR! stack   File "<string>", line 1
    npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
    npm ERR! gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
    npm ERR! gyp ERR! stack 
    npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:398:12)
    npm ERR! gyp
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     ~/.npm/_logs/2022-05-27T08_59_27_883Z-debug-0.log
    

    Steps to reproduce

    I actually followed https://github.com/saleor/saleor-storefront/blob/main/README.md

    ➜  git clone https://github.com/mirumee/saleor-storefront.git
    ➜  cd saleor-storefront
    ➜  npm i
    

    3 setups bring the above ERROR messages.

    A link to a reproduction repository

    https://github.com/saleor/react-storefront

    What OS are you using?

    Linux

    Your next.config.js file

    `next.config.js`
    # Paste content of your `next.config.js` file here. Check there is no private info in there.
    const withPlugins = require("next-compose-plugins");
    const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
    const withOptimizedImages = require("next-optimized-images");
    const withTM = require("next-transpile-modules")(["register-service-worker"]);
    
    const withServiceWorkerConfig = require("./config/next/config.serviceWorker");
    const withBaseConfig = require("./config/next/config.base");
    const withDevConfig = require("./config/next/config.dev");
    const withProdConfig = require("./config/next/config.prod");
    
    module.exports = withPlugins(
      [
        [withOptimizedImages, { handleImages: ["jpeg", "png", "webp", "gif"] }],
        withTM,
        withBaseConfig,
        withServiceWorkerConfig,
        [withDevConfig, {}, [PHASE_DEVELOPMENT_SERVER]],
        [withProdConfig, {}, ["!" + PHASE_DEVELOPMENT_SERVER]],
      ],
      {
        async headers() {
          return [
            {
              source: "/(.*)",
              headers: [
                {
                  key: "x-content-type-options",
                  value: "nosniff",
                },
                { key: "x-xss-protection", value: "1" },
                { key: "x-frame-options", value: "DENY" },
                {
                  key: "strict-transport-security",
                  value: "max-age=31536000; includeSubDomains",
                },
              ],
            },
          ];
        },
      }
    );
    

    Builds logs (or link to your logs)

    Build logs
    # Paste logs here
    

    Please refer to pastebin

    Function logs

    Function logs
    # Paste logs here
    N/A
    
    opened by jiapei100 17
  • Unable to configure payment gateway

    Unable to configure payment gateway

    Summary

    hello sir, I host and pass nginx proxy react-storefront:3000 and saleor-app-checkout:3001 on two different subdomain respectively. Both are working but in a saleor-dashboard i am unable to configure payment gateway. Getting an error dashboard.5d80776fede891bce276.js?be297ff5ee0ee0bed80e:7728 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://saleor-app-checkout.lan') does not match the recipient window's origin ('https://saleor-dashboard.lan').

    Versions: dashboard v3.7.9 core v3.7.22 saleor-Screenshot_2022-10-20_21-14-28

    Steps to reproduce

    1. Go to "dashboard v3.7.9"
    2. Click On "Apps"
    3. Click On "Third Party Apps"
    4. Check On Installed payment "Checkout" app
    5. Check the errors in a browser console as shown in figure above

    A link to a reproduction repository

    https://github.com/saleor/saleor-dashboard

    Output from envinfo

    System:

    • OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    • CPU: (4) arm64 Neoverse-N1
    • Memory: 21.39 GB / 23.43 GB
    • Container: Yes
    • Shell: 5.0.17 - /bin/bash

    Binaries:

    • Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    • npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
    • pnpm 7.13.4
    opened by ashishkpaul 15
  • `pnpm build` fails with the `react-storefront` sources of commit `ca66031ba017d1839f4653deef00830052d01f8e`

    `pnpm build` fails with the `react-storefront` sources of commit `ca66031ba017d1839f4653deef00830052d01f8e`

    Summary

    When running the command pnpm build I'm receiving a failure that shows this output at the end:

    storefront:build: 
    storefront:build: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
    storefront:build: ○  (Static)  automatically rendered as static HTML (uses no initial props)
    storefront:build: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
    storefront:build: 
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./pages/_document.tsx
    saleor-app-checkout:build: 15:11  Warning: `styled-jsx` should not be used in `pages/_document.js`. See: https://nextjs.org/docs/messages/no-styled-jsx-in-document  @next/next/no-styled-jsx-in-document
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./frontend/components/elements/AppProvider/AppProvider.tsx
    saleor-app-checkout:build: 46:6  Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
    saleor-app-checkout:build: 
    saleor-app-checkout:build: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
    saleor-app-checkout:build: info  - Creating an optimized production build...
    saleor-app-checkout:build: info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
    saleor-app-checkout:build: info  - Using external babel configuration from /root/react-storefront/apps/saleor-app-checkout/.babelrc
    saleor-app-checkout:build: [BABEL] Note: The code generator has deoptimised the styling of /root/react-storefront/apps/saleor-app-checkout/graphql/index.ts as it exceeds the max of 500KB.
    saleor-app-checkout:build: [BABEL] Note: The code generator has deoptimised the styling of /root/react-storefront/apps/saleor-app-checkout/graphql/index.ts as it exceeds the max of 500KB.
    saleor-app-checkout:build: Failed to compile.
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
    saleor-app-checkout:build: Module not found: ESM packages (graphql/language/visitor.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
    saleor-app-checkout:build: 
    saleor-app-checkout:build: Import trace for requested module:
    saleor-app-checkout:build: ./pages/checkout-spa.tsx
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
    saleor-app-checkout:build: Module not found: ESM packages (graphql/language/kinds.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
    saleor-app-checkout:build: 
    saleor-app-checkout:build: Import trace for requested module:
    saleor-app-checkout:build: ./pages/checkout-spa.tsx
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
    saleor-app-checkout:build: Module not found: ESM packages (graphql/language/printer.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
    saleor-app-checkout:build: 
    saleor-app-checkout:build: Import trace for requested module:
    saleor-app-checkout:build: ./pages/checkout-spa.tsx
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
    saleor-app-checkout:build: Module not found: ESM packages (graphql/error/GraphQLError.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
    saleor-app-checkout:build: 
    saleor-app-checkout:build: Import trace for requested module:
    saleor-app-checkout:build: ./pages/checkout-spa.tsx
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
    saleor-app-checkout:build: Module not found: ESM packages (graphql/language/parser.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
    saleor-app-checkout:build: 
    saleor-app-checkout:build: Import trace for requested module:
    saleor-app-checkout:build: ./pages/checkout-spa.tsx
    saleor-app-checkout:build: 
    saleor-app-checkout:build: 
    saleor-app-checkout:build: > Build failed because of webpack errors
    saleor-app-checkout:build:  ELIFECYCLE  Command failed with exit code 1.
    saleor-app-checkout:build: ERROR: command finished with error: command (apps/saleor-app-checkout) pnpm run build exited (1)
    command (apps/saleor-app-checkout) pnpm run build exited (1)
    

    My system runs with these elements:

    • Debian 11
    • node v18.7.0
    • pnpm 7.9.3
    • As said before, the react-storefront commit ID is ca66031ba017d1839f4653deef00830052d01f8e

    Steps to reproduce

    1. Checkout the react-storefront repository.
    2. Edit its .env file as needed.
    3. Install the dependencies with the pnpm i command.
    4. Run the pnpm build command inside the react-storefront directory.

    A link to a reproduction repository

    No response

    Output from envinfo

    No response

    bug checkout-storefront 
    opened by rodolfojcj 13
  • Authentication not Persisting

    Authentication not Persisting

    When I try to run this locally, Authentication doesn't seem to persist tab refresh.

    Here's a screengrab showing the error- image

    It seems like authentication is not getting saved via the login api.

    Stale 
    opened by xydac 11
  • Decide the future of `material-ui`

    Decide the future of `material-ui`

    Currently we're using material-ui packages in packages/checkout-storefront. There are a few concerns:

    • We're on version 4 which is not longer developed
    • material-ui 4 forces us to use getInitialProps in Next.js which results in poor performance and limits our abilities to optimize

    We should either upgrade to material-ui 5 (renamed to @mui/material) or drop it completely and replace with something else (what?).

    saleor-app-checkout dependencies 
    opened by mmiszy 7
  • Background image no longer available in PageHero

    Background image no longer available in PageHero

    Summary

    I was relying on the BackgroundImage in the PagerHero which was on the collection entity, but that has been removed from the component, and removed from the outer scope -- so how is one supposed to get the PageHero background image back without a bunch of work? Also the new sub categories in the PageHero seem not great and were way better in the menus. It is disappointing the PRs that are getting merged with no description, because it make the direction of this project and the chosen changed totally unclear. Seems every week the UI heads in some random new direction.

    Steps to reproduce

    Merge main branch into a fork that styles the site and watch for breaking changes and weird directions to head in.

    A link to a reproduction repository

    No response

    What OS are you using?

    No response

    Your next.config.js file

    n/a

    Builds logs (or link to your logs)

    n/a

    Function logs

    n/a

    opened by matteius 7
  • ESlint typescript errors trying to build saleor-app-checkout

    ESlint typescript errors trying to build saleor-app-checkout

    Summary

    Running pnpm run build:saleor-app-checkout at the root checkout of latest react-storefront canary branch yields typescript errors -- I tried this the other day too with the same result. Note: I am about to run the storefront but there is no/cart or checkout anymore without this app I believe, and it keeps giving me the same ESlint errors:

    ...
    saleor-app-checkout:build: > [email protected] build /home/matteius/react-storefront/apps/saleor-app-checkout
    saleor-app-checkout:build: > pnpm run i18n && next lint --dir . --quiet && npm run i18n && next build
    saleor-app-checkout:build: 
    saleor-app-checkout:build: 
    saleor-app-checkout:build: > [email protected] i18n /home/matteius/react-storefront/apps/saleor-app-checkout
    saleor-app-checkout:build: > pnpm run i18n:extract && pnpm run i18n:compile
    saleor-app-checkout:build: 
    saleor-app-checkout:build: 
    saleor-app-checkout:build: > [email protected] i18n:extract /home/matteius/react-storefront/apps/saleor-app-checkout
    saleor-app-checkout:build: > formatjs extract '{backend,config,content,frontend,graphql,pages,types,utils}/**/*.{js,jsx,ts,tsx}' --format transifex --id-interpolation-pattern '[folder]/[name]/[sha512:contenthash:base64:6]' --out-file content/locales/en.json
    saleor-app-checkout:build: 
    saleor-app-checkout:build: 
    saleor-app-checkout:build: > [email protected] i18n:compile /home/matteius/react-storefront/apps/saleor-app-checkout
    saleor-app-checkout:build: > formatjs compile-folder --ast --format transifex content/locales content/compiled-locales
    saleor-app-checkout:build: 
    saleor-app-checkout:build: info  - Loaded env from /home/matteius/react-storefront/apps/saleor-app-checkout/.env
    saleor-app-checkout:build: warn  - You have enabled experimental features (esmExternals, externalDir) in next.config.js.
    saleor-app-checkout:build: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
    saleor-app-checkout:build: 
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./backend/payments/createOrderFromBody.ts
    saleor-app-checkout:build: 11:36  Error: Unsafe argument of type `any` assigned to a parameter of type `string`.  @typescript-eslint/no-unsafe-argument
    saleor-app-checkout:build: 11:53  Error: Unsafe argument of type `any` assigned to a parameter of type `number`.  @typescript-eslint/no-unsafe-argument
    saleor-app-checkout:build: 19:40  Error: Unsafe argument of type `any` assigned to a parameter of type `string`.  @typescript-eslint/no-unsafe-argument
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./backend/payments/errors.ts
    saleor-app-checkout:build: 7:37  Error: Invalid type "PaymentProviderID" of template literal expression.  @typescript-eslint/restrict-template-expressions
    saleor-app-checkout:build: 14:31  Error: Invalid type "PaymentProviderID" of template literal expression.  @typescript-eslint/restrict-template-expressions
    saleor-app-checkout:build: 25:31  Error: Invalid type "PaymentProviderID" of template literal expression.  @typescript-eslint/restrict-template-expressions
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./backend/payments/providers/adyen/middlewares.ts
    saleor-app-checkout:build: 33:19  Error: Unsafe argument of type `any` assigned to a parameter of type `string`.  @typescript-eslint/no-unsafe-argument
    saleor-app-checkout:build: 34:67  Error: Invalid type "any" of template literal expression.  @typescript-eslint/restrict-template-expressions
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./backend/payments/providers/stripe/verifySession.ts
    saleor-app-checkout:build: 58:7  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./backend/payments/providers/stripe/webhookHandler.ts
    saleor-app-checkout:build: 120:10  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./frontend/components/templates/PaymentProviderDetails/PaymentProviderDetails.tsx
    saleor-app-checkout:build: 49:5  Error: Unsafe argument of type `any` assigned to a parameter of type `Iterable<readonly [PropertyKey, any]>`.  @typescript-eslint/no-unsafe-argument
    saleor-app-checkout:build: 49:5  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
    saleor-app-checkout:build: 60:15  Error: Unsafe argument of type `any` assigned to a parameter of type `{ [k: string]: any; } | { [x: string]: any; } | ResetAction<{ [k: string]: any; }> | undefined`.  @typescript-eslint/no-unsafe-argument
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./frontend/components/templates/PaymentProviderDetails/data.ts
    saleor-app-checkout:build: 6:3  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
    saleor-app-checkout:build: 17:29  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
    saleor-app-checkout:build: 18:26  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./pages/api/drop-in/adyen/payments/index.ts
    saleor-app-checkout:build: 32:72  Error: Invalid type "any" of template literal expression.  @typescript-eslint/restrict-template-expressions
    saleor-app-checkout:build: 
    saleor-app-checkout:build: ./pages/api/drop-in/adyen/sessions.ts
    saleor-app-checkout:build: 29:69  Error: Unsafe argument of type `any` assigned to a parameter of type `{ currency: string; totalAmount: number; checkoutId: string; redirectUrl: string; }`.  @typescript-eslint/no-unsafe-argument
    saleor-app-checkout:build: 
    saleor-app-checkout:build: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
    saleor-app-checkout:build:  ELIFECYCLE  Command failed with exit code 1.
    saleor-app-checkout:build: ERROR: command finished with error: command (/home/matteius/react-storefront/apps/saleor-app-checkout) pnpm run build exited (1)
    command (/home/matteius/react-storefront/apps/saleor-app-checkout) pnpm run build exited (1)
    
     Tasks:    3 successful, 4 total
    Cached:    3 cached, 4 total
      Time:    7.469s 
    
     ERROR  run failed: command  exited (1)
     ELIFECYCLE  Command failed with exit code 1.
     ELIFECYCLE  Command failed with exit code 1.
    

    Steps to reproduce

    git clone https://github.com/saleor/react-storefront.git cd react-storefront

    Setup .env

    run pnpm run build:saleor-app-checkout

    A link to a reproduction repository

    No response

    Output from envinfo

    ## System:
     - OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
     - CPU: (2) x64 AMD Ryzen 9 5900HS with Radeon Graphics
     - Memory: 3.84 GB / 5.67 GB
     - Container: Yes
     - Shell: 5.1.16 - /bin/bash
    ## Binaries:
     - Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
     - npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
    ## Browsers:
     - Firefox: 106.0
    
    [email protected]:~/react-storefront$ pnpm --version
    7.13.5
    
    opened by matteius 6
  • add: dummy payment provider

    add: dummy payment provider

    Features:

    • pages/api/dummy-pay.ts - API endpoint for dummy payment (creates a transaction)
    • integrating the new payment method dummy into the existing structure (e.g. pages/api/pay.ts)
    • added checkout-storefront/src/views/DummyPayment.tsx view with a simple form that lets you pay either the entirety or a fraction of the order's total price
    • added the Views component in Root.tsx, as there are now three views that can be displayed: Checkout, OrderConfirmation, and DummyPayment. DummyPayment's URL is: host/checkout?order=:orderId&dummyPayment=true.

    Media:

    https://user-images.githubusercontent.com/44495184/193268382-4796058f-7378-4f9f-996a-3f5ccb047aca.mov

    Questions:

    1. How do we restrict access to the dummy payment provider? Currently, it's turned on by default. Should we add an env var like IS_DUMMY_PROVIDER_ON set to false by default?
    opened by peelar 6
  • Add vercel.json files to storefront and app-checkout packages

    Add vercel.json files to storefront and app-checkout packages

    This points Vercel to explicitly set Next as framework in deployment context

    Why this is needed

    Deploy button api can't specify framework nor output directory settings. In monorepo, when react-storefront is being spawned, Next creates deployment with framework "Other" which is probably a bug.

    It was reported to Vercel, but this local fix is transparent and fixes the problems

    It will also be needed to close https://github.com/saleor/react-storefront/issues/466

    opened by lkostrowski 6
  • Error message in dashboard:

    Error message in dashboard: "Something went wrong: Unauthenticated"

    Hi,

    I tried to set up the checkout and checkout-app according to the deployment manual in README. However, I can't load or save settings in checkout-app (in dashboard).

    The error message like this is quite useless. I have tried to reinstall the app, generate fresh authToken, redeploy both of vercel apps, to no avail.

    What is actually wrong, and what can I do to fix it? What is unauthenticated?

    Thank you!

    EDIT: I can see multiple requests in browser console:

    GET https://saleor-checkout-app.vercel.app/api/payment-provider-settings
    HTTP/401 Unauthenticated
    {"error":{"message":"Unauthenticated"}}
    
    POST https://saleor-checkout-app.vercel.app/api/set-payment-provider-settings
    HTTP/401 Unauthenticated
    {"error":{"message":"Unauthenticated"}}
    
    saleor-app-checkout 
    opened by gleniat 6
  • ERROR error: unknown option `initial-branch'

    ERROR error: unknown option `initial-branch'

    Summary

    ⠇ Setting up the Git repository... ERROR error: unknown option `initial-branch' usage: git init [-q | --quiet] [--bare] [--template=] [--shared[=]] []

    --template <template-directory>
                          directory from which templates will be used
    --bare                create a bare repository
    --shared[=<permissions>]
                          specify that the git repository is to be shared amongst several users
    -q, --quiet           be quiet
    --separate-git-dir <gitdir>
                          separate git dir from working tree
    --object-format <hash>
                          specify the hash algorithm to use
    

    If you think this is a bug, report it on GitHub: https://github.com/saleor/saleor-cli/issues

    CLI Docs: https://docs.saleor.io/docs/3.x/cli

    Steps to reproduce

    saleor storefront create front

    A link to a reproduction repository

    No response

    Output from envinfo

    No response

    opened by fenghuilee 1
  • robots.txt contains hard-coded values

    robots.txt contains hard-coded values

    Summary

    The robots.txt file contains hard-coded value with https://localhost:3001 which is invalid if the deployment is not local and if the local deployment doesn't support HTTPS.

    File: https://github.com/saleor/react-storefront/blob/6f00e6bc0f1d3f71d3cfe37f1b2ccec2eb2aa4d2/apps/storefront/public/robots.txt#L11-L14

    Steps to reproduce

    1. Build the app with a different domain
    2. Go to /robots.txt
    3. It should point to the wrong domain than the actual one

    A link to a reproduction repository

    No response

    Output from envinfo

    No response

    opened by NyanKiyoshi 0
  • Remove saleor sdk from checkout

    Remove saleor sdk from checkout

    Since Saleor SDK is no longer maintained we need to remove it altogether from checkout. We already have following stuff replaced: passwordResetRequest, passwordReset and userRegister. We need to implement the login flow because currently we're using: login, logout and authState with user and authenticating props. That'll also allow us to remove anything connected to apollo client.

    maintenance 
    opened by bmigirl 0
  • Redo the register flow

    Redo the register flow

    Currently the register flow is sitting within the login / register / guest user sections but it's submission happens on checkout "pay" click. The flow is weird and difficult to both code and figure out a proper UX for it so we decided to change it's flow to a more "normal" one. New desings in figma

    checkout-storefront 
    opened by bmigirl 0
Releases(1.0.0)
Owner
Saleor Commerce
The commerce API that puts developers first.
Saleor Commerce
A GraphQL-powered, PWA, single-page application storefront for Saleor

Saleor Storefront Note: This project is a demonstration on how Saleor can be used. It’s not ready to be a starter but rather show how different cases

null 1 Apr 26, 2022
Payload - A free and open-source TypeScript headless CMS & application framework built with Express, MongoDB and React.

Payload A free and open-source TypeScript headless CMS & application framework built with Express, MongoDB and React. Features Completely free and ope

null 2 Aug 28, 2022
Most advanced open-source Headless CMS built in NodeJS and React. Written in Typescript!

Burdy The most powerful and flexible open-source headless cms. We took the inspiration from WordPress plugin system (hooks and actions) and have built

Burdy.io 221 Dec 16, 2022
Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engine built with RESTful API to be built with GRAPHQL API with Apollo Server.

21_MERN_GoogleBookSearchEngine Task Refactoring a MERN stack react based front end starter code with a fully functioning Google Books API search engin

Dionne Noella 5 Apr 9, 2022
BlogPrism : A Website for modern blogs. Built with React, Tailwind CSS, moment , SASS and GraphQL .

BlogPrism ?? ?? An Online Platform for Modern Blogs About the project: I have built the BlogPrism in order to learn State Management in React, Tailwin

Riya Roy 9 Nov 15, 2022
A beautiful NextJS storefront for a Medusa store (The opensource alternative to Shopify)

medusa-starter-monster About Participants Yinka - @yinkakun Description Medusa Storefronts don't have to be boring. This starter is an elegant and bea

Yinka Adedire 13 Jan 2, 2023
👜 Next-gen e-commerce built using Remix, Chakra UI, GraphQL and web3

?? Future Store Here at New Store, we have the best in women's, men's, bags, shoes, accessories and more. Unmissable discounts and installments. Buy a

Matheus Trindade 16 Dec 26, 2022
Sheliak - an open-source self-managed Single-Sign-On application services that is built using Django, React, and GraphQL

Sheliak - an open-source self-managed Single-Sign-On application services that is built using Django, React, and GraphQL

Lyrid Inc. 2 Mar 21, 2022
🍕 Uber Eats Clone with React, Typescript, NodeJS, NestJS, Apollo, GraphQL, PostgreSQL, TypeORM

?? Uber Eats Clone with React, Typescript, NodeJS, NestJS, Apollo, GraphQL, PostgreSQL, TypeORM

GW 6 Dec 25, 2022
Hacker News - This project was created using Vite, React, GraphQL and Apollo Client.

Hacker News A application to get your favorites links made using Apollo Client In Progress ?? Table of contents Table of contents ?? About ?? Techs ??

Brenda Profiro 5 Jun 29, 2022
MediaCMS is a modern, fully featured open source video and media CMS, written in Python/Django and React, featuring a REST API.

MediaCMS is a modern, fully featured open source video and media CMS. It is developed to meet the needs of modern web platforms for viewing and sharing media. It can be used to build a small to medium video and media portal within minutes.

MediaCMS 1.2k Jan 3, 2023
Full Stack TikTok Clone with REACT.JS! (Next.js, Tailwind CSS, Video Uploading, Google Authentication, Tik-Tok Profile)

TikTok Clone with REACT.JS! Full Stack TikTok Clone with REACT.JS! (Next.js, Tailwind CSS, Video Uploading, Google Authentication, Tik-Tok Profile) Vi

Sashen Jayathilaka 36 Jan 1, 2023
📷 Instagram Clone with React, React Native, NodeJS, Apollo, GraphQL, PostgreSQL, Prisma

?? Instagram Clone with React, React Native, NodeJS, Apollo, GraphQL, PostgreSQL, Prisma

GW 5 Jun 15, 2022
GraphQL Subscription with Golang/React JS & React Apollo Client Subscription

Golang-gqlgen-Reactjs-subscription-demo You can find step by step guide for Golang Part 1 here And React Part 2 here to understand this demo properly.

Yukio Tanaka 6 Oct 1, 2022
A starter for building a GRANDstack (GraphQL, React, Apollo, Neo4j Database) application

GRANDstack Starter npx create-grandstack-app myNewApp This project is a starter

Kumar 0 Dec 26, 2021
This is the sample project that belongs to the React & Apollo Tutorial on How to GraphQL

React & Apollo Tutorial This is the sample project that belongs to the React & Apollo Tutorial on How to GraphQL. How to use 1. Clone repository git c

Ivan Kuznietsov 3 Feb 14, 2022
A Book Search Engine that has been converted from RESTful APIs to a GraphQL API which uses the Apollo Server.

Book Search Engine This is a Book Search Engine that has been converted from RESTful APIs to a GraphQL API which uses the Apollo Server. This applicat

null 1 Feb 26, 2022
Blogfolio is a open-source blog starter built with Nextjs and Tailwind

October 2022: I am releasing a new verssion which allows user to create multiple blog posts. The previous version Nextjs Notion Blog Starter is still

Tuan Phung 95 Jan 6, 2023
it is a React application which uses SpaceX open source graphql APIs

spaceX-mini-project it is a React application which uses SpaceX open source graphql APIs

Abduallah-Barmu 1 Nov 5, 2021