Giter Club home page Giter Club logo

storefront's Introduction

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

Note You might also consider using proto for managing your pnpm and node versions across different projects. This repository has a configuration for proto.

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.

If you have any issues with setting up the app please refer to our FAQ

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

storefront's People

Contributors

krzysztofwolski avatar typeofweb avatar zaiste avatar witoszekdev avatar jwm0 avatar orzechdev avatar adrian-potepa avatar szczecha avatar timuric avatar irgenkini avatar peelar avatar 2can avatar lkostrowski avatar bmigirl avatar magul avatar mguldner avatar cloud11pl avatar lephuongbg avatar culy247 avatar chrislais avatar santoni0 avatar servindc avatar bandieramonte avatar karola312 avatar michalina-graczyk avatar mirekm avatar tennyzhuang avatar dr0er avatar huntr-helper avatar rodolfojcj avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.