Fundamentals & Concepts
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:
Technology | What 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:
Package | Description |
---|---|
@craveup/krypton | Main Krypton package. Contains Next.js-specific components and utilities for interacting with Crave Up APIs. |
@craveup/krypton-cli | CLI tool for working with Krypton projects. |
@craveup/auto-deploy | Local development server based on Auto Deploy. |
@craveup/nextjs-adapter | Next.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
Concept | Details |
---|---|
Nested routes | Next.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 Routes | Next.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 Enhancement | Next.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 namedindex.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