https://github.com/sergiop/datocms-snipcart-gatsby-shop-demo
https://github.com/sergiop/datocms-snipcart-gatsby-shop-demo
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/sergiop/datocms-snipcart-gatsby-shop-demo
- Owner: sergiop
- License: mit
- Created: 2020-05-26T13:03:19.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T12:09:40.000Z (almost 2 years ago)
- Last Synced: 2025-02-06T09:16:17.449Z (3 months ago)
- Language: CSS
- Size: 2.23 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Snipcart + Gatsby + DatoCMS example
This is a demo project to get you started with a static ecommerce site powered by [Gatsby](https://www.gatsbyjs.org/), [Snipcart](https://snipcart.com/) and [DatoCMS](https://www.datocms.com/).
It's a brutalist socks ecommerce site, that looks like this:
You can see how it looks live on this [demo installation](https://datocms-snipcart-gatsby-demo.netlify.com/).
All the details on how this works on the [related blog post](https://www.datocms.com/blog/static-ecommerce-website-snipcart-gatsbyjs-datocms).
## Deploy on DatoCMS
If you want to set up a live demo for yourself, just [sign up for a free DatoCMS account](https://dashboard.datocms.com/signup) and click this button:
[](https://dashboard.datocms.com/deploy?repo=datocms/snipcart-gatsby-demo)
## Usage
To run this project locally, install the dependencies of this project:
```
yarn install
```
Add an `.env` file containing the read-only API token of your DatoCMS site (set up with the demo button above):
```
echo 'DATO_API_TOKEN=abc123' >> .env
```
Then, to run this website in development mode (with live-reload):
```
yarn develop
```
To build the final, production ready static website:
```
yarn build
```
The final result will be saved in the `public` directory.
## Further demo options
This project is also available as a demo on [Gatsby Cloud](https://www.gatsbyjs.com/). This will allow you to test the [Gatsby preview](https://www.datocms.com/blog/live-preview-changes-on-gatsby-preview) capabilities in no time.