The Crystallize - Remix Run - Boilerplate provides a robust and modern foundation for building e-commerce applications using Remix Run, a full-stack web framework. This boilerplate is designed to accelerate development by offering a pre-configured setup that integrates seamlessly with Crystallize, a headless commerce platform. It emphasizes developer experience and production parity, adhering to principles like the Twelve-Factor App methodology.
Key features include:
- Rapid Project Setup: Get started quickly with a single command:
npx @crystallize/cli-next@latest install remix-run. This command scaffolds a new project, allowing developers to immediately dive into building their application. - Remix Run Integration: Leverages the power of Remix Run for server-side rendering (SSR), nested routing, and efficient data loading, ensuring high performance and a great user experience. Remix's approach to web development simplifies complex interactions and state management.
- Dockerized Development Environment: Includes optional Docker services for a consistent and isolated development environment. The
provisioning/dev/docker-compose.yamlfile allows for easy setup of essential services like Mailcatch (for email testing) and Redis (for caching or session management). A simplemake servecommand brings up the entire Docker network, including a Caddy proxy for HTTPS. - Custom Local Domain & HTTPS: Facilitates a production-like development environment by supporting custom local domains and HTTPS. This is crucial for testing features that rely on secure connections or specific domain configurations. Instructions are provided for configuring
/etc/hostsor usingdnsmasqfor multiple tenants, ensuring a smooth local development workflow. - Optimized Workflow: The
make servecommand not only starts Docker services but also runs the Node.js project on HTTP (port 3018) and a Live Reload WebSocket on HTTP (port 3019), with Caddy automatically enabling HTTPS on top of these services. This setup streamlines development by providing instant feedback and a secure testing environment. - Headless Commerce Ready: Built with Crystallize in mind, this boilerplate is ideal for developers looking to create dynamic and flexible e-commerce storefronts that consume data from a headless CMS/commerce API. It provides the necessary structure to connect to Crystallize's API and render product data efficiently.
- Technology Stack: Primarily built with TypeScript (95.7%), ensuring type safety and improved code quality. It utilizes React (via Remix) for the frontend and Node.js for the backend, offering a familiar and powerful JavaScript ecosystem.
Use cases for this boilerplate include:
- Building new e-commerce storefronts with a focus on performance and developer experience.
- Creating custom online shops that require a flexible and scalable architecture.
- Developing prototypes for headless commerce solutions.
- Learning and experimenting with Remix Run in a real-world e-commerce context.
This boilerplate aims to provide developers with a solid, opinionated starting point, reducing setup time and allowing them to focus on core business logic and unique features.
