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 (๐ซ๐ท)
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.
The project use the Stripe checkout component to handle payments.
You can create an account and get API keys on the Stripe developer page.
You will need to create a Sendinblue account and setup 2 emails template :
- Order completed (template id
1
) - Order shipped (template id
2
)
- 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!
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
.
- 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.
This app uses Vercel for deployment but you can deploy anywhere with the available adapters.