DEV Community

Cover image for 1. Initial setup - Create a Commerce.js store with Svelte
Jamie Barton for Commerce.js

Posted on

1 4

1. Initial setup - Create a Commerce.js store with Svelte

Svelte describes itself as a radical new approach to building UIs. Svelte takes a unique approach of moving the heavy-lifting from the browser to the compiler at build time.

Svelte doesn't rely on a virtual DOM, but instead is intelligent at writing code to update the actual DOM when the state of your app changes.

Svelte is a great choice for commerce due to how small files are. Product pages that load quicker are great for conversions.

In this tutorial we will touch on some of the basic "before cart/checkout" APIs available from Commerce.js.



Let's start by creating a new Svelte Sapper project using the sapper-template repository.

Don't forget to give your project a name by replacing sapper-commercejs-example:

npx degit "sveltejs/sapper-template#rollup" sapper-commercejs-example
Enter fullscreen mode Exit fullscreen mode

Once it's cloned, cd into the directory, and install the dependencies.

cd sapper-commercejs-example
npm install
Enter fullscreen mode Exit fullscreen mode

Now you're ready to go!

If you make any changes to the .svelte route files you should see this reflected in the browser. Do npm run dev and head to localhost:3000 🚀

đź’ˇ Feel free to remove any unwanted files, styles, or folders from the boilerplate. I'll go ahead and remove all routes, and components.

In the next step we'll install the @chec/commerce.js dependency.

AWS Q Developer image

Your AI Code Assistant

Implement features, document your code, or refactor your projects.
Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay