Skip to content

denoland/merch

Repository files navigation

Deno Merch

The Deno shop! Built with Deno and Fresh, powered by Shopify, and deployed to the edge with Deno Deploy.

Using SSR, islands architecture, and being deployed close to users, this shop has a perfect Lighthouse score of 100. Learn how you can build an e-commerce site with a perfect Lighthouse score.

Screen Shot

Screen Shot

Develop locally

  • Clone the repository
  • Set up Shopify credentials in the .env, follows .env.example.
  • Start the project in local mode:
    deno task start

Shopify Configuration Guide

  • Create a new account or use an existing one. https://accounts.shopify.com/store-login
  • Create a new app. https://<yourshopname>.myshopify.com/admin/settings/apps
  • Once your app has been created, select use it. Then select "Storefront API integration" link
  • Next, check Storefront API access scopes
    • unauthenticated_read_product_listings access should be fine to get you started.
    • Add more scopes if you require additional permissions.

Shopify Troubleshooting

  • If you encounter an error like error code 401 you likely didn't set this up correctly. Revisit your scopes and be sure add at least one test product. Also make sure you are using the Storefront API and not the Admin API as the endpoints and scopes are different.
  • If you do not see a checkout sidebar, or if it is empty after adding a product, you need to add an image to your test product.

Deploy to global

Sign in to dash.deno.com, create a new project, and then link to your clone version of the repository. Please ensure add shopify secret before link:

Screen Shot 2

Perfect Lighthouse score

Perfect lighthouse score

Today’s consumers are more demanding than ever, especially when it comes to shopping online. These experiences must feel intuitive and snappy. Even a 100-millisecond delay in load time can hurt conversion rates by 7%.

Our merch store, built with Fresh and Shopify’s storefront API, is server-side rendered (SSR) with some islands of interactivity and deployed close to users on the edge. Sending only what the client needs keeps the site lean and fast, earning it a perfect Lighthouse score.

Check out our tutorial that teaches you how to build an e-commerce site with a perfect Lighthouse score.