https://github.com/lucatosc/e-commerce-react
React Ecommerce
https://github.com/lucatosc/e-commerce-react
ecommerce react shopify
Last synced: about 1 month ago
JSON representation
React Ecommerce
- Host: GitHub
- URL: https://github.com/lucatosc/e-commerce-react
- Owner: lucatosc
- License: mit
- Created: 2024-09-23T04:07:47.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-11-25T14:10:47.000Z (6 months ago)
- Last Synced: 2024-11-25T15:23:35.906Z (6 months ago)
- Topics: ecommerce, react, shopify
- Language: TypeScript
- Homepage: http://demo.vercel.store
- Size: 10.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
README
# Next.js Commerce
A high-perfomance, server-rendered Next.js App Router ecommerce application.
This template uses React Server Components, Server Actions, `Suspense`, `useOptimistic`, and more.
Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.
- Shopify (this repository)
> Note: Providers, if you are looking to use similar products for your demo, you can [download these assets]
## Integrations
Integrations enable upgraded or additional functionality for Next.js Commerce
- [Orama]
- Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
- Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
- [React Bricks]
- Edit pages, product details, and footer content visually using [React Bricks](https://www.reactbricks.com) visual headless CMS.
## Running locally
You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store.
1. Install Vercel CLI: `npm i -g vercel`
2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
3. Download your environment variables: `vercel env pull`
```bash
pnpm install
pnpm dev
```
Your app should now be running on [localhost:3000](http://localhost:3000/).
Expand if you work at Vercel and want to run locally and / or contribute
1. Run `vc link`.
1. Select the `Vercel Solutions` scope.
1. Connect to the existing `commerce-shopify` project.
1. Run `vc env pull` to get environment variables.
1. Run `pnpm dev` to ensure everything is working correctly.
## Vercel, Next.js Commerce, and Shopify Integration Guide
You can use this comprehensive [integration guide] with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.