Giter VIP home page Giter VIP logo

storefront-remix-starter's Introduction

Vendure Remix Storefront Starter

An e-commerce storefront for Vendure built with Remix.

๐Ÿ‘‰ remix-storefront.vendure.io

Screenshot

To do

Most Vendure features are already part of this starter. Notable missing Vendure features:

  • Default billing/shipping addresses
  • Separate billing address in checkout
  • Promotions
  • Localization
  • Multi channel support

General things missing:

  • Global input validation
  • Sitemap generation
  • Metadata

Contributions welcome!

Development

  1. Clone this repo

  2. yarn install

  3. Create a .env file in the root dir with the following command and update it with your variables:

    cp .env.template .env
  4. yarn dev - run the storefront with a local Remix server

  5. yarn dev:cf - runs locally with the Cloudflare Pages configuration

Vendure Server

This storefront requires a Vendure V2 server. You can either run a local instance, or use our public demo server.
If you're looking for V1 support, 75eb880 is the last supported commit.

Code Generation

Whenever the Graphql documents (the constants using the gql tag) in the ./app/providers dir changes, you should run yarn generate to generate new sdk definitions.

For a more detailed guide on how to work with code generation, check the wiki about querying custom fields.

Local

You can set up a local instance, populated with test data by following the instructions in the Vendure Getting Started guide. Note that make sure you have enabled the bearer method for managing session tokens:

// vendure-config.ts
export const config: VendureConfig = {
  authOptions: {
    tokenMethod: ['bearer', 'cookie'], // or just 'bearer'
    // ...
  },
  // ...
};

Payment Gateways

Currently, both Stripe and Braintree are supported out of the box, but only one of them can be used at the same time

Stripe integration

This repo has a built-in Stripe payment integration. To enable it, ensure that your Vendure server is set up with the StripePlugin.

Ensure your new PaymentMethod uses the word stripe somewhere in its code, as that's how this integration will know to load the Stripe payment element.

Then add your Stripe publishable key to the env file:

STRIPE_PUBLISHABLE_KEY=pk_test_...

Important note: There's a race condition between Stripe redirecting a customer to the confirmation page and the webhook receiving the confirmation in the Vendure backend. As this condition is not very distinguishable from other potential issues, it is currently addressed by implementing a very simple retry system of 5 retries every 2.5s You can tweak these settings in the CheckoutConfirmation route.

Braintree integration

This repo has built-in Braintree integration. To enable it, ensure that your Vendure server is set up with the BraintreePlugin.

Currently, storeCustomersInBraintree has to be set to true in plugin options.

Public demo

There is a publicly-available demo instance at https://readonlydemo.vendure.io/shop-api

Deployment

This repo is configured to deploy to either Netlify or Cloudflare Pages or to build locally with specialised build targets (build(:nf/:cf)).

No special setup should be needed, as the remix.config.js file contains a check for the process.env.CF_PAGES / process.env.NETLIFY environment variable to determine whether to use the Cloudflare Pages or Netlify server configuration.

Follow the usual procedure for setting up a project in Netlify/CF Pages and point it to your clone of this repo on GitHub/Gitlab.

Be sure to change the cookie secret in app/sessions.ts for production use!

License

MIT

storefront-remix-starter's People

Contributors

michaelbromley avatar kyunal avatar jeancx avatar hendrikmennen avatar danielbiegler avatar flushbg avatar edorivai avatar chrislaai avatar colinasquith avatar keettechsol avatar mitch3s avatar thevalkdokk 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.