Development

​

Step 1: Create a new Krypton storefront

You’ll see a confirmation message with details about your new project:

Craveup:   Starter.storefront
Language:  Typescript
Routes:
  • Home (/ & /:catchAll)
  • Page (/pages/:handle)
  • Cart (/cart/* & /discount/*)
  • Products (/products/:handle)
  • Collections (/collections & /collections/:handle)
  • Policies (/policies & /policies/:handle)
  • Blogs (/blogs/*)
  • Account (/account/*)
  • Search (/api/predictive-search & /search)
  • Robots (/robots.txt)
  • Sitemap (/sitemap.xml)

​

Step 2. Run the dev server

After installation, open your new project and start the dev server:

cd krypton-quickstart
craveup-krypton dev

The documentation website is now available at http://localhost:3000.

​

Step 3. Link Your Krypton Project to Crave Up

1. Link your Krypton project to Crave Up:

npx craveup-krypton link

2. Follow the prompts to log in to your Crave Up account and create a new storefront:

? Select an organization to log in to:
✓ my-craveup-organization

? Select a Hydrogen storefront to link:
✓ Create a new storefront

? New storefront name:
> krypton-quickstart

​

Step 4: Link Your Krypton Project to Crave Up

1. Update your project’s environment variables:

   npx craveup-krypton env pull
   

2. Your terminal will show a diff like this:

   - PUBLIC_LOCATION_SLUG=""
   - PUBLIC_API_KEY=""
   + PUBLIC_LOCATION_SLUG="h20-hospitality"
   + PUBLIC_API_KEY="57a4780f456441698d014c237092a84c"
   

To test your setup, run npm run dev, visit http://localhost:3000 in your browser, and you should see your storefront inventory displayed.

​

Step 5: Deploy to Auto Deploy

After your Krypton online ordering storefront is linked, you can use Auto Deploy to make it publicly accessible.

1. Deploy your project to Auto Deploy:

npx craveup-krypton deploy

2. When prompted to select a deployment environment, choose Preview.

The Krypton CLI builds your online ordering storefront, initiates a new Auto Deploy process, and provides a preview link in your terminal. Open this link in your browser to view your deployment URL.

​

Next steps

Congratulations! You’ve created a new Krypton storefront, connected it to Crave Up, and made your first deployment to Auto Deploy.