tlenclos / remix-shop

Simple ecommerce website built with Remix

Welcome to Remix Shop!

• Live example
• Remix Docs

This is a template to start a small Ecommerce website with Remix, Hygraph and Stripe.

You can read more about it on our website TODO LINK (🇫🇷)

⚠️ This project is given as an example, some choices were made and might be specific to the website we built.

External services

Hygraph

You will need to create a Hygraph account and project. This is a data CMS with a full GraphQL API.

A Hygraph project is available here and you can start by cloning it.

Stripe

The project use the Stripe checkout component to handle payments.

You can create an account and get API keys on the Stripe developer page.

Sendinblue

You will need to create a Sendinblue account and setup 2 emails template :

• Order completed (template id 1)
• Order shipped (template id 2)

Development

• Copy .env.dist file and fill necessary env variables.
• Install dependencies.

yarn install

• Update schema url in codegen.yml , .graphqlrc.yml & api.ts with Hygraph Content API and run `yarn codegen

• Afterwards, start the Remix development server like so:

yarn run dev

Open up http://localhost:3000 and you should be ready to go!

Schema / database evolutions

Once you have modifications to the schema on Hygraph, you can generate the API client again with yarn codegen.

If you plan to do a lot of modifications, we advise to run these 2 commands in parallel yarn codegen --watch and yarn tsc --watch.

Webhooks

• To debug webhooks start ngrok with

ngrok http 3000

• Update Hygraph url on the webhook settings page.
• Create Stripe webhook url here to get return data from checkout.

Deployment

This app uses Vercel for deployment but you can deploy anywhere with the available adapters.