Krypton and Auto Deploy are essential components of Crave Up’s toolkit for creating custom online ordering experiences. This guide covers the core concepts of the framework and app.

​
Architecture

Three key parts of the Krypton stack work together to enable a unified developer experience:

TechnologyWhat it does
Krypton (App)A set of components, utilities, and design patterns that make it easier to work with Crave Up APIs. Krypton projects are preconfigured with Crave Up-specific features and functionality. Krypton handles API client credentials, provides off-the-shelf components pre-wired for Crave Up API data, and includes CLI tooling for local development, testing, and deployment.
Next.js (Framework)The open-source React framework that Krypton is built on top of. Next.js handles routing, data fetching, server-side rendering, UI reactivity, and styling.
Auto Deploy (Hosting)Crave Up’s global serverless hosting platform, built for deploying Krypton storefronts at the edge. Auto Deploy handles deployment environments, environment variable management, caching, and integration with Crave Up’s CDN.

Developing each layer of this tech stack together provides an end-to-end developer experience that reduces boilerplate code, improves productivity, and promotes optimal performance, accessibility, and SEO practices.

​
Krypton

​
Project structure

Krypton projects are structured similarly to typical Next.js apps and can be configured to your preferences. The following is the default Quickstart project structure:

📂 krypton-quickstart/
├── 📁 app/
│   ├── 📁 assets/
│   ├── 📁 components/
│   ├── 📁 graphql/
│   ├── 📁 lib/
│   ├── 📁 routes/
│   ├── 📁 styles/
│   ├── entry.client.jsx
│   ├── entry.server.jsx
│   └── root.jsx
├── 📁 public/
├── CHANGELOG.md
├── README.md
├── customer-accountapi.generated.d.ts
├── env.d.ts
├── jsconfig.json
├── package.json
├── postcss.config.js
├── server.js
├── storefrontapi.generated.d.ts
└── vite.config.js

​
Packages and dependencies

Krypton bundles a set of dependencies that work together to enable end-to-end development and deployment:

PackageDescription
@craveup/kryptonMain Krypton package. Contains Next.js-specific components and utilities for interacting with Crave Up APIs.
@craveup/krypton-cliCLI tool for working with Krypton projects.
@craveup/auto-deployLocal development server based on Auto Deploy.
@craveup/nextjs-adapterNext.js adapter that enables Krypton to be served on Auto Deploy.

​
Krypton sales channel

The Krypton sales channel app needs to be installed on your Crave Up account to enable the following features:

  • A channel where you can publish product inventory.
  • Auto Deploy hosting, to deploy your Krypton projects.
  • Managing storefronts and deployment environments, including environment variable management.

​
Next.js

Next.js is the open-source React-based framework that Krypton is built on top of. Krypton projects are Next.js apps with a set of preconfigured options, bundled with a collection of Crave Up-optimized components and utilities. Krypton includes a custom Next.js adapter that compiles your project for hosting on Auto Deploy.

Consider completing Next.js’s getting started tutorial for a solid foundation on the architecture and conventions of Next.js apps.

​
Key Next.js Concepts

ConceptDetails
Nested routesNext.js maps the nesting logic of app URLs to the nesting logic of components and data-loading, allowing all page data to load in parallel, reducing overall load times.
API RoutesNext.js API routes are functions that handle server-side logic, allowing you to create backend services directly within your Next.js application.
SSR (Server-Side Rendering)Next.js apps default to server-side rendering (SSR), where their React components are rendered as HTML before being sent to the browser.
Static Site Generation (SSG)Next.js can generate static HTML at build time, providing fast load times and improved SEO.
Incremental Static Regeneration (ISR)Next.js can update static content after the site has been built and deployed, ensuring content stays fresh without needing a full rebuild.
Progressive EnhancementNext.js uses web standards to ensure basic functionality without JavaScript, enhancing with client-side JavaScript when available. This approach, along with SSR, results in smaller bundle sizes and faster load times.

​
Auto Deploy

Auto Deploy is Crave Up’s global deployment platform, built for hosting Krypton storefronts at the edge. It provides multiple deployment environments, allowing you to preview every change before shipping it to production. Auto Deploy supports continuous deployment using GitHub, or you can configure your own custom CI/CD system.

Enable access to Auto Deploy by configuring your Krypton project with the appropriate deployment settings. Under the hood, Auto Deploy leverages Vercel’s infrastructure to ensure fast and reliable performance, providing seamless integration and optimal scalability for your storefront.

​
Supported Plans

Auto Deploy is available at no extra charge on all paid Crave Up plans:

  • Basic
  • Pro
  • Enterprise

​
Technical Specs

Auto Deploy leverages Vercel’s infrastructure, providing a serverless deployment environment. It supports web standard APIs such as Fetch, Cache, Streams, and Web Crypto. Some Node.js APIs aren’t available. Check the Auto Deploy documentation for a complete list.

If you prefer, you can self-host Krypton.

​
Limitations

You can use Auto Deploy for hosting online ordering storefronts. It’s subject to the Crave Up Acceptable Use Policy. Misuse or abuse of Auto Deploy might lead to throttling, suspension, or termination.

Worker files:

  • Must be 10 MB or less
  • Must be named index.js. The optional source map file must be named index.js.map.
  • Are limited to 30 seconds of CPU time per request
  • Can consume 128 MB max of memory. Exceeding this limit could mean dropped requests.

Static assets, maximum file sizes:

  • Images: 20 MB
  • Video: 1 GB
  • Other files: 20 MB
DevelopmentGet Location Info