DEV Community

Building a Serverless JAMstack ECommerce Store with Gatsby & AWS Amplify

Nader Dabit on February 18, 2020

In this post, you will learn how to build a full stack serverless JAMstack ECommerce store using Gatsby, AWS Amplify and JAMstack ECommerce. Whi...

Read full post

Devang Hingu • Feb 18 '20

well explained..!! but why need to go through jamstack rather then magento, shopify or wordpress? because they already provide great few click installation & configuration. and it's very secure and popular framework.

Nader Dabit • Feb 18 '20

Good question, you can definitely use Shopify as the inventory provider via their API in the step where we create the Amplify inventory provider, the difference there is that you would not be able to have authorization rules on the client where users could sign up as admins and add / update / delete items.

Also, Magento, Wordpress , and shopify when using their site generators are not nearly as fast as JAMstack apps. Check out the live demo here to get an idea of the difference in speed and performance.

Devang Hingu • Feb 19 '20

Yeah, speed is awesome.!!

James Whiteman • Mar 26 '20

Another nice overview, thanks Nader.
S3 storage is giving me 403 when I try to build, I just gave the bucket the shotgun approach with the following

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket>/*"
        }
    ]
}

marksteven • May 21 '21

Hi Nader,
I am not sure if I am doing something wrong but cannot get past first base.
If I follow your step 1
git clone github.com/jamstack-cms/jamstack-e...

I do indeed get jamstack-ecommerce package

But looking in files and the package.json - pasted below
It appears to be a React rather than a Gatsby project?
Have I gone wrong from the start here or the Git moved somehow?
Thanks in advance Mark

{
"name": "jamstack-ecommerce",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.11.0",
"autoprefixer": "^10.1.0",
"next": "10.0.4",
"postcss": "^8.2.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-icons": "^4.1.0",
"react-toastify": "^6.2.0",
"tailwindcss": "^2.0.2",
"uuid": "^8.3.2"
}
}

Pablo Colqui • Apr 16 '20

I have some problems to login, first I sign up correctly, even I can see the confirmation in AWS Cognito. But when I try to login, nothing happens, not even console show me anything.

Someone has the same problem?

mathiasjose • Apr 6 '20

Hi Nader
Great tutorial - thanks!

My one question is what happens once the order is created

I see in src>pages>checkout.js line 114 that there's a comment to call API.

How would you go about putting all orders in the database in a new orders table and tying it to the user who created the order so that they can see their history for example.

Thanks again for the great tut

Ose M. Osamudiamen • May 26 '20

Very good article, Nader. well descriptive. Thanks.

Please, I have a couple of issues:

How do I control the site from reloading the whole application whenever there is any change in the code.
How do I solve this bug ? It generates when I try loading a picture in the application. an attachment can be seen for the error.

Unhandled Rejection (TypeError): aws_amplify_WEBPACK_IMPORTED_MODULE_9_.API.grapghql is not a function
_callee2$
localhost:8000/commons.js:281286:70
281283 | categories: categories.replace(/\s/g, "").split(',')
281284 | });
281285 | _context2.next = 6;

281286 | return aws_amplify_WEBPACK_IMPORTED_MODULE_9["API"].grapghql(Object(aws_amplifyWEBPACK_IMPORTED_MODULE_9["graphqlOperation"])(_graphql_mutationsWEBPACK_IMPORTED_MODULE_10_["createProduct"], {
| ^ 281287 | input: item
281288 | }));
281289 |

the source code error:
Unhandled Rejection (TypeError): aws_amplify_WEBPACK_IMPORTED_MODULE_9_.API.grapghql is not a function
_callee2$
src/components/formComponents/AddInventory.js:29
26 | // })
27 | // this.setState({ image: storageUrl })
28 | }

29 | addItem = async () => {
30 | const { name, brand, price, categories, image, description, currentInventory } = this.state
31 | if (!name || !brand || !price || !categories.length || !description || !currentInventory || !image) return
32 | // create the item in the database.

I also realize that when I try to update the code 'fetchImage' function in the file image.js as suggested, the images would not load up. but when I revert to its initial state it loads up.

Sorry I asked 3 questions in one, issue is, I am hurrying up to round up this task so I move on to integration of financial-payment solutions (stripe and others).

Thanks

Andre • Feb 18 '20

This is awesome! Thanks Nader!

ywroh • Aug 11 '20

Thank you. Based on the information you provided, I am currently creating an ecommerce site using aws, gatsby, etc. I'll show you when it's done!

José Donato • Feb 18 '20

this is amazing, awesome job, Nader!

Nader Dabit • Feb 18 '20

Thanks!!

José Donato • Feb 18 '20

I'm going to do some contributions to the project on github, is there any way i can contact you?

Rajat • Feb 19 '21

Is it a good practice to use @model, @searchable - basically amplify thing for production apps, isn't it more suited for a POC?

ywroh • Aug 18 '20

Currently in Korea, we are creating an ecommerce site using the information you provided. Thanks for the good info.

Emeka Michael • Sep 17 '20

Nice tutorial,
I will like to know the probable monthly cost of this set up if the site was launched in production and used for a small size online retail store.
Thanks.

Quang Tran • Jan 11 '21

The JAMstack uses Nextjs for now, any update or the other Github project that uses Gatsby?