Yes, you read right! I created an e-commerce (or e-shop) website without a single line of a back-end programming language.

In my professional life, I’m a front-end developer (I know back-end though).

Therefore, for my latest project, which was creating an e-commerce website,

I didn’t want to use my usual tools, as all of them involves back-end.

/!\ You can see it in action the website here.

What tools can be used to create an e-commerce website?

As a web developer that started with PHP, the tools I know to create e-shops are open-source CMS like: Magento, Prestashop & WooCommerce.

Problem: they involve back-end programming (which I want to avoid here).

There are alternative hosted platforms like: Shopify, SquareSpace & Wix.

Problem: Theming can sometimes be a pain if you add CSS & JS libraries.

I was wondering: is there some kind of API linked to a platform to handle this for me? That way, I could focus on the front-end (I wanted to use Vue).

That is how I came across Stripe Checkout and Stripe Orders.

Problem: Checkout was easy, but handling stock & other stuff was a hassle.

So what did I end up doing you may ask?

Completely randomly, I discovered Snipcart on Facebook

After some searching and some thinking, I was about to use Stripe because they had a good documentation. By luck, I fell on Snipcart while reading some Facebook posts on a dev group.

Enable e-commerce on a WordPress blog, an existing site, a SPA, a JAMstack project… anything!

- Sentence on Snipcart’s homepage

This sentence was full of promises and filled in the gaps I had.

In a nutshell, Snipcart has an SDK you add just like any other JS SDK or library. This SDK is linked to an ID of your Snipcart account where you can manage orders, products and other stuff (Shipping, taxes…!).

You only need 3 things to get running:

Sign up and add the SDK to your website. Their crawler must find product definitions on your pages

(not dynamically with JS, statically or dynamically from the server). Add some “add to cart” buttons wherever you want on your website!

I decided to make a SPA with Vue and host it on Firebase hosting (it’s free!).

There, I got my first problem. If I use a SPA, my products would not be rendered on page load, except if statically add my products in the markup.

From there, 3 options: Static HTML files, SSR or Prerendering.

I decided to go with prerendering using webpack prerender-spa-plugin.

For native JS : you can use any static site generator like Jekyll , Hugo …

: you can use any static site generator like , … For any JS SPA : you can use webpack prerender-spa-plugin .

: you can use webpack . For Vue, if you know Nuxt: you can use nuxt generate CLI command.

Okay, how do we setup a serveless, front-end-only e-commerce?

/!\ IMPORTANT, I used Vue for my project, but it works with any framework or even without a framewok.